/* Hafnertec Galerie – Gestaltung wie Entwurf entwuerfe/2026-10-22/galerie.html */
.htg, .htg-gross {
  --htg-knopf: #b2614d; --htg-knopf-hover: #9d5140; --htg-glut: #e98368;
  --htg-text: #d3d0c9; --htg-leise: #aeaaa3; --htg-hell: #f4f1ec;
  --htg-glas: rgba(255,255,255,.045); --htg-linie: rgba(255,255,255,.13);
  --htg-kopf: "Poppins", Arial, sans-serif; --htg-fliess: "Manrope", Arial, sans-serif;
  --htg-rund: 20px;
  color: var(--htg-text); font-family: var(--htg-fliess);
}
.htg *, .htg-gross * { box-sizing: border-box; }
.htg button, .htg-gross button { font-family: var(--htg-fliess); }

/* Filter */
.htg-rahmen { background: var(--htg-glas); border: 1px solid var(--htg-linie); border-radius: var(--htg-rund); padding: 18px 22px 14px; }
.htg-reiter { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--htg-linie); }
.htg-reiter button { font-weight: 600; font-size: 16px; color: var(--htg-text); background: transparent; border: 1px solid var(--htg-linie); border-radius: 999px; min-height: 44px; padding: 8px 18px; cursor: pointer; line-height: 1.2; }
.htg-reiter button[aria-pressed="true"] { background: #fff; color: #1d1d20; border-color: #fff; }
.htg-reiter button:hover:not([aria-pressed="true"]) { border-color: rgba(255,255,255,.45); color: #fff; background: transparent; }
.htg-zahl { font-weight: 400; opacity: .7; margin-left: 6px; }
.htg-gruppen { display: grid; grid-template-columns: 1fr; gap: 10px; }
.htg-gruppe { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.htg-name { flex: 0 0 104px; font: 600 14px/36px var(--htg-kopf); color: var(--htg-leise); white-space: nowrap; }
.htg-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.htg-chip { font-weight: 600; font-size: 14px; color: var(--htg-text); background: var(--htg-glas); border: 1px solid var(--htg-linie); border-radius: 999px; min-height: 36px; padding: 5px 13px; cursor: pointer; white-space: nowrap; line-height: 1.2; }
.htg-chip:hover:not(:disabled) { border-color: rgba(255,255,255,.4); color: #fff; background: var(--htg-glas); }
.htg-chip[aria-pressed="true"], .htg-chip[aria-pressed="true"]:hover { background: var(--htg-knopf); border-color: var(--htg-knopf); color: #fff; }
.htg-chip:disabled { opacity: .35; cursor: default; }
.htg-unten { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 14px; font-size: 15px; color: var(--htg-leise); }
.htg-unten b { color: #fff; font-weight: 600; }
.htg-zurueck { font-weight: 600; font-size: 15px; color: var(--htg-glut); background: none; border: 0; cursor: pointer; min-height: 36px; padding: 0; }
.htg-zurueck:hover { background: none; color: #fff; }
.htg-zurueck[hidden] { display: none; }
.htg-filter-auf { display: none; }

/* Raster */
.htg-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; list-style: none; margin: 28px 0 0; padding: 0; }
.htg-karte { min-width: 0; margin: 0; }
.htg-karte[hidden] { display: none; }
.htg-karte > button { all: unset; box-sizing: border-box; display: block; width: 100%; height: 100%; cursor: pointer; border-radius: var(--htg-rund); background: #2c2c31; border: 1px solid var(--htg-linie); overflow: hidden; }
.htg-karte > button:focus-visible { outline: 3px solid var(--htg-hell); outline-offset: 3px; }
.htg-bild { display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #333338; }
.htg-bild img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.htg-karte > button:hover .htg-bild img { transform: scale(1.04); }
.htg-art { position: absolute; left: 12px; top: 12px; font-weight: 600; font-size: 13px; color: #fff; background: rgba(22,22,26,.72); border-radius: 999px; padding: 4px 11px; }
.htg-art-projekt { background: rgba(157,81,64,.92); }
.htg-anzahl { position: absolute; right: 12px; bottom: 12px; font-weight: 600; font-size: 13px; color: #fff; background: rgba(22,22,26,.65); border-radius: 999px; padding: 3px 10px; }
.htg-text { display: block; padding: 16px 18px 18px; }
.htg-titel { display: block; font: 600 18px/1.25 var(--htg-kopf); letter-spacing: -.01em; color: #fff; margin: 0 0 4px; }
.htg-meta { display: block; font-size: 14px; color: var(--htg-leise); }
.htg-homestory { grid-column: span 2; }
.htg-homestory > button { display: grid; grid-template-columns: 1.25fr 1fr; }
.htg-homestory .htg-bild { aspect-ratio: auto; min-height: 100%; }
.htg-homestory .htg-text { padding: 28px 28px 26px; display: flex; flex-direction: column; justify-content: center; }
.htg-homestory .htg-titel { font-size: 26px; line-height: 1.2; margin-bottom: 12px; }
.htg-auszug { display: block; font-size: 16px; line-height: 1.55; margin: 0 0 14px; }
.htg-weiter { display: block; color: var(--htg-glut); font-weight: 600; font-size: 16px; }
.htg-leer { text-align: center; padding: 64px 0 24px; }
.htg-leer[hidden] { display: none; }
.htg-leer p { font-size: 18px; margin-bottom: 12px; }

/* Knöpfe */
.htg-knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; background: var(--htg-knopf); color: #fff !important; font-weight: 600; font-size: 17px; text-decoration: none !important; padding: 13px 28px; border-radius: 999px; border: 0; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.htg-knopf:hover { background: var(--htg-knopf-hover); }
.htg-knopf-zwei, .htg-knopf-zwei:hover { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.6); }

/* Großansicht */
.htg-gross { position: fixed; inset: 0; z-index: 99999; background: rgba(16,16,19,.94); display: grid; grid-template-columns: minmax(0, 1fr) 380px; opacity: 0; visibility: hidden; transition: opacity .2s; }
.htg-gross[hidden] { display: none; }
.htg-gross.htg-offen { opacity: 1; visibility: visible; }
.htg-buehne { position: relative; display: flex; align-items: center; justify-content: center; padding: 56px 72px 120px; min-width: 0; min-height: 0; }
.htg-buehne img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 14px; }
.htg-gross .htg-runde { position: absolute; width: 52px; height: 52px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); background: rgba(30,30,34,.7); color: #fff; cursor: pointer; display: grid; place-items: center; padding: 0; font-size: 24px; line-height: 1; }
.htg-gross .htg-runde:hover { background: rgba(60,60,66,.9); }
.htg-gross .htg-runde[hidden] { display: none; }
.htg-vorher { left: 12px; top: 50%; transform: translateY(-70%); }
.htg-nachher { right: 12px; top: 50%; transform: translateY(-70%); }
.htg-schliessen { top: 14px; right: 14px; z-index: 2; }
.htg-daumen { position: absolute; left: 72px; right: 72px; bottom: 24px; display: flex; gap: 8px; justify-content: center; overflow-x: auto; }
.htg-daumen button { flex: 0 0 auto; width: 96px; height: 64px; border-radius: 8px; overflow: hidden; border: 2px solid transparent; padding: 0; cursor: pointer; background: none; opacity: .6; }
.htg-daumen button[aria-current="true"] { border-color: #fff; opacity: 1; }
.htg-daumen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.htg-seite { background: #26262a; border-left: 1px solid var(--htg-linie); padding: 64px 32px 32px; overflow-y: auto; }
.htg-seite .htg-art { position: static; display: inline-block; background: #3a3a40; margin-bottom: 14px; }
.htg-seite .htg-art-projekt { background: var(--htg-knopf); }
.htg-seite h2 { font: 600 28px/1.2 var(--htg-kopf); letter-spacing: -.02em; color: #fff; margin: 0 0 16px; }
.htg-hinweis { font-size: 14px; color: var(--htg-leise); margin: -4px 0 18px; }
.htg-story { font-size: 16px; line-height: 1.55; }
.htg-seite dl { margin: 0 0 24px; display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 16px; }
.htg-seite dt { color: var(--htg-leise); }
.htg-seite dd { margin: 0; color: #fff; }
.htg-seite dd a, .htg-seite .htg-link { color: #fff; text-decoration: underline; text-decoration-color: var(--htg-glut); text-underline-offset: 4px; }
.htg-seite dd a:hover, .htg-seite .htg-link:hover { color: var(--htg-glut); }
.htg-aktionen { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.htg-aktionen .htg-knopf { width: 100%; }
body.htg-gesperrt { overflow: hidden; }

@media (max-width: 1024px) {
  .htg-raster { grid-template-columns: 1fr 1fr; }
  .htg-gross { grid-template-columns: 1fr; grid-template-rows: minmax(0, 58vh) auto; overflow-y: auto; }
  .htg-buehne { padding: 56px 12px 84px; }
  .htg-daumen { left: 12px; right: 12px; bottom: 12px; justify-content: flex-start; }
  .htg-daumen button { width: 72px; height: 48px; }
  .htg-seite { border-left: 0; border-top: 1px solid var(--htg-linie); padding: 24px 20px 32px; overflow: visible; }
  .htg-gross .htg-runde { width: 44px; height: 44px; }
}
@media (max-width: 767px) {
  .htg-raster { grid-template-columns: 1fr; gap: 16px; }
  .htg-homestory { grid-column: auto; }
  .htg-homestory > button { grid-template-columns: 1fr; }
  .htg-homestory .htg-bild { aspect-ratio: 4 / 3; }
  .htg-homestory .htg-text { padding: 18px 18px 20px; }
  .htg-homestory .htg-titel { font-size: 21px; }
  .htg-rahmen { padding: 14px 14px 10px; }
  .htg-reiter { flex-wrap: nowrap; overflow-x: auto; margin: 0 -14px 10px; padding: 0 14px 10px; scrollbar-width: none; }
  .htg-reiter button { flex: 0 0 auto; padding: 8px 14px; font-size: 15px; }
  .htg-filter-auf { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 15px; color: #fff; background: var(--htg-glas); border: 1px solid var(--htg-linie); border-radius: 999px; min-height: 40px; padding: 6px 14px; cursor: pointer; }
  .htg-gruppen { display: none; padding: 6px 0 4px; }
  .htg-rahmen.htg-aufgeklappt .htg-gruppen { display: grid; }
  .htg-gruppe { flex-direction: column; align-items: flex-start; gap: 4px; }
  .htg-name { flex: none; line-height: 1.4; }
  .htg-seite h2 { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  .htg-bild img, .htg-gross { transition: none; }
  .htg-karte > button:hover .htg-bild img { transform: none; }
}

/* KORREKTUR-ANFANG Theme-Regeln überschreiben (Selina, 2026-11): alle Bilder gleich zugeschnitten, Warm Red statt Rosa */
/* Warm Red eine Stufe dunkler: weiße kleine Schrift braucht 4,5 : 1 (Selina, 04.11.2026) */
.htg, .htg-gross { --htg-rot: #b2614d; --htg-rot-dunkel: #9d5140; }

/* Karten: Bild füllt die Fläche immer ganz aus */
.htg .htg-bild img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; }
.htg .htg-homestory .htg-bild { min-height: 280px; }
.htg .htg-karte > button, .htg .htg-karte > button:focus, .htg .htg-karte > button:active { background: #2c2c31; border-color: var(--htg-linie); color: var(--htg-text); }
.htg .htg-karte > button:hover, .htg .htg-karte > button:focus-visible { background: var(--htg-rot); border-color: var(--htg-rot); color: #fff; }
.htg .htg-karte > button:hover .htg-meta, .htg .htg-karte > button:focus-visible .htg-meta,
.htg .htg-karte > button:hover .htg-auszug, .htg .htg-karte > button:focus-visible .htg-auszug,
.htg .htg-karte > button:hover .htg-weiter, .htg .htg-karte > button:focus-visible .htg-weiter { color: #fff; }

/* Filter: Warm Red mit weißer Schrift bei gewählt und beim Darüberfahren */
.htg .htg-reiter button, .htg .htg-reiter button:focus, .htg .htg-reiter button:active { background: transparent; border-color: var(--htg-linie); color: var(--htg-text); }
.htg .htg-chip, .htg .htg-chip:focus, .htg .htg-chip:active { background: var(--htg-glas); border-color: var(--htg-linie); color: var(--htg-text); }
.htg .htg-reiter button:hover, .htg .htg-reiter button:focus-visible, .htg .htg-reiter button[aria-pressed="true"],
.htg .htg-reiter button[aria-pressed="true"]:hover, .htg .htg-reiter button[aria-pressed="true"]:focus,
.htg .htg-chip:hover:not(:disabled), .htg .htg-chip:focus-visible, .htg .htg-chip[aria-pressed="true"],
.htg .htg-chip[aria-pressed="true"]:hover, .htg .htg-chip[aria-pressed="true"]:focus { background: var(--htg-rot); border-color: var(--htg-rot); color: #fff; }
.htg .htg-chip:disabled, .htg .htg-chip:disabled:hover { background: var(--htg-glas); border-color: var(--htg-linie); color: var(--htg-text); }

/* Übrige Knöpfe */
.htg .htg-zurueck, .htg .htg-zurueck:focus { background: none; border: 0; color: var(--htg-glut); }
.htg .htg-zurueck:hover { background: none; border: 0; color: #fff; }
.htg .htg-filter-auf, .htg .htg-filter-auf:focus { background: var(--htg-glas); border-color: var(--htg-linie); color: #fff; }
.htg .htg-filter-auf:hover { background: var(--htg-rot); border-color: var(--htg-rot); color: #fff; }
.htg .htg-knopf, .htg-gross .htg-knopf { background: var(--htg-rot); border: 0; color: #fff; }
.htg .htg-knopf:hover, .htg .htg-knopf:focus, .htg-gross .htg-knopf:hover, .htg-gross .htg-knopf:focus { background: var(--htg-rot-dunkel); color: #fff; }
.htg .htg-knopf-zwei, .htg .htg-knopf-zwei:focus, .htg-gross .htg-knopf-zwei, .htg-gross .htg-knopf-zwei:focus { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.6); }
.htg .htg-knopf-zwei:hover, .htg-gross .htg-knopf-zwei:hover { background: var(--htg-rot); box-shadow: none; }

/* Großansicht */
.htg-gross .htg-runde, .htg-gross .htg-runde:focus, .htg-gross .htg-runde:active { background: rgba(30,30,34,.7); border-color: rgba(255,255,255,.3); color: #fff; }
.htg-gross .htg-runde:hover { background: var(--htg-rot); border-color: var(--htg-rot); color: #fff; }
.htg-gross .htg-daumen button, .htg-gross .htg-daumen button:hover, .htg-gross .htg-daumen button:focus { background: none; border-color: transparent; }
.htg-gross .htg-daumen button:hover { opacity: 1; }
.htg-gross .htg-daumen button[aria-current="true"], .htg-gross .htg-daumen button[aria-current="true"]:hover, .htg-gross .htg-daumen button[aria-current="true"]:focus { border-color: #fff; }

@media (max-width: 767px) {
  .htg .htg-homestory .htg-bild { min-height: 0; }
}
/* KORREKTUR-ENDE */

/* HERVORHEBEN-ANFANG Art deutlicher zeigen (Selina, 06.11.2026): große Reiter, klare Etiketten */
.htg .htg-reiter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 16px; padding-bottom: 16px; }
.htg .htg-reiter button { font: 600 19px/1.2 var(--htg-kopf); min-height: 64px; padding: 12px 14px; border-radius: 14px; text-align: center; }
.htg .htg-reiter .htg-zahl { font: 400 15px var(--htg-fliess); }
.htg .htg-art { left: 14px; top: 14px; font-size: 15px; padding: 6px 14px; }
.htg .htg-art-projekt, .htg-seite .htg-art-projekt { background: var(--htg-rot); color: #fff; }
.htg .htg-art-planung, .htg-seite .htg-art-planung { background: rgba(22,22,26,.85); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.75); }
.htg .htg-art-homestory, .htg-seite .htg-art-homestory { background: #fff; color: #1d1d20; }
/* Alle Bilder im selben Format 4:3: Homestory-Karte und Großansicht */
.htg .htg-homestory { grid-column: auto; }
/* Knöpfe zentrieren ihren Inhalt senkrecht: Bild immer ganz oben an der Karte */
.htg .htg-karte > button, .htg .htg-homestory > button { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; }
.htg .htg-karte .htg-bild { flex: none; width: 100%; }
.htg .htg-karte .htg-text { flex: 1 1 auto; }
.htg .htg-homestory .htg-bild { aspect-ratio: 4 / 3; min-height: 0; }
.htg .htg-homestory .htg-text { display: block; padding: 16px 18px 18px; }
.htg .htg-homestory .htg-titel { font-size: 18px; line-height: 1.25; margin-bottom: 4px; }
.htg .htg-homestory .htg-auszug { display: none; }
.htg .htg-homestory .htg-weiter { font-size: 14px; }
.htg-gross .htg-buehne > img { width: min(100%, calc((100vh - 176px) * 4 / 3)); height: auto; max-width: none; max-height: none; aspect-ratio: 4 / 3; object-fit: cover; object-position: center; }
@media (max-width: 1024px) {
  .htg-gross.htg-gross { grid-template-rows: 58vh auto; }
  .htg-gross .htg-buehne { height: 58vh; }
  .htg-gross .htg-buehne > img { width: min(100%, calc((58vh - 140px) * 4 / 3)); }
}
@media (max-width: 767px) {
  .htg .htg-reiter { grid-template-columns: 1fr 1fr; overflow: visible; margin: 0 0 12px; padding: 0 0 12px; }
  .htg .htg-reiter button { flex: none; font-size: 16px; min-height: 54px; padding: 8px 10px; }
  .htg .htg-reiter .htg-zahl { font-size: 14px; }
}
/* HERVORHEBEN-ENDE */

/* Video in der Großansicht (Homestorys): 16:9, lädt erst nach Klick */
.htg-gross .htg-video { width: min(100%, calc((100vh - 176px) * 16 / 9)); aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #111; }
.htg-gross .htg-video[hidden] { display: none; }
.htg-gross .htg-video iframe { width: 100%; height: 100%; border: 0; display: block; }
.htg-video-start { width: 100%; height: 100%; display: grid; place-items: center; text-align: center; padding: 24px; background: #1b1b1e center / cover no-repeat; position: relative; }
.htg-video-start::before { content: ""; position: absolute; inset: 0; background: rgba(16,16,19,.7); }
.htg-video-start > div { position: relative; max-width: 460px; }
.htg-video-start p { color: #d3d0c9; font-size: 14px; line-height: 1.5; margin: 14px 0 0; }
.htg-video-start a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.htg-gross .htg-daumen .htg-daumen-video { display: grid; place-items: center; color: #fff; font-size: 22px; background: #3a3a40; }
.htg-gross .htg-daumen .htg-daumen-video:hover, .htg-gross .htg-daumen .htg-daumen-video:focus { background: var(--htg-rot, #b2614d); color: #fff; }
@media (max-width: 1024px) {
  .htg-gross .htg-video { width: min(100%, calc((58vh - 140px) * 16 / 9)); }
}