/* MEISTERHILFE – Betriebs-Konfigurator (öffentlich) – Developed by Toni Sciacca - mail@tonisciacca.com
   Farbwelt: Weiß, Schwarz (Tinte), Gelb – keine Gewerksfarben. */
.kf-body { background: var(--flaeche); }
.kf-main { padding: calc(var(--kopf) + 36px) 28px 70px; max-width: 980px; }
.kf-kopf { text-align: center; margin: 0 auto 26px; max-width: 760px; }
.kf-ueber { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gelb-d); margin-bottom: 10px; }
.kf-kopf h1 { font-size: clamp(1.7rem, 4.2vw, 2.6rem); line-height: 1.12; letter-spacing: -.02em; color: var(--tinte); font-weight: 800; }
.kf-lead { margin-top: 14px; font-size: 1.02rem; color: var(--text); }
/* Schrittleiste als Pfeil-Segmente (wie die Status-Pipeline der Projektakte) */
.kf-pipe { display: flex; gap: 4px; margin: 26px auto 0; max-width: 760px; }
.kf-seg { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 22px 11px 26px; background: #fff; color: var(--leise); font-size: .88rem; font-weight: 600; white-space: nowrap;
          clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%); }
.kf-seg:first-child { clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); padding-left: 18px; }
.kf-seg span { width: 22px; height: 22px; border-radius: 50%; background: var(--flaeche); display: inline-flex; align-items: center; justify-content: center; font-size: .76rem; flex: none; }
.kf-seg.cur { background: var(--tinte); color: #fff; }
.kf-seg.cur span { background: #fff; color: var(--tinte); }
.kf-seg.done { background: var(--gelb); color: var(--tinte); cursor: pointer; }
.kf-seg.done span { background: var(--tinte); color: var(--gelb); }
.kf-seg.done:hover { background: var(--gelb-d); }
.kf-karte { background: #fff; border-radius: var(--rund); padding: 30px 32px; box-shadow: var(--schatten); }
.kf-karte h2 { font-size: 1.2rem; font-weight: 700; color: var(--tinte); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.kf-karte h2 small { font-size: .88rem; font-weight: 400; color: var(--leise); }
.kf-klein-links { margin-top: 18px; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--leise); }

/* Gewerksuche: alle Gewerke der Handwerksordnung */
.kf-suche { position: relative; margin-top: 16px; }
.kf-suche > svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--tinte); pointer-events: none; }
.kf-such-feld { width: 100%; padding: 14px 16px 14px 46px; border-radius: 999px; border: 0; background: var(--flaeche); color: var(--tinte); font: inherit; font-size: 1rem; box-shadow: inset 0 0 0 1px transparent; outline: 0; }
.kf-such-feld:focus { background: #fff; box-shadow: inset 0 0 0 2px var(--tinte); }
.kf-such-liste { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 8px); background: #fff; border-radius: 18px; box-shadow: 0 18px 40px -18px rgba(15, 23, 42, .45), inset 0 0 0 1px var(--linie); max-height: 320px; overflow: auto; padding: 6px; }
.kf-such-liste button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; border: 0; background: transparent; border-radius: 12px; color: var(--tinte); font: inherit; font-size: .95rem; }
.kf-such-liste button svg { color: var(--tinte); flex: none; }
.kf-such-liste button small { margin-left: auto; color: var(--leise); font-size: .76rem; white-space: nowrap; }
.kf-such-liste button:hover, .kf-such-liste button.aktiv { background: var(--gelb); }
.kf-such-liste .leer { padding: 12px; color: var(--leise); font-size: .9rem; }
.kf-gewaehlt:empty { display: none; }
.kf-gewaehlt { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.kf-gewaehlt .kf-chip { background: var(--tinte); color: #fff; padding-right: 8px; }
.kf-gewaehlt .kf-chip svg { color: var(--gelb); }
.kf-gewaehlt .kf-chip i { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .14); align-items: center; justify-content: center; font-style: normal; margin-left: 4px; }
.kf-gewaehlt .kf-chip i:hover { background: var(--gelb); color: var(--tinte); }

.kf-gewerke, .kf-groessen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.kf-groessen { margin-top: 16px; }
.kf-chip { display: inline-flex; align-items: center; gap: 9px; height: 44px; box-sizing: border-box; padding: 0 16px; border-radius: 999px; border: 1px solid #e3e5e8; background: #fff; color: var(--tinte); font-weight: 600; font-size: .95rem; box-shadow: none; transition: border-color .15s, background .15s; }
.kf-chip svg { color: var(--tinte); }
.kf-chip:hover { border-color: #c9cdd3; background: var(--flaeche); }
.kf-chip.an { background: var(--tinte); color: #fff; border-color: #e3e5e8; }
.kf-chip.an svg { color: var(--gelb); }
.kf-fuss { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.kf-fuss > :only-child { margin-left: auto; }
.kf-hinweis { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; font-size: .86rem; color: var(--leise); }

/* Schritt 2: Positionen mit Zähler */
.kf-positionen { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; margin-top: 18px; }
.kf-pos { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: var(--flaeche); }
.kf-pos.aus { opacity: .55; }
.kf-pos .nm { flex: 1; min-width: 0; }
.kf-pos .nm b { display: block; font-size: .95rem; color: var(--tinte); }
.kf-pos .nm small { display: block; font-size: .78rem; color: var(--leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kf-zaehler { display: inline-flex; align-items: center; gap: 2px; background: #fff; border-radius: 999px; padding: 3px; border: 1px solid #e3e5e8; }
.kf-zaehler button { width: 32px; height: 32px; border-radius: 50%; border: 1px solid transparent; background: transparent; display: inline-flex; align-items: center; justify-content: center; color: var(--tinte); }
.kf-zaehler button:hover { background: var(--flaeche); border-color: #e3e5e8; }
.kf-zaehler output { min-width: 26px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Schritt 3: Ergebnis als Akkordeon je Position, Aufgaben mit Plus/Minus */
.kf-zahl { text-align: center; padding: 6px 0 18px; }
.kf-zahl b { display: block; font-size: clamp(1.4rem, 3.4vw, 2rem); color: var(--tinte); letter-spacing: -.02em; }
.kf-zahl span { display: block; margin-top: 6px; color: var(--leise); font-size: .95rem; }
.kf-kennzahlen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 18px auto 0; max-width: 640px; }
.kf-kennzahlen > div { border-radius: 16px; background: var(--flaeche); padding: 12px 8px; }
.kf-kennzahlen > div b { display: block; font-size: 1.5rem; line-height: 1.1; color: var(--tinte); letter-spacing: -.02em; }
.kf-kennzahlen > div span { display: block; margin-top: 3px; font-size: .76rem; color: var(--leise); }
.kf-kennzahlen > div.gelb { background: var(--gelb); }
.kf-kennzahlen > div.gelb span { color: var(--tinte); }
.kf-kennzahlen > div.leise { background: #fff; box-shadow: inset 0 0 0 1px var(--linie); }
.kf-start--oben { margin: 0 0 22px; }
.kf-erklaer { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 14px; font-size: .9rem; color: var(--text); }
.kf-erklaer svg { flex: none; margin-top: 2px; color: var(--tinte); }
.kf-akkordeon { display: flex; flex-direction: column; gap: 10px; }
.kf-ak { border-radius: 20px; background: var(--flaeche); overflow: hidden; }
.kf-ak-kopf { display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px 18px; border: 0; background: transparent; text-align: left; font: inherit; color: var(--tinte); cursor: pointer; }
.kf-ak-kopf .nr { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--tinte); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .9rem; }
.kf-ak-kopf .tx { flex: 1; min-width: 0; }
.kf-ak-kopf .tx b { display: block; font-size: 1rem; }
.kf-ak-kopf .tx small { display: block; font-size: .8rem; color: var(--leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kf-ak-kopf .md { flex: none; font-size: .8rem; font-weight: 700; background: var(--gelb); color: var(--tinte); border-radius: 999px; padding: 4px 11px; white-space: nowrap; }
.kf-ak-kopf .pf { flex: none; color: var(--tinte); transition: transform .2s; }
.kf-ak.offen .kf-ak-kopf .pf { transform: rotate(180deg); }
.kf-ak-inhalt { display: none; padding: 0 18px 16px; }
.kf-ak.offen .kf-ak-inhalt { display: block; }
.kf-ak-spalten { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; }
.kf-ak-spalten > div { min-width: 0; }
.kf-ak-spalten h4 { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--leise); margin-bottom: 8px; }
.kf-aufg { display: flex; flex-direction: column; gap: 6px; }
.kf-aufg button { display: flex; align-items: center; gap: 10px; width: 100%; height: 44px; box-sizing: border-box; padding: 0 10px 0 8px; border: 1px solid #e3e5e8; border-radius: 999px; background: #fff; text-align: left; font: inherit; font-size: .9rem; font-weight: 600; color: var(--tinte); box-shadow: none; cursor: pointer; }
.kf-aufg button .pm { flex: none; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--tinte); color: #fff; }
.kf-aufg button .pm svg { width: 14px; height: 14px; }
.kf-aufg button.aus { color: var(--leise); font-weight: 500; border-color: transparent; background: transparent; }
.kf-aufg button.aus .pm { background: #fff; color: var(--tinte); box-shadow: inset 0 0 0 1px var(--linie); }
.kf-aufg button:hover .pm { background: var(--gelb); color: var(--tinte); }
.kf-aufg button .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.kf-aufg button .tx > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.15; }
.kf-aufg button small { font-size: .74rem; line-height: 1.15; color: var(--leise); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kf-aufg .gr { margin-top: 6px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--leise); }
.kf-aufg .gr:first-child { margin-top: 0; }
.kf-mods { display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; }
.kf-mods li { list-style: none; background: #fff; border-radius: 999px; padding: 5px 11px; font-size: .82rem; font-weight: 600; color: var(--tinte); box-shadow: inset 0 0 0 1px var(--linie); }
.kf-mods li.neu { background: var(--gelb); box-shadow: none; }
.kf-mods .leer { font-size: .84rem; color: var(--leise); }
.kf-ak-fuss { margin-top: 12px; display: flex; justify-content: flex-end; }
.kf-rest { margin-top: 14px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--linie); padding: 0 16px; }
.kf-rest summary { padding: 13px 0; font-size: .9rem; font-weight: 600; color: var(--tinte); cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
.kf-rest summary::-webkit-details-marker { display: none; }
.kf-rest summary::after { content: ''; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--tinte); border-bottom: 2px solid var(--tinte); transform: rotate(45deg); transition: transform .2s; }
.kf-rest[open] summary::after { transform: rotate(-135deg); }
.kf-rest-liste { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 14px; }
.kf-rest-liste span { background: var(--flaeche); border-radius: 999px; padding: 5px 11px; font-size: .82rem; color: var(--leise); }
.kf-start { margin-top: 28px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.kf-start .lp-knopf { width: min(100%, 520px); white-space: normal; text-align: center; line-height: 1.3; }
.kf-versprechen { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin-bottom: 6px; font-size: .86rem; color: var(--text); }
.kf-versprechen span { display: inline-flex; align-items: center; gap: 6px; }
.kf-versprechen svg { color: var(--tinte); }
.kf-leise { background: none; border: 0; color: var(--leise); font-size: .86rem; display: inline-flex; align-items: center; gap: 6px; }
.kf-leise:hover { color: var(--tinte); }
.lp-fuss-unten a { color: inherit; }
@media (max-width: 720px) { .kf-ak-spalten { grid-template-columns: minmax(0, 1fr); } .kf-kennzahlen { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .kf-main { padding: calc(var(--kopf) + 22px) 16px 50px; } .kf-seg { padding: 10px 14px 10px 18px; font-size: .78rem; gap: 6px; } .kf-seg:first-child { padding-left: 12px; } .kf-seg:not(.cur) { flex: 0 1 auto; } .kf-seg:not(.cur) > :last-child { display: none; } .kf-karte { padding: 22px 18px; border-radius: 22px; } .kf-fuss .lp-knopf { width: 100%; } .kf-ak-kopf { padding: 14px; gap: 10px; flex-wrap: wrap; } .kf-ak-kopf .tx { flex-basis: calc(100% - 46px); } .kf-ak-kopf .md { margin-left: 46px; font-size: .74rem; padding: 3px 8px; } .kf-ak-kopf .pf { margin-left: auto; } .kf-ak-inhalt { padding: 0 14px 14px; } }