/*
 * Paket HA-003: Hausaushang und Sonderaushänge als Webseite - dieselben Farben und derselbe Aufbau wie das gedruckte
 * Blatt (AushangBlatt). Gilt für die Handyseite hinter dem QR-Code und die Startseite des Portals.
 * Quelle: install/oeffentlich/aushang/assets/aushang.css (ins Portal kopiert). Alle Klassen beginnen mit "ha-".
 */
:root {
  --ha-blau: #002443; --ha-blau-hell: #e8eef4; --ha-blaugrau: #465a6e; --ha-text: #212529;
  --ha-grau: #6e767d; --ha-grau-hell: #f3f5f7; --ha-linie: #d6dce2;
  --ha-rot: #be1e2d; --ha-rot-dunkel: #9c1724; --ha-orange: #cd5c00; --ha-orange-hell: #fdf1e4;
}

.ha { min-width: 0; color: var(--ha-text); container-type: inline-size; }
.ha a { color: inherit; text-decoration: none; }
.ha a:hover, .ha a:focus-visible { text-decoration: underline; }
.ha-marke { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 700; letter-spacing: .06em;
            text-transform: uppercase; color: var(--ha-blaugrau); line-height: 1.3; }

/* Überschrift */
.ha-titel { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; margin: 0 0 .8rem; }
.ha-titel h3 { margin: 0; font-size: 1.45rem; line-height: 1.2; color: var(--ha-blau); font-weight: 800; }
.ha-extern { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; font-weight: 600; color: var(--ha-blau) !important;
             border: 1px solid var(--ha-linie); border-radius: 999px; padding: .25rem .75rem; background: #fff; white-space: nowrap; }

/* Notruf: rote Kacheln */
.ha-notruf { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .6rem; margin-bottom: .6rem; }
.ha-notruf-kachel { display: flex; flex-direction: column; background: var(--ha-rot); color: #fff !important; border-radius: 6px;
                    padding: .55rem .8rem .5rem; text-decoration: none !important; min-width: 0; }
a.ha-notruf-kachel:hover { background: var(--ha-rot-dunkel); }
.ha-notruf-kachel .ha-marke { color: #fff; opacity: .9; }
.ha-notruf-name { font-size: .95rem; line-height: 1.25; hyphens: auto; flex: 1 0 auto; }
.ha-notruf-nr { font-size: 2.1rem; font-weight: 800; line-height: 1; align-self: flex-end; margin-top: .2rem; }

/* Ihre Hausverwaltung */
.ha-hv { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; align-items: center;
         background: var(--ha-blau-hell); border-left: 5px solid var(--ha-blau); border-radius: 6px; padding: .8rem 1rem; }
.ha-hv-angaben { display: flex; flex-direction: column; min-width: 0; gap: .1rem; font-size: .95rem; }
.ha-hv-name { color: var(--ha-blau); font-size: 1.08rem; overflow-wrap: anywhere; }
.ha-hv-kontakt { overflow-wrap: anywhere; }
.ha-trenner { color: var(--ha-grau); }
.ha-hv-ruf { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; min-width: 0; }
.ha-erreichbar { color: var(--ha-orange); font-weight: 700; font-size: .88rem; }
/* breit genug: Rufnummer rechts neben den Angaben wie auf dem gedruckten Aushang */
@container (min-width: 700px) {
  .ha-hv { grid-template-columns: minmax(0, 1fr) auto; }
  .ha-hv-ruf { align-items: flex-end; }
  .ha-erreichbar { text-align: right; }
}

/* Rufnummer zum Antippen */
.ha-anruf { display: inline-flex; align-items: center; gap: .45rem; font-weight: 800; white-space: nowrap; color: var(--ha-blau) !important;
            background: #fff; border: 2px solid var(--ha-blau); border-radius: 999px; padding: .3rem .85rem; font-size: 1.12rem;
            text-decoration: none !important; line-height: 1.2; }
a.ha-anruf:hover, a.ha-anruf:focus-visible { background: var(--ha-blau); color: #fff !important; }
.ha-anruf.ha-gross { font-size: 1.6rem; padding: .35rem 1.1rem; background: var(--ha-blau); color: #fff !important; }
a.ha-anruf.ha-gross:hover { background: #001a30; }

/* Notdienste */
.ha .ha-abschnitt { text-transform: none; letter-spacing: normal; font-weight: 700; margin: 1.3rem 0 .5rem; padding-bottom: .35rem; border-bottom: 2px solid var(--ha-blau); color: var(--ha-blau); font-size: 1.05rem; }
.ha-hinweis { margin: 0 0 .7rem; font-size: .95rem; overflow-wrap: anywhere; }
.ha-hinweis p { margin: 0 0 .4rem; } .ha-hinweis p:last-child { margin-bottom: 0; }
.ha-firmen { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .6rem; }
.ha-firma { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; min-width: 0;
            background: var(--ha-grau-hell); border-left: 4px solid var(--ha-blau); border-radius: 6px; padding: .6rem .8rem .7rem; }
.ha-firma-kopf { display: flex; justify-content: space-between; gap: .5rem; width: 100%; }
.ha-nd { color: var(--ha-orange); }
/* HA-004: Platz für zwei Zeilen Firmenname, die Rufnummer steht unten - in einer Reihe alle auf gleicher Höhe */
.ha-firma-name { font-size: 1rem; overflow-wrap: anywhere; line-height: 1.3; }
@container (min-width: 472px) { .ha-firma-name { min-height: 2.6em; } }   /* nur wenn Karten nebeneinander stehen */
.ha-firma .ha-anruf { margin-top: auto; }
.ha-firma-mail { font-size: .85rem; color: var(--ha-grau) !important; overflow-wrap: anywhere; }
.ha-stand { margin: .9rem 0 0; font-size: .82rem; color: var(--ha-grau); }

/* Sonderaushang */
.ha-sonder { border-radius: 8px; overflow: hidden; background: #fff; border: 1px solid #f0c9a3; min-width: 0; }
.ha-sonder-band { background: var(--ha-orange); color: #fff; padding: .7rem 1rem .8rem; }
.ha-sonder-band .ha-marke { color: #fff; opacity: .92; }
.ha-sonder-band h2 { margin: .2rem 0 0; font-size: 1.35rem; line-height: 1.25; color: #fff; display: block; overflow-wrap: anywhere; }
.ha-sonder-wann { background: var(--ha-orange-hell); padding: .5rem 1rem .55rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .8rem; }
.ha-sonder-wann .ha-marke { color: var(--ha-orange); flex-basis: 100%; }
.ha-sonder-wann strong { font-size: 1.08rem; }
.ha-sonder-haus { display: inline-flex; align-items: center; gap: .3rem; color: var(--ha-blaugrau); font-size: .9rem; }
.ha-sonder.ha-kuenftig .ha-sonder-band { background: #a86a2e; }
.ha-text { padding: .8rem 1rem .9rem; overflow-wrap: anywhere; }
.ha-text h3 { color: var(--ha-blau); font-size: 1.1rem; margin: .2rem 0 .5rem; }
.ha-text p { margin: 0 0 .6rem; } .ha-text p:last-child { margin-bottom: 0; }
.ha-text ul { margin: 0 0 .6rem; padding-left: 1.3rem; }

/* HA-004: ruhige Fassung für die Einbettung in eine Seite mit eigenem Aufbau (Portal) - gleicher Aufbau, aber ohne
   rote Flächen und große Knöpfe; Farbe nur als Kante und in den Rufnummern */
.ha-ruhig .ha-titel h3 { font-size: 1rem; font-weight: 600; display: flex; align-items: center; gap: .4rem; }
.ha-ruhig .ha-notruf { gap: .5rem; }
.ha-ruhig .ha-notruf-kachel { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .6rem; align-items: center;
                              background: #fff; color: var(--ha-text) !important; border: 1px solid var(--ha-linie);
                              border-left: 4px solid var(--ha-rot); padding: .45rem .75rem; }
a.ha-ruhig .ha-notruf-kachel:hover, .ha-ruhig a.ha-notruf-kachel:hover { background: #fdf0f1; }
.ha-ruhig .ha-notruf-kachel .ha-marke { color: var(--ha-rot); opacity: 1; grid-column: 1; }
.ha-ruhig .ha-notruf-name { grid-column: 1; padding: 0; }
.ha-ruhig .ha-notruf-nr { grid-column: 2; grid-row: 1 / 3; font-size: 1.45rem; color: var(--ha-rot); margin: 0; align-self: center; }
.ha-ruhig .ha-hv { background: #fff; border: 1px solid var(--ha-linie); border-left: 4px solid var(--ha-blau); padding: .7rem .9rem; }
.ha-ruhig .ha-hv-name { font-size: 1rem; }
.ha-ruhig .ha-erreichbar { font-size: .82rem; }
.ha-ruhig .ha-anruf { font-size: .98rem; border-width: 1px; padding: .2rem .7rem; font-weight: 700; }
.ha-ruhig .ha-anruf.ha-gross { font-size: 1.15rem; background: #fff; color: var(--ha-blau) !important; border-width: 2px; }
.ha-ruhig a.ha-anruf.ha-gross:hover { background: var(--ha-blau); color: #fff !important; }
.ha-ruhig .ha-abschnitt { font-size: .95rem; border-bottom-width: 1px; margin-top: 1.1rem; }
.ha-ruhig .ha-hinweis { font-size: .9rem; color: var(--ha-blaugrau); }
.ha-ruhig .ha-firma { background: #fff; border: 1px solid var(--ha-linie); border-left: 3px solid var(--ha-blau); padding: .5rem .75rem .6rem; }
.ha-ruhig .ha-firma-name { font-size: .95rem; }

@media (max-width: 420px) {
  .ha-notruf-nr { font-size: 1.8rem; }
  .ha-anruf.ha-gross { font-size: 1.4rem; }
}

/* PO-040: ruhige Fassung (Portal) flacher - Notrufe in einer Zeile, Hausverwaltung schlicht, Notdienste als Liste
   (links Fachgebiet und Firma, rechts die Nummer). Der gedruckte Aushang und die Aushangseite (.ha ohne ha-ruhig)
   bleiben unverändert. */
.ha-ruhig .ha-notruf { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; margin-bottom: .7rem; }
.ha-ruhig .ha-notruf-kachel { display: inline-flex; flex-direction: row; align-items: baseline; gap: .45rem; background: none; border: 0; padding: 0; border-radius: 0; }
.ha-ruhig a.ha-notruf-kachel:hover { background: none; text-decoration: none; }
.ha-ruhig a.ha-notruf-kachel:hover .ha-notruf-nr { text-decoration: underline; }
.ha-ruhig .ha-notruf-kachel .ha-marke { display: none; }
.ha-ruhig .ha-notruf-name { font-size: .9375rem; color: var(--ha-text); flex: none; }
.ha-ruhig .ha-notruf-nr { font-size: 1rem; font-weight: 600; color: var(--ha-rot); order: 2; font-variant-numeric: tabular-nums; }
.ha-ruhig .ha-hv { display: block; background: none; border: 0; border-top: 1px solid var(--ha-linie); border-radius: 0; padding: .6rem 0 0; }
.ha-ruhig .ha-hv-angaben { font-size: .875rem; color: var(--ha-blaugrau); }
.ha-ruhig .ha-hv-angaben .ha-marke { display: none; }
.ha-ruhig .ha-hv-name { font-size: .9375rem; font-weight: 500; color: var(--ha-text); }
.ha-ruhig .ha-hv-ruf { flex-direction: row; flex-wrap: wrap; align-items: center; gap: .3rem .75rem; margin-top: .45rem; }
.ha-ruhig .ha-erreichbar { font-size: .875rem; font-weight: 400; color: var(--ha-blaugrau); text-align: left; }
/* PO-058: Rufnummern ohne Rahmen - Zeichen und Nummer in der Hausfarbe, Ziffern gleich breit (stehen bündig untereinander) */
.ha-ruhig .ha-anruf, .ha-ruhig .ha-anruf.ha-gross { font-size: .9375rem; font-weight: 500; background: none; color: var(--ha-blau) !important; border: 0;
  border-radius: 6px; padding: .25rem .45rem; margin-right: -.45rem; font-variant-numeric: tabular-nums; }
.ha-ruhig .ha-anruf svg { opacity: .7; }
.ha-ruhig a.ha-anruf:hover, .ha-ruhig a.ha-anruf.ha-gross:hover { background: var(--ha-blau-hell); color: var(--ha-blau) !important; text-decoration: none; }
.ha-ruhig .ha-hv-ruf .ha-anruf { margin-right: 0; margin-left: -.45rem; }
.ha-ruhig .ha-abschnitt { font-size: .9375rem; font-weight: 600; border-bottom: 0; padding-bottom: 0; margin: 1.1rem 0 .2rem; color: var(--ha-text); }
.ha-ruhig .ha-hinweis { font-size: .8125rem; margin-bottom: .4rem; }
.ha-ruhig .ha-firmen { display: block; }
.ha-ruhig .ha-firma { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .75rem; row-gap: 0; align-items: center;
  background: none; border: 0; border-top: 1px solid var(--ha-linie); border-radius: 0; padding: .45rem 0; }
.ha-ruhig .ha-firma-kopf { grid-column: 1; justify-content: flex-start; }
/* PO-058: Fachgebiet in normaler Schreibweise, klein und grau statt GROSS und fett */
.ha-ruhig .ha-firma-kopf { flex-wrap: wrap; gap: 0 .3rem; }
.ha-ruhig .ha-firma-kopf .ha-marke { font-size: .8125rem; font-weight: 400; text-transform: none; letter-spacing: normal; color: var(--ha-grau); }
.ha-ruhig .ha-firma-kopf .ha-nd { color: var(--ha-orange); }
.ha-ruhig .ha-firma-kopf .ha-nd::before { content: '·'; color: var(--ha-grau); margin-right: .3rem; }
.ha-ruhig .ha-firma-name { grid-column: 1; font-size: .9375rem; font-weight: 400; min-height: 0; }
.ha-ruhig .ha-firma .ha-anruf { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
.ha-ruhig .ha-firma-mail { grid-column: 1 / -1; font-size: .8125rem; }
.ha-ruhig .ha-stand { font-size: .8125rem; margin-top: .5rem; }
/* PO-058: alle Notdienste teilen sich eine Spalte für die Nummer - die Nummern stehen bündig untereinander */
@supports (grid-template-columns: subgrid) {
  .ha-ruhig .ha-firmen { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .75rem; }
  .ha-ruhig .ha-firma { grid-column: 1 / -1; grid-template-columns: subgrid; }
  .ha-ruhig .ha-firma .ha-anruf { justify-self: start; }
}
.ha-ruhig .ha-firmen { row-gap: 0; }
/* PO-058: schmal (Handy) - Nummer unter dem Namen statt daneben, sonst bricht der Firmenname mitten im Wort */
@container (max-width: 440px) {
  .ha-ruhig .ha-firmen { display: block; }
  .ha-ruhig .ha-firma { grid-template-columns: minmax(0, 1fr); }
  .ha-ruhig .ha-firma .ha-anruf { grid-column: 1; grid-row: auto; justify-self: start; margin: .1rem 0 0 -.45rem; }
}