/* Gewerke: Band mit Stempeln (Startseite, Übersicht) und Seite je Gewerk (inc/gewerke.php, templates/gewerk*.php). 05.11.2026 */

/* ---------- Band ---------- */
.ha27 .gwband { background: var(--forest); color: var(--sawdust); position: relative; overflow: hidden; }
.ha27-start .gwband.section { padding-block: clamp(4rem, 8vw, 7rem); }
.ha27 .gwband__kopf { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 2rem 4rem; align-items: end; margin-bottom: clamp(2rem, 4vw, 3rem); }
.ha27 .gwband__kopf .tag { display: block; margin-bottom: 1rem; color: var(--pine); }
.ha27 .gwband__h { font-weight: 900; font-stretch: 75%; text-transform: uppercase; line-height: .9; font-size: clamp(2.5rem, 1.2rem + 5vw, 5.6rem); margin: 0; }
.ha27 .gwband__h em { font-style: normal; color: var(--spray); }
.ha27 .gwband__lead { font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem); line-height: 1.5; max-width: 36rem; opacity: .9; }
.ha27 .gwband__lead b { font-weight: 700; }
.ha27 .gwband__zahlen { display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin-top: 1.2rem; font: 12.5px var(--mono); color: var(--pine); letter-spacing: .04em; }
.ha27 .gwband__zahlen b { font: 900 1.5rem var(--display); font-stretch: 75%; color: var(--sawdust); margin-right: .35rem; }

.ha27 .gwband__stempel { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }   /* 19 Gewerke + „fehlt?“ = 4 × 5 */
@media (max-width: 1240px) { .ha27 .gwband__stempel { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) { .ha27 .gwband__stempel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; } .ha27 .gwband__kopf { grid-template-columns: minmax(0, 1fr); } }

.ha27 .gw-st { --dreh: 0deg; position: relative; display: flex; flex-direction: column; gap: .55rem; min-height: 200px; padding: 1.1rem 1.1rem 1rem;
  border: 2px solid rgba(226, 191, 140, .55); border-radius: 10px; outline: 1px solid rgba(226, 191, 140, .25); outline-offset: -8px;
  background: rgba(241, 235, 223, .03); color: var(--sawdust); text-decoration: none; overflow: hidden;
  transform: rotate(var(--dreh)); transition: transform .35s var(--ease), border-color .25s, background .25s; }
.ha27 .gw-st:nth-child(3n+1) { --dreh: -.6deg; }
.ha27 .gw-st:nth-child(3n+2) { --dreh: .5deg; }
.ha27 .gw-st:nth-child(4n) { --dreh: -.3deg; }
.ha27 .gw-st:hover, .ha27 .gw-st.is-zuletzt { transform: rotate(0) translateY(-4px); border-color: var(--spray); background: rgba(73, 174, 83, .08); outline-color: rgba(73, 174, 83, .35); }
.ha27 .gw-st:focus-visible { transform: rotate(0); outline: 3px solid var(--spray); outline-offset: 3px; }
.ha27 .gw-st__ic svg { width: 52px; height: 52px; stroke: var(--pine); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .25s; position: relative; z-index: 1; }
.ha27 .gw-st:hover .gw-st__ic svg, .ha27 .gw-st.is-zuletzt .gw-st__ic svg { stroke: var(--spray); }
.ha27 .gw-st__n { position: relative; z-index: 1; hyphens: manual; font: 900 clamp(1.1rem, 1.6vw, 1.55rem)/1.02 var(--display); font-stretch: 62%; text-transform: uppercase; letter-spacing: .01em; }
.ha27 .gw-st__k { position: relative; z-index: 1; font: 12.5px/1.45 var(--mono); color: rgba(241, 235, 223, .72); }
.ha27 .gw-st__anz { position: relative; z-index: 1; margin-top: auto; display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; font: 700 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--pine); }
.ha27 .gw-st__anz i { font-style: normal; color: var(--spray); transition: transform .3s var(--ease); }
.ha27 .gw-st:hover .gw-st__anz i { transform: translateX(4px); }
.ha27 .gw-st__ringe { position: absolute; right: -70px; bottom: -70px; width: 220px; height: 220px; z-index: 0; opacity: 0; transform: scale(.4); transition: opacity .4s, transform .8s var(--ease); pointer-events: none; }
.ha27 .gw-st__ringe ellipse { fill: none; stroke: var(--pine); stroke-width: 1; }
.ha27 .gw-st:hover .gw-st__ringe, .ha27 .gw-st.is-zuletzt .gw-st__ringe { opacity: .35; transform: scale(1); }
.ha27 .gw-st--frage { border-style: dashed; outline: none; }
.ha27 .gw-st--frage .gw-st__n { color: var(--spray); }
@media (max-width: 760px) { .ha27 .gw-st { min-height: 0; } .ha27 .gw-st__k { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .ha27 .gw-st, .ha27 .gw-st__ringe { transition: none; } }

/* Übersichtsseite: Band ist der Seiteninhalt */
.ha27-gw--alle .gwband { min-height: 60vh; }

/* ---------- Seite eines Gewerks ---------- */
.ha27-gw { background: var(--forest); color: var(--sawdust); }
.ha27-start.ha27-gw .gw-hero.section { padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem); }
.ha27 .gw-hero__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 2.5rem; align-items: center; }
.ha27 .gw-brot { font: 12.5px var(--mono); color: rgba(241, 235, 223, .6); margin-bottom: 1rem; }
.ha27 .gw-brot a { color: inherit; text-decoration: none; }
.ha27 .gw-brot a:hover { color: var(--spray); }
.ha27 .gw-hero__h { font-weight: 900; font-stretch: 75%; text-transform: uppercase; line-height: .92; font-size: clamp(2.4rem, 1rem + 4.6vw, 5rem); margin: 0; text-wrap: balance; }
.ha27 .gw-hero__h span { display: block; color: var(--spray); }
.ha27 .gw-hero__claim { font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); line-height: 1.5; margin: 1.2rem 0 1.6rem; max-width: 34rem; opacity: .88; }
.ha27 .gw-knoepfe { display: flex; flex-wrap: wrap; gap: .8rem; }
.ha27-start .gw-knoepfe .btn--ghost { color: var(--sawdust); }
.ha27 .gw-hero__bild { position: relative; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: #fff; }
.ha27 .gw-hero__bild img { width: 100%; height: 100%; object-fit: contain; padding: 6%; display: block; }
.ha27 .gw-marke { position: absolute; left: 1rem; top: 1rem; transform: rotate(-4deg); border: 2.5px solid var(--forest); outline: 1px solid var(--forest); outline-offset: -6px; background: var(--rule); color: var(--forest); border-radius: 8px; padding: .6rem .95rem; font: 900 1.05rem/1.05 var(--display); font-stretch: 75%; text-transform: uppercase; box-shadow: 0 8px 24px rgba(0, 0, 0, .3); }
.ha27 .gw-marke small { display: block; font: 700 10px var(--mono); letter-spacing: .1em; margin-bottom: .15rem; }

.ha27 .gw-fakten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.ha27 .gw-fakten div { background: var(--forest); padding: 1rem 1.1rem; }
.ha27 .gw-fakten b { display: block; font: 900 1.6rem/1 var(--display); font-stretch: 75%; }
.ha27 .gw-fakten span { font: 12px var(--mono); color: var(--pine); }

.ha27 .gw-h3 { font-weight: 900; font-stretch: 75%; text-transform: uppercase; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); line-height: 1; margin: 0 0 1.1rem; }
.ha27 .gw-h3 small { font: 400 12px var(--mono); letter-spacing: .06em; color: var(--pine); text-transform: none; margin-left: .6rem; }
.ha27-start.ha27-gw .section--tight { padding-block: clamp(2rem, 4vw, 3.5rem); }
.ha27 .gw-gruppen { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: .9rem; }
.ha27 .gw-gr { display: flex; flex-direction: column; background: var(--card); color: var(--forest); border-radius: 10px; overflow: hidden; text-decoration: none; transition: transform .3s var(--ease), box-shadow .3s; }
.ha27 .gw-gr:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0, 0, 0, .25); }
.ha27 .gw-gr__bild { display: block; aspect-ratio: 1; background: #fff; }
.ha27 .gw-gr__bild img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ha27 .gw-gr__t { display: block; padding: .65rem .8rem .8rem; }
.ha27 .gw-gr__t b { display: block; font: 800 1.02rem/1.15 var(--display); font-stretch: 85%; }
.ha27 .gw-gr__t span { font: 12px var(--mono); color: var(--walnut); }

.ha27 .gw-hinweis { display: flex; gap: 1.4rem; align-items: flex-start; padding: 1.6rem 1.8rem; border: 2px solid var(--rule); border-radius: 14px; background: rgba(241, 204, 121, .07); }
.ha27 .gw-hinweis__ic svg { width: 56px; height: 56px; stroke: var(--rule); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ha27 .gw-hinweis h2 { font: 900 clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem)/1.05 var(--display); font-stretch: 75%; text-transform: uppercase; color: var(--rule); margin: 0 0 .6rem; }
.ha27 .gw-hinweis p { font-size: clamp(1rem, .95rem + .25vw, 1.15rem); line-height: 1.55; max-width: 52rem; opacity: .92; }
.ha27 .gw-hinweis__termin { margin-top: .8rem; font-weight: 700; color: var(--sawdust); }
.ha27 .gw-hinweis__klein { margin-top: .4rem; font: 13px/1.5 var(--mono) !important; color: var(--pine); opacity: 1 !important; }
.ha27 .gw-hinweis__wege { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; align-items: center; margin-top: 1rem; font: 13px var(--mono); }
.ha27 .gw-hinweis__wege a { color: var(--spray); font-weight: 700; }
.ha27 .gw-hinweis__wege a.gw-hinweis__btn { color: var(--forest); height: 50px; font-size: 15px; }
.ha27 .gw-hinweis__wege span { color: rgba(241, 235, 223, .7); }
.ha27-start.ha27-gw .gw-hinweis-sec { padding-block: clamp(1.5rem, 3vw, 2.5rem) 0; }
@media (max-width: 640px) { .ha27 .gw-hinweis { flex-direction: column; padding: 1.3rem; } }
.ha27 .gw-wz { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: .8rem; }
.ha27 .gw-wz__k { display: flex; gap: .9rem; align-items: center; padding: .95rem 1.1rem; border: 1.5px solid var(--line); border-radius: 10px; color: var(--sawdust); text-decoration: none; transition: border-color .25s, background .25s; }
.ha27 .gw-wz__k:hover { border-color: var(--spray); background: rgba(73, 174, 83, .07); }
.ha27 .gw-wz__k svg { flex: none; width: 36px; height: 36px; stroke: var(--spray); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ha27 .gw-wz__k span { flex: 1; min-width: 0; }
.ha27 .gw-wz__k b { display: block; font: 800 1.05rem/1.2 var(--display); font-stretch: 85%; }
.ha27 .gw-wz__k small { font: 12.5px var(--mono); color: rgba(241, 235, 223, .72); }
.ha27 .gw-wz__k i { font-style: normal; color: var(--spray); }

.ha27 .gw-antrag { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem; align-items: center; padding: 1.6rem 1.8rem; border-radius: 14px; background: var(--green); }
.ha27 .gw-antrag h2 { font: 900 clamp(1.6rem, 1.2rem + 1.2vw, 2rem)/1 var(--display); font-stretch: 75%; text-transform: uppercase; margin: 0 0 .4rem; }
.ha27 .gw-antrag p { font: 13.5px/1.5 var(--mono); opacity: .9; }
.ha27 .gw-chip { display: inline-block; margin-top: .7rem; padding: .3rem .75rem; border-radius: 999px; background: rgba(241, 235, 223, .15); font: 700 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.ha27 .gw-antrag__btn { background: var(--sawdust); color: var(--forest); }
.ha27 .gw-antrag__btn:hover { background: #fff; }
.ha27 .gw-andere { margin-top: 1.4rem; font: 13px var(--mono); }
.ha27 .gw-andere a { color: var(--pine); }

@media (max-width: 900px) {
  .ha27 .gw-hero__grid, .ha27 .gw-antrag { grid-template-columns: minmax(0, 1fr); }
  .ha27 .gw-fakten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ha27 .gw-h3 small { display: block; margin: .4rem 0 0; }
}

/* Ausschreibungstexte (Architekten, 05.11.2026) */
.ha27 .gw-dok { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.ha27 .gw-dok__k { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; border: 2px solid var(--rule); border-radius: 12px; color: inherit; text-decoration: none; transition: background .15s; }
.ha27 .gw-dok__k:hover, .ha27 .gw-dok__k:focus-visible { background: rgba(241, 204, 121, .1); }
.ha27 .gw-dok__ic { flex: none; display: grid; place-items: center; width: 52px; height: 64px; border: 2px solid var(--rule); border-radius: 4px 14px 4px 4px; font: 700 13px/1 var(--mono); letter-spacing: .06em; color: var(--rule); }
.ha27 .gw-dok__k b { display: block; font-size: 1.1rem; }
.ha27 .gw-dok__k small { display: block; margin-top: .25rem; opacity: .8; line-height: 1.45; }
.ha27 .gw-dok__k i { margin-left: auto; font-style: normal; font-size: 1.4rem; color: var(--rule); }
.ha27 .gw-dok__note { margin-top: .8rem; opacity: .8; }

/* LV-Texte zum Kopieren (05.11.2026) */
.ha27 .gw-lv { margin-top: 1.4rem; border: 2px solid var(--rule); border-radius: 14px; overflow: hidden; }
.ha27 .gw-lv__kopf { display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; padding: 1.2rem 1.4rem; background: rgba(241, 204, 121, .08); }
.ha27 .gw-lv__kopf h3 { margin: 0 0 .3rem; font: 900 1.4rem/1.1 var(--display); font-stretch: 80%; text-transform: uppercase; color: var(--rule); }
.ha27 .gw-lv__kopf h3 small { display: block; margin-top: .3rem; font-family: inherit; font-size: 14px; font-weight: 400; font-stretch: 100%; line-height: 1.4; letter-spacing: 0; text-transform: none; color: var(--sawdust); opacity: .85; }
.ha27 .gw-lv__kopf p { margin: 0; max-width: 46rem; opacity: .85; }
.ha27 .gw-lv__btn { min-height: 40px; padding: .4rem 1rem; border: 2px solid var(--rule); border-radius: 999px; background: transparent; color: var(--rule); font-weight: 700; cursor: pointer; white-space: nowrap; }
.ha27 .gw-lv__btn:hover, .ha27 .gw-lv__btn:focus-visible { background: var(--rule); color: var(--forest); }
.ha27 .gw-lv__btn.is-ok { background: var(--spray); border-color: var(--spray); color: var(--forest); }
.ha27 .gw-lv__btn--alle { background: var(--rule); color: var(--forest); }
.ha27 .gw-lv__btn--klein { min-height: 36px; padding: .3rem .8rem; font-size: 14px; }
.ha27 .gw-lv__abs { border-top: 1px solid rgba(241, 204, 121, .25); }
.ha27 .gw-lv__abs > summary { display: flex; align-items: center; gap: .8rem; padding: .9rem 1.4rem; cursor: pointer; list-style: none; }
.ha27 .gw-lv__abs > summary::-webkit-details-marker { display: none; }
.ha27 .gw-lv__abs > summary::after { content: "+"; margin-left: auto; font-size: 1.4rem; color: var(--rule); }
.ha27 .gw-lv__abs[open] > summary::after { content: "–"; }
.ha27 .gw-lv__abs > summary b { font-size: 1.05rem; }
.ha27 .gw-lv__abs > summary small { opacity: .7; }
.ha27 .gw-lv__nr, .ha27 .gw-lv__oz { font: 700 13px/1 var(--mono); letter-spacing: .04em; color: var(--rule); }
.ha27 .gw-lv__inhalt { padding: 0 1.4rem 1.2rem; display: grid; gap: .7rem; }
.ha27 .gw-lv__absleiste { display: flex; justify-content: flex-end; }
.ha27 .gw-lv__gruppe { margin: .6rem 0 0; font: 700 13px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--sawdust); }
.ha27 .gw-lv__pos { padding: .9rem 1rem; border-radius: 10px; background: rgba(241, 235, 223, .06); }
.ha27 .gw-lv__pos--text { display: flex; gap: 1rem; align-items: flex-start; }
.ha27 .gw-lv__pos--text .gw-lv__t { flex: 1; min-width: 0; }
.ha27 .gw-lv__pk { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-bottom: .5rem; }
.ha27 .gw-lv__pk b { flex: 1 1 16rem; min-width: 0; }
.ha27 .gw-lv__eh { font: 700 13px/1 var(--mono); opacity: .8; }
.ha27 .gw-lv__t { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.55; opacity: .9; user-select: text; }
.ha27 .gw-lv__live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 640px) { .ha27 .gw-lv__kopf, .ha27 .gw-lv__abs > summary, .ha27 .gw-lv__inhalt { padding-left: 1rem; padding-right: 1rem; } .ha27 .gw-lv__pos--text { flex-direction: column; } }