/* Kundenbereich: die Bausteine des Portals in den Farben des Neubaus. */
.portal { padding: 3rem 0 4rem; }
.portal .muted { color: var(--txt2); margin: 0 0 1.25rem; max-width: 62ch; }
.portal .fhint { font-size: 0.9rem; color: var(--txt2); margin: 0.9rem 0 0; }
.portal .link { font: inherit; color: var(--petrol); text-decoration: underline; text-underline-offset: 0.2em; background: none; border: 0; padding: 0; cursor: pointer; }
.portal .kicker { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--petrol); }
.portal__karte { max-width: 34rem; padding: 2rem; background: var(--weiss); box-shadow: 0 0 0 1px var(--nebel); }
.portal__karte .d3 { margin: 0 0 0.6rem; }
.portal .formular { margin-top: 1.25rem; }
.portal .input, .portal .textarea { font: inherit; width: 100%; padding: 0.85rem 1rem; border: 1px solid var(--nebel); border-radius: 0; background: var(--weiss); color: var(--tinte); }
.portal .input:focus, .portal .textarea:focus { outline: 2px solid var(--petrol); outline-offset: 2px; }
.portal .input--code { font-size: 1.5rem; letter-spacing: 0.4em; font-weight: 700; }
.portal .ferr { display: none; color: #8e3927; font-weight: 600; margin-top: 0.5rem; }
.portal__knoepfe { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.25rem 0 0; }
.portal form[data-state="sending"] .send { opacity: 0.55; pointer-events: none; }
.portal__kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1.4rem; margin-bottom: 2rem; border-bottom: 1px solid var(--nebel); }
.portal__kopf b { display: block; font-size: 1.05rem; color: var(--tinte); }
.portal__block { padding: 2rem 0; border-top: 1px solid var(--nebel); }
.portal__block > .d3 { margin: 0 0 0.6rem; }
.portal__akte { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.portal__akte .d3 { margin: 0 0 0.25rem; }
.portal__h { font-size: 1.05rem; font-weight: 800; margin: 2rem 0 0.6rem; padding-top: 1.4rem; border-top: 1px solid var(--nebel); }
.pille { flex: none; padding: 0.4rem 1rem; background: rgba(24, 77, 85, 0.1); color: var(--petrol); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.02em; }
.pille[data-art="warten"] { background: rgba(168, 69, 47, 0.12); color: #8e3927; }
.strecke { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 0.2rem; }
@media (min-width: 760px) { .strecke { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 1rem; } }
.strecke__st { display: grid; gap: 0.2rem; padding: 1rem 0 0; border-top: 3px solid var(--nebel); }
.strecke__st b { font-weight: 700; font-size: 0.95rem; color: var(--txt2); }
.strecke__st span { font-size: 0.86rem; line-height: 1.5; color: var(--txt2); }
.strecke__st[data-zustand="fertig"] { border-top-color: var(--petrol); }
.strecke__st[data-zustand="fertig"] b { color: var(--tinte); }
.strecke__st[data-zustand="jetzt"] { border-top-color: var(--gold); }
.strecke__st[data-zustand="jetzt"] b { color: var(--tinte); }
.tliste { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 0.2rem; }
.tzeile { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 1rem; padding: 0.9rem 0; border-top: 1px solid var(--nebel); }
.tzeile b { font-weight: 700; color: var(--tinte); }
.tzeile__b { color: var(--tinte); }
.tzeile__k { flex-basis: 100%; font-size: 0.88rem; color: var(--txt2); }
.tzeile__tun { display: flex; gap: 1rem; flex-basis: 100%; margin-top: 0.2rem; }
.tzeile__um { display: flex; flex-wrap: wrap; gap: 0.6rem; flex-basis: 100%; margin-top: 0.7rem; }
.tzeile__um .input { width: auto; min-width: 9rem; }
.tzeile[data-erledigt] { opacity: 0.55; }
.tzeile[data-erledigt] .tzeile__tun { display: none; }
.tierform { display: grid; gap: 1rem; margin-top: 1.2rem; }
.tierform .field { display: grid; gap: 0.4rem; }
.tierform .field > label { font-weight: 700; font-size: 0.93rem; }
@media (min-width: 760px) {
  .tierform { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tierform > .field--breit, .tierform > .tierform__fuss { grid-column: 1 / -1; }
}
.tierform__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.2rem; margin: 0.4rem 0 0; }
.anleitung { margin-top: 1.5rem; padding: 1.5rem; background: rgba(201, 169, 110, 0.12); }
.anleitung > .portal__h { margin-top: 0; padding-top: 0; border-top: 0; }
.anleitung__liste { margin: 0.8rem 0 0; padding-left: 1.2rem; display: grid; gap: 0.5rem; }
.dateien { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.55rem; }
.datei { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.85rem; padding: 0.7rem 0.8rem; box-shadow: 0 0 0 1px var(--nebel); background: var(--weiss); }
.datei[data-zustand="fehler"] { box-shadow: 0 0 0 1px #a8452f; }
.datei__bild { display: grid; place-items: center; overflow: hidden; width: 3rem; height: 3rem; background: var(--sand, #f1ede4); font-size: 0.78rem; font-weight: 700; color: var(--txt2); }
.datei__bild img { width: 100%; height: 100%; object-fit: cover; }
.datei__text { display: grid; gap: 0.1rem; min-width: 0; }
.datei__text b, .datei__text a { font-weight: 600; font-size: 0.95rem; color: var(--tinte); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.datei__info { font-size: 0.82rem; color: var(--txt2); }
.datei[data-zustand="fehler"] .datei__info { color: #a8452f; font-weight: 600; }
.datei__balken { grid-column: 1 / -1; height: 3px; background: var(--nebel); overflow: hidden; }
.datei__balken i { display: block; height: 100%; background: var(--petrol); transition: width 180ms linear; }
.ablage { display: grid; place-items: center; gap: 0.35rem; margin-top: 1rem; padding: clamp(1.6rem, 4vw, 2.6rem) 1.2rem; border: 2px dashed var(--nebel); background: var(--weiss); cursor: pointer; text-align: center; }
.ablage[data-ueber="true"], .ablage:hover { border-color: var(--petrol); }
.ablage:focus-visible { outline: 2px solid var(--petrol); outline-offset: 3px; }
.ablage__pfeil { font-size: 1.6rem; color: var(--petrol); }
.ablage b { font-weight: 700; }
.ablage span { font-size: 0.9rem; color: var(--txt2); }

/* Aufnahmebogen */
.bogen fieldset { border: 0; padding: 0; margin: 0 0 2rem; }
.bogen legend { font-weight: 800; font-size: 1.1rem; margin: 0 0 1rem; padding: 0; }
.bogen .wahl { margin-bottom: 1rem; }
.bogen__frage { font-weight: 700; font-size: 0.93rem; margin: 0.5rem 0 0.4rem; }
.bogen .ablage { margin-top: 0; }
.bogen .dateien { margin-top: 0.75rem; }
.bogen .datei { grid-template-columns: auto minmax(0, 1fr) auto; }
.datei__weg { font: inherit; width: 2rem; height: 2rem; border: 0; background: transparent; color: var(--txt2); cursor: pointer; }
.datei__weg:hover { color: var(--tinte); }
.tw .kap__text--voll { max-width: none; }
.karten--voll { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.karten--voll .karte { background: var(--weiss); box-shadow: 0 0 0 1px var(--nebel); padding: 1.5rem; }
.karten--voll .karte h3 { margin: 0 0 0.5rem; font-size: 1.05rem; }
.karten--voll .karte p { margin: 0; }
.tw .hero__act { margin-top: 2rem; }

/* Die Anschrift wird erst zur Pflicht, wenn jemand das Abdruck-Kit will.
   Ohne sichtbare Markierung merkt das niemand und wundert sich über die
   Fehlermeldung beim Absenden. */
.bogen .feld--pflicht span { color: var(--tinte); }
.bogen .feld--pflicht span::after { content: " *"; color: var(--petrol); font-weight: 700; }
.bogen .feld--pflicht input { border-color: var(--petrol); }
.bogen [data-termin-block] { margin: 0.9rem 0 1.1rem; padding-left: 0.9rem; border-left: 2px solid var(--nebel); }