/* Hilfe & Beratung in der Region - /hilfsangebote/
   Alles unter #ha: die globale button:not(...)-Regel aus pg-weilheim-ui.css greift sonst.
   Farben nach Designkonzept 13.10.2026, Kontraste gemessen (AA, meist AAA). */

#ha{
  --grund:#FBF7F0; --karte:#FFFFFF; --text:#2B2622; --leise:#5A5048; --linie:#8A8176; --linie-zart:#E4DACB;
  --flaeche:#F6F0E6; --krise:#7A2832; --auf-c:#fff;
  --serif:'Cormorant Garamond',Georgia,serif; --sans:'Outfit',system-ui,sans-serif;
  font-family:var(--sans); font-size:1.125rem; line-height:1.55; color:var(--text);
}
[data-theme="dark"] #ha{
  --grund:#1F1B17; --karte:#2A2520; --text:#EDE6DB; --leise:#C9BFB2; --linie:#8A8176; --linie-zart:#4A4239;
  --flaeche:#332C25; --krise:#9E3440; --auf-c:#1F1B17;
}
/* Bereichsfarben: hell / dunkel */
#ha [data-b="senioren"],#ha[data-b="senioren"]{--c:#8A3B12}
#ha [data-b="familie"],#ha[data-b="familie"]{--c:#8E2A55}
#ha [data-b="kinder"],#ha[data-b="kinder"]{--c:#7A5200}
#ha [data-b="psyche"],#ha[data-b="psyche"]{--c:#4B3A8C}
#ha [data-b="sucht"],#ha[data-b="sucht"]{--c:#0F5E5B}
#ha [data-b="not"],#ha[data-b="not"]{--c:#1F4E8C}
#ha [data-b="gemeinde"],#ha[data-b="gemeinde"]{--c:#2F6B2A}
[data-theme="dark"] #ha [data-b="senioren"],[data-theme="dark"] #ha[data-b="senioren"]{--c:#E8A37A}
[data-theme="dark"] #ha [data-b="familie"],[data-theme="dark"] #ha[data-b="familie"]{--c:#E59AB9}
[data-theme="dark"] #ha [data-b="kinder"],[data-theme="dark"] #ha[data-b="kinder"]{--c:#E3B84C}
[data-theme="dark"] #ha [data-b="psyche"],[data-theme="dark"] #ha[data-b="psyche"]{--c:#B7A8F0}
[data-theme="dark"] #ha [data-b="sucht"],[data-theme="dark"] #ha[data-b="sucht"]{--c:#6CCBC4}
[data-theme="dark"] #ha [data-b="not"],[data-theme="dark"] #ha[data-b="not"]{--c:#8FB9EE}
[data-theme="dark"] #ha [data-b="gemeinde"],[data-theme="dark"] #ha[data-b="gemeinde"]{--c:#9AD28F}

#ha *{box-sizing:border-box}
#ha a{color:inherit}
#ha button{all:unset;box-sizing:border-box;cursor:pointer;font-family:var(--sans)}
#ha a:focus-visible,#ha button:focus-visible,#ha input:focus-visible{outline:3px solid var(--c,#1565C0);outline-offset:3px;border-radius:4px}
#ha p{margin:0 0 .9rem}

/* Kopf: ein Titel, ein Satz */
#ha .ha-kopf{margin:.4rem 0 1rem;max-width:68ch}
#ha h1{font-family:var(--serif);font-weight:600;font-size:clamp(1.9rem,4vw,2.6rem);line-height:1.12;margin:0 0 .35rem;color:var(--text)}
#ha .ha-kopf p{color:var(--leise);margin:0}
#ha .ha-zurueck{display:inline-flex;align-items:center;gap:.35rem;font-size:1rem;font-weight:600;text-decoration:none;color:var(--c,var(--text));min-height:44px}
#ha .ha-zurueck:hover{text-decoration:underline}

/* Bereichsleiste (14.10.2026): eine Zeile ueber Bereichs- und Detailseiten, am Handy wischbar.
   min-width:0, sonst drueckt die Reiterzeile als Grid-/Flex-Inhalt die ganze Seite breiter als das Handy */
#ha,#ha .ha-detail>*,#ha .ha-blaettern>*{min-width:0}
#ha .ha-nav{display:flex;align-items:center;gap:.5rem;margin:.4rem 0 1rem;min-width:0}
#ha .ha-nav ul{position:relative;display:flex;gap:.4rem;list-style:none;margin:0;padding:2px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0;
  -webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);mask-image:linear-gradient(90deg,#000 92%,transparent)}
#ha .ha-nav ul::-webkit-scrollbar{display:none}
#ha .ha-nav a{display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap;min-height:40px;padding:.3rem .85rem;border:1px solid var(--linie-zart);
  border-radius:999px;background:var(--karte);color:var(--text);font-size:.95rem;font-weight:500;text-decoration:none;transition:border-color .15s,background .15s}
#ha .ha-nav a:hover{border-color:var(--c,var(--linie))}
#ha .ha-nav li a[aria-current]{background:var(--c);border-color:var(--c);color:var(--auf-c);font-weight:600}
#ha .ha-nav-alle,#ha .ha-nav-suche{flex:none;font-weight:600!important}
#ha .ha-nav-alle{gap:0}   /* "‹ Alle" + " Bereiche" sind zwei Textteile - kein Flex-Abstand dazwischen */
#ha .ha-nav svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
[data-theme="dark"] #ha .ha-nav li a[aria-current]{color:var(--auf-c)!important}
@media (max-width:700px){   /* eine Zeile: "‹ Alle" | wischbare Reiter | Lupe */
  #ha .ha-lang{display:none}
  #ha .ha-nav{gap:.35rem}
  #ha .ha-nav-alle,#ha .ha-nav-suche{padding:.3rem .7rem}
}

/* Blaettern auf der Detailseite: vorheriges / alle / naechstes Angebot im Bereich */
#ha .ha-blaettern{display:grid;grid-template-columns:1fr auto 1fr;gap:.6rem;align-items:stretch;margin:1.8rem 0 0;max-width:46rem}
#ha .ha-bl{display:flex;flex-direction:column;justify-content:center;gap:.1rem;padding:.6rem .9rem;border:1px solid var(--linie-zart);border-radius:10px;
  background:var(--karte);text-decoration:none;color:var(--text);min-height:56px;transition:border-color .15s}
#ha .ha-bl:hover{border-color:var(--c)}
#ha .ha-bl-nach{text-align:right}
#ha .ha-bl-wort{font-size:.8rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--leise)}
#ha .ha-bl-titel{font-weight:600;line-height:1.3;hyphens:auto;overflow-wrap:break-word}
#ha .ha-bl-alle{align-self:center;font-size:.95rem;color:var(--leise);text-decoration:underline;text-decoration-color:var(--linie-zart);text-underline-offset:3px;padding:.4rem .2rem;white-space:nowrap}
#ha .ha-bl-alle:hover{color:var(--text);text-decoration-color:var(--c)}
@media (max-width:600px){
  #ha .ha-blaettern{grid-template-columns:1fr 1fr}
  #ha .ha-bl-alle{grid-column:1/-1;grid-row:2;justify-self:center}
}

/* Krisenband */
#ha .ha-krise{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem 1rem;background:var(--krise);color:#fff;border-radius:10px;padding:.55rem 1rem;margin:0 0 1.3rem}
#ha .ha-krise span{font-size:1rem}
#ha .ha-krise a{color:#fff;font-weight:700;font-size:1.3rem;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;font-variant-numeric:tabular-nums;white-space:nowrap}
#ha .ha-krise a:hover{text-decoration:underline}
#ha .ha-krise a:focus-visible{outline-color:#fff}
#ha .ha-krise svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;margin-right:.4rem}

/* Suche (Uebersicht), seit 14.10.2026 im Stil der Listenkarten: Feld mit Lupe, Treffer in EINER Karte */
#ha .ha-suche{margin:0 0 1.6rem;max-width:46rem}
#ha .ha-suche label{display:block;font-weight:600;font-size:1.15rem;margin:0 0 .4rem}
#ha .ha-suchrahmen{position:relative;display:block}
#ha .ha-suchrahmen svg{position:absolute;left:.9rem;top:50%;transform:translateY(-50%);width:20px;height:20px;stroke:var(--leise);fill:none;stroke-width:2;pointer-events:none}
#ha .ha-suche input{width:100%;font:inherit;font-size:1.125rem;padding:.65rem 1rem .65rem 2.7rem;border:1px solid var(--linie);border-radius:12px;background:var(--karte);color:var(--text);min-height:50px}
#ha .ha-suche input:focus{border-color:var(--text)}
#ha .ha-treffer{list-style:none;margin:.6rem 0 0;padding:0;background:var(--karte);border:1px solid var(--linie-zart);border-radius:12px;overflow:hidden}
#ha .ha-treffer[hidden],#ha .ha-treffer li[hidden]{display:none}
#ha .ha-treffer li:not([hidden])~li:not([hidden]){border-top:1px solid var(--linie-zart)}
#ha .ha-treffer a{display:grid;grid-template-columns:10px 1fr;gap:0 .8rem;align-items:center;padding:.6rem 1rem;text-decoration:none;color:var(--text)}
#ha .ha-treffer a::before{content:"";grid-row:1/3;width:10px;height:10px;border-radius:50%;background:var(--c)}
#ha .ha-treffer a:hover{background:var(--flaeche)}
#ha .ha-treffer b{font-weight:600}
#ha .ha-treffer small{display:block;color:var(--leise);font-size:.95rem}
#ha .ha-keine{color:var(--leise);margin:.6rem 0 0}

/* Uebersicht: Bereichskarten (Bildkacheln) - auf Wunsch beibehalten (Simon 14.10.2026) */
#ha .ha-bereiche{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.2rem;margin:0 0 1.4rem}
#ha .ha-bereich{display:flex;flex-direction:column;background:var(--karte);border-radius:12px;overflow:hidden;text-decoration:none;
  box-shadow:0 1px 4px rgba(0,0,0,.07);border-bottom:4px solid var(--c);transition:transform .18s ease,box-shadow .18s ease}
#ha .ha-bereich:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.14)}
#ha .ha-bereich img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
#ha .ha-bereich-txt{padding:1rem 1.15rem 1.1rem;display:flex;flex-direction:column;gap:.3rem;flex:1}
#ha .ha-bereich h2{font-family:var(--serif);font-weight:600;font-size:1.6rem;line-height:1.15;margin:0;color:var(--text)}
#ha .ha-bereich p{color:var(--leise);margin:0;flex:1}
#ha .ha-mehr{font-weight:600;color:var(--c);margin-top:.35rem}
#ha .ha-pdf{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;min-height:44px}
#ha .ha-pdf svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2}
#ha .ha-seite--frei{position:static}   /* Uebersicht: Bild bleibt oben, die Kacheln folgen darunter */
@media (max-width:420px){#ha .ha-bereiche{grid-template-columns:1fr}}


/* Bereichsseite: Kopf mit Bild */
/* kompakter Kopf (14.10.2026): Bild schmal rechts - vorher viel Leerraum ueber dem Titel */
#ha figure{margin:0}
#ha figure img{display:block;width:100%;height:auto;border-radius:12px;aspect-ratio:16/9;object-fit:cover}
/* pg-theme.css faerbt im Dunkelmodus jeden Link gold (!important) */
[data-theme="dark"] #ha a{color:var(--text)!important}
[data-theme="dark"] #ha a.ha-zurueck{color:var(--c)!important}
[data-theme="dark"] #ha .ha-krise a{color:#fff!important}
#ha figcaption{font-size:.875rem;color:var(--leise);margin-top:.3rem}

/* Bereichsseite: Angebote in Gruppen (Pfarreiengemeinschaft / Weilheim / Region).
   14.10.2026 vormittags: Zeilen statt Kacheln (die alten Kacheln hatten Farbbalken und ungleiche Hoehe).
   14.10.2026 nachmittags (Simon): "als kompakte Karten, sodass die Bilder etwas groesser werden".
   Daher Karten im Raster - aber ohne die alten Fehler: gleiche Hoehe je Reihe (Grid streckt), Telefon
   immer unten (margin-top:auto), kein Farbbalken. Bild oben ueber die volle Kartenbreite (16:10). */
#ha .ha-info.ha-gruppe{max-width:none;margin:0 0 1.4rem}
#ha .ha-zeilen{list-style:none;margin:0;padding:.9rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.8rem}
#ha .ha-zeile{position:relative;display:flex;flex-direction:column;background:var(--karte);border:1px solid var(--linie-zart);
  border-radius:10px;overflow:hidden;transition:box-shadow .2s,border-color .2s}
#ha .ha-zeile:hover{border-color:var(--linie);box-shadow:0 4px 14px rgba(26,26,26,.08)}
#ha .ha-zbild,#ha .ha-zeile .ha-ini{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:0}
#ha .ha-zeile .ha-ini{display:flex;align-items:center;justify-content:center;background:var(--flaeche);color:var(--c);font-size:1.6rem}
#ha .ha-zeile .ha-wer{padding:.6rem .8rem .15rem;gap:.1rem;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}  /* lange Woerter notfalls trennen */
#ha .ha-zanbieter{font-size:.78rem;font-weight:600;line-height:1.3;color:var(--c)}
#ha .ha-ztitel{font-weight:600;font-size:1.02rem;line-height:1.3;text-decoration:none;color:var(--text)}
#ha .ha-ztitel::after{content:"";position:absolute;inset:0}          /* ganze Karte anklickbar */
#ha .ha-zeile:hover .ha-ztitel{text-decoration:underline;text-decoration-color:var(--c);text-underline-offset:3px}
#ha .ha-zeile .ha-rolle{font-size:.88rem;line-height:1.35}
#ha .ha-zeile .ha-nr{position:relative;z-index:1;margin-top:auto;justify-self:auto;align-self:flex-start;
  padding:0 .8rem .3rem;font-size:1rem;min-height:44px}            /* Telefon bleibt eigener Link, immer unten */
#ha .ha-zeile .ha-pfeil{display:none}
/* Ortsschild auf dem Bild: ersetzt die drei Gruppenkarten (ein Raster fuellt die Seite, 14.10.2026) */
#ha .ha-ort{position:absolute;top:.5rem;left:.5rem;z-index:1;pointer-events:none;font-size:.72rem;font-weight:600;line-height:1.2;
  padding:.15rem .55rem;border-radius:999px;background:rgba(255,255,255,.93);color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,.18)}
#ha .ha-ort-0{background:var(--c);color:#fff}
#ha .ha-kurz{display:none}
@media (max-width:700px){#ha .ha-kurz{display:inline}}   /* "PG Weilheim" statt "Pfarreiengemeinschaft" (.ha-lang) */
[data-theme="dark"] #ha .ha-ort:not(.ha-ort-0){background:rgba(30,27,24,.9)}
/* Befristung und Archiv (gueltigkeit.py) */
#ha .ha-befristet{display:inline-block;margin:.1rem 0 .6rem;padding:.2rem .7rem;border-radius:999px;background:var(--flaeche);
  border:1px solid var(--linie);font-size:.9rem;font-weight:600}
#ha .ha-leer{margin:0;padding:1rem 1.1rem;color:var(--leise);font-size:1rem}
#ha .ha-leer[hidden],#ha .ha-zeilen[hidden]{display:none}
#ha .ha-archivlink{font-size:.95rem}
#ha .ha-archivlink a{color:var(--leise)}
#ha .ha-archiv .ha-ini svg{stroke:#fff}
#ha .ha-archiv .ha-wer a{color:var(--text)}
#ha .ha-anbieter{font-size:.9rem;font-weight:600;color:var(--c)}
/* Angebote der Pfarreiengemeinschaft: Anbieter als Abzeichen */
#ha .ha-pg{align-self:flex-start;display:inline-block;color:var(--text);background:var(--flaeche);border:1px solid var(--linie);border-radius:999px;padding:.05rem .65rem}

/* Detailseite */
#ha .ha-detail{display:grid;grid-template-columns:1.618fr 1fr;gap:2rem;align-items:start;margin:0 0 2rem}
#ha .ha-detail h1{margin-top:.2rem}
#ha>.ha-detail:first-child{margin-top:1.4rem}   /* Uebersicht hat keine Bereichsleiste darueber */
#ha .ha-detail .ha-anbieter{font-size:1rem}
#ha .ha-text{max-width:65ch}
/* Abschnittsueberschriften der Detailseite: kleine Versalien, duenne Linie (beruhigt 14.10.2026) */
#ha h2.ha-ab{font-family:var(--sans);font-size:.85rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--leise);
  margin:1.8rem 0 .5rem;padding-bottom:.35rem;border-bottom:1px solid var(--linie-zart)}
/* Infoblock (Simon 14.10.2026: "Kontaktinfos zusammen darstellen"): EINE Karte mit Ansprechpartnern,
   Adresse, Zeiten, Webseiten, Flyern. Spalte 1 = Initiale/Symbol, Spalte 2 = Text, Telefon rechts untereinander. */
#ha .ha-info{margin:1.6rem 0 .4rem;background:var(--karte);border:1px solid var(--linie-zart);border-radius:12px;overflow:hidden;max-width:46rem}
#ha .ha-info h2{font-family:var(--sans);font-size:.85rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--leise);
  margin:0;padding:.8rem 1.1rem .7rem;border-bottom:1px solid var(--linie-zart);background:var(--flaeche)}
#ha .ha-info svg{flex:none;width:20px;height:20px;stroke:var(--c);fill:none;stroke-width:2}
#ha .ha-personen{list-style:none;margin:0;padding:0}
#ha .ha-person{display:grid;grid-template-columns:40px 1fr auto;gap:.2rem 1rem;align-items:center;padding:.75rem 1.1rem}
#ha .ha-person+.ha-person{border-top:1px solid var(--linie-zart)}
#ha .ha-ini{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:.9rem;letter-spacing:.02em}
#ha .ha-wer{display:flex;flex-direction:column;min-width:0}
#ha .ha-wer b{font-weight:600;line-height:1.3}
#ha .ha-rolle{font-size:.95rem;color:var(--leise)}
#ha .ha-mail,#ha .ha-nr{display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;color:var(--text)}
#ha .ha-mail{font-size:.95rem;min-height:32px;overflow-wrap:anywhere;align-self:flex-start}
#ha .ha-mail svg,#ha .ha-nr svg{width:16px;height:16px}
#ha .ha-nr{font-weight:700;font-size:1.1rem;font-variant-numeric:tabular-nums;white-space:nowrap;min-height:44px;justify-self:end}
#ha .ha-mail:hover,#ha .ha-nr:hover{text-decoration:underline;text-decoration-color:var(--c);text-underline-offset:3px}
#ha .ha-angaben{border-top:1px solid var(--linie-zart);padding:.4rem 0}
#ha .ha-personen:empty+.ha-angaben,#ha h2+.ha-angaben{border-top:0}
#ha .ha-info-zeile{display:grid;grid-template-columns:40px 1fr;gap:0 1rem;padding:.5rem 1.1rem}
#ha .ha-info-zeile>svg{justify-self:center;margin-top:.15rem}
#ha .ha-info-titel{display:block;font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--leise);margin-bottom:.1rem}
#ha .ha-info-wert{display:block}
#ha .ha-info-links{list-style:none;margin:0;padding:0}
#ha .ha-info-links li{padding:.3rem 0}
#ha .ha-info-links a{display:inline;overflow-wrap:anywhere;font-weight:600;color:var(--text);text-decoration:underline;text-decoration-color:var(--c);text-underline-offset:3px}
#ha .ha-info-speichern{display:flex;align-items:center;gap:.6rem;border-top:1px solid var(--linie-zart);padding:.75rem 1.1rem;min-height:48px;
  font-weight:500;text-decoration:none;color:var(--text);transition:background .15s}
#ha .ha-info-speichern:hover{background:var(--flaeche)}
/* gegen die globale Gold-Regel fuer Links im Dunkelmodus (pg-theme.css) */
[data-theme="dark"] #ha .ha-info a{color:var(--text)!important}
@media (max-width:600px){
  #ha .ha-person{grid-template-columns:40px 1fr;padding:.75rem .9rem}
  #ha .ha-nr{grid-column:2;justify-self:start;min-height:40px}
  #ha .ha-info-zeile{padding:.5rem .9rem}
  #ha .ha-info h2,#ha .ha-info-speichern{padding-left:.9rem;padding-right:.9rem}
}
#ha ul.ha-punkte{margin:0;padding-left:1.2rem}
#ha ul.ha-punkte li{margin:.15rem 0}
/* ein einzelner Eintrag braucht keinen Aufzaehlungspunkt */
#ha ul.ha-punkte:has(> li:only-child){list-style:none;padding-left:0}
#ha .ha-links a{font-weight:600;color:var(--text);text-decoration:underline;text-decoration-color:var(--c);text-underline-offset:3px;display:inline-flex;align-items:center;min-height:44px;padding:.35rem 0}
#ha .ha-zitat{margin:1rem 0;padding:.8rem 1.1rem;border-left:4px solid var(--c);background:var(--flaeche);border-radius:0 10px 10px 0;max-width:65ch}
#ha .ha-zitat blockquote{margin:0;font-family:var(--serif);font-size:1.2rem;line-height:1.45;color:var(--text)}
#ha .ha-zitat figcaption{margin-top:.4rem;color:var(--leise);font-size:.95rem}
#ha .ha-hinweis{background:#FEF3C7;color:#78350F;border-radius:8px;padding:.7rem .9rem;margin-top:1.2rem}
#ha .ha-seite{position:sticky;top:90px;display:flex;flex-direction:column;gap:1rem}
/* Aktionen: schlichte Liste statt vier umrandeter Knoepfe in eigener Karte (14.10.2026) */
#ha .ha-aktionen{display:flex;flex-direction:column;gap:0;background:var(--karte);border:1px solid var(--linie-zart);border-radius:12px;overflow:hidden}
#ha .ha-aktionen .ha-knopf{display:flex;align-items:center;gap:.7rem;min-height:48px;padding:.5rem .9rem;color:var(--text);
  background:transparent;font-weight:500;font-size:1rem;text-decoration:none;transition:background .15s}
#ha .ha-aktionen .ha-knopf+.ha-knopf{border-top:1px solid var(--linie-zart)}
#ha .ha-aktionen .ha-meldung:empty{display:none}
#ha .ha-aktionen .ha-meldung{padding:.4rem .9rem}
#ha .ha-aktionen .ha-knopf:hover{background:var(--flaeche)}
#ha .ha-aktionen .ha-knopf:active{transform:scale(.98)}
#ha .ha-aktionen .ha-knopf svg{width:20px;height:20px;stroke:var(--c);fill:none;stroke-width:2;flex:none}
#ha .ha-aktionen .ha-meldung{font-size:.95rem;color:var(--leise);min-height:1.4em;margin:0}
#ha .ha-geschwister h2{font-family:var(--sans);font-size:.85rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--leise);margin:.4rem 0 .5rem}
#ha .ha-geschwister ul{list-style:none;margin:0;padding:0;background:var(--karte);border:1px solid var(--linie-zart);border-radius:12px;overflow:hidden}
#ha .ha-geschwister li+li{border-top:1px solid var(--linie-zart)}
#ha .ha-geschwister a{display:block;padding:.6rem .9rem;text-decoration:none;font-size:1rem;min-height:44px}
#ha .ha-geschwister a:hover{background:var(--flaeche)}
#ha .ha-geschwister a[aria-current]{font-weight:700;border-left:4px solid var(--c)}

/* Fuss */
#ha .ha-fuss{border-top:1px solid var(--linie-zart);padding:1rem 0 2rem;color:var(--leise);font-size:.95rem}
#ha .ha-fuss a{color:var(--text);font-weight:600;display:inline-flex;align-items:center;min-height:44px}

@media (max-width:800px){
  #ha .ha-detail{grid-template-columns:1fr;gap:1rem}
  #ha .ha-seite{position:static}
}
@media (max-width:600px){
  /* Handy: Querkarten, Bild links 100px (vorher 48px). Zwei schmale Karten nebeneinander zerrissen
     "Mehrgenerationenhaus" mitten im Wort, wo der Browser nicht deutsch trennt. */
  #ha .ha-zeilen{grid-template-columns:1fr;gap:.6rem;padding:.6rem}
  #ha .ha-zeile{display:grid;grid-template-columns:100px 1fr;grid-template-rows:1fr auto}
  #ha .ha-zbild,#ha .ha-zeile .ha-ini{grid-row:1/3;width:100px;height:100%;min-height:100px;aspect-ratio:auto}
  #ha .ha-zeile .ha-wer{grid-column:2;padding:.5rem .7rem .1rem}
  #ha .ha-ztitel{font-size:.95rem}
  #ha .ha-ort{top:.35rem;left:.35rem;max-width:90px;font-size:.6rem;padding:.1rem .4rem}
  #ha .ha-zeile .ha-nr{grid-column:2;padding:0 .7rem .2rem;font-size:.95rem;min-height:40px}
  #ha .ha-anzahl{grid-column:2;justify-self:start;min-height:0}
  #ha .ha-pfeil{display:none}
}
/* Mikroanimationen (Simon 14.10.2026), Regeln wie pg-micro.css: dezent, <=250 ms, nur transform/opacity,
   nur ohne "reduzierte Bewegung". Rueckmeldung bei jedem Antippen (Eindruecken). */
@media (prefers-reduced-motion:no-preference){
  /* Eindruecken beim Antippen/Klicken */
  #ha .ha-nav a,#ha .ha-knopf,#ha .ha-bl,#ha .ha-info-speichern,#ha .ha-nr,#ha .ha-mail,#ha .ha-zeile,#ha .ha-bereich,#ha .ha-geschwister a{
    transition:transform .15s ease,background-color .2s ease,border-color .2s ease,box-shadow .2s ease,color .2s ease}
  #ha .ha-nav a:active,#ha .ha-knopf:active,#ha .ha-info-speichern:active,#ha .ha-nr:active,#ha .ha-bl:active{transform:scale(.96)}
  #ha .ha-zeile:active,#ha .ha-bereich:active{transform:scale(.99)}
  /* Pfeile und Blaettern zeigen die Richtung */
  #ha .ha-pfeil,#ha .ha-mehr{transition:transform .2s ease}
  #ha .ha-zeile:hover .ha-pfeil,#ha .ha-bereich:hover .ha-mehr{transform:translateX(4px)}
  #ha .ha-bl-vor:hover{transform:translateX(-3px)}
  #ha .ha-bl-nach:hover{transform:translateX(3px)}
  #ha .ha-geschwister a:hover{transform:translateX(3px)}
  /* Telefonsymbol: kurzes Klingeln beim Ueberfahren */
  #ha .ha-nr:hover svg,#ha .ha-krise a:hover svg{animation:ha-klingeln .45s ease-in-out}
  /* Suchtreffer, Meldung, Bestaetigung */
  #ha .ha-treffer li:not([hidden]){animation:ha-ein .2s ease-out both}
  #ha .ha-meldung.ha-neu{animation:ha-ein .2s ease-out}
  #ha .ha-knopf.ha-ok{background:var(--flaeche)}
  #ha .ha-knopf.ha-ok svg{animation:ha-pop .3s ease-out}
  /* Einblenden beim Scrollen (setzt ha.js nur unterhalb des ersten Bildschirms) */
  #ha .ha-warten{opacity:0;transform:translateY(10px)}
  #ha .ha-warten.ha-da{opacity:1;transform:none;transition:opacity .4s ease-out,transform .4s ease-out}
  @keyframes ha-ein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  @keyframes ha-pop{0%{transform:scale(.7)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
  @keyframes ha-klingeln{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}40%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(5deg)}}
}
@media (prefers-reduced-motion:reduce){#ha *{transition:none!important;animation:none!important}}

/* Druck: Rahmen, Kopf, Fuss und Knoepfe regelt pg-druck.css */
@media print{
  #ha{font-size:10.5pt;color:#000}
  #ha .ha-warten{opacity:1!important;transform:none!important}
  #ha .ha-krise{background:none;color:#000;border:1pt solid #000;padding:3pt 6pt}
  #ha .ha-krise a{color:#000;font-size:11pt}
  #ha .ha-seite figure,#ha .ha-aktionen,#ha .ha-geschwister,#ha .ha-suche,#ha .ha-zurueck,#ha .ha-nav,#ha .ha-blaettern{display:none!important}
  #ha .ha-detail{display:block}
  #ha .ha-info,#ha .ha-bereich{box-shadow:none;border:1pt solid #999;break-inside:avoid}
  #ha .ha-bereich img{display:none}
  #ha .ha-gruppe{break-inside:auto}
  #ha .ha-zeile{break-inside:avoid}
  #ha .ha-zbild,#ha .ha-zeile .ha-ini,#ha .ha-pfeil{display:none}
  /* Papier: wieder als Liste, Bilder kosten nur Tinte */
  #ha .ha-zeilen{display:block;padding:0}
  #ha .ha-zeile{display:grid;grid-template-columns:1fr auto;border:0;border-radius:0;padding:3pt 6pt}
  #ha .ha-zeile+.ha-zeile{border-top:1px solid #ccc}
  #ha .ha-zeile .ha-nr{margin-top:0;padding:0}
  #ha .ha-info h2{background:none}
  #ha .ha-info-speichern{display:none!important}
  #ha .ha-info a{color:#000!important}
  #ha .ha-info-links a::after{content:" (" attr(href) ")";font-weight:400;font-size:9pt;overflow-wrap:anywhere}
  #ha .ha-links a::after{content:" (" attr(href) ")";font-weight:400;font-size:9pt;overflow-wrap:anywhere}
}