/* ==========================================================================
   Baudorf — Innenseiten (Liste, Detail, Kontakt, Legal, Auth)
   Setzt das Startseiten-Designsystem (home.css) auf den übrigen Seiten fort.
   ========================================================================== */

main { padding-top: 84px; }
.hx-hero { margin-top: -84px; }

/* Page head (heller Banner unter der Nav) */
.hx-pagehead { background: var(--band); padding: clamp(56px,7vw,84px) 0; position: relative; overflow: hidden; }
.hx-pagehead__emblem { position: absolute; right: -2%; top: 50%; transform: translateY(-50%); width: min(420px,40vw); opacity: .06; pointer-events: none; }
.hx-pagehead .hx-wrap { position: relative; z-index: 1; }
.hx-pagehead h1 { margin: 0; font: 400 clamp(44px,7vw,86px)/1 var(--font); letter-spacing: -.025em; color: var(--ink); }
.hx-pagehead p { margin: 24px 0 0; max-width: 560px; font: 300 clamp(16px,1.2vw,18px)/1.7 var(--font); color: rgba(24,22,20,.72); }

/* Filterleiste */
.hx-filter { margin: 34px 0 0; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: clamp(20px,2.4vw,30px); display: flex; flex-wrap: wrap; gap: 20px 44px; justify-content: space-between; align-items: center; box-shadow: 0 18px 44px -32px rgba(24,22,20,.4); }
.hx-filter__fields { display: flex; flex-direction: column; gap: 16px; flex: 1; min-width: 280px; }
.hx-filter__rowf { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hx-filter__lbl { font: 600 10px/1 var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--accent-dk); width: 74px; flex: 0 0 auto; }
.hx-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; background: var(--bg); border-radius: 999px; padding: 5px; }
.hx-chip { font: 500 12px/1 var(--font); color: var(--muted); background: transparent; border: 0; border-radius: 999px; padding: 10px 18px; cursor: pointer; transition: .3s; white-space: nowrap; text-decoration: none; }
.hx-chip:hover { background: var(--surface); color: var(--ink); }
.hx-chip.is-on { font-weight: 600; color: var(--on-accent); background: var(--bd-gold); box-shadow: 0 4px 12px -4px rgba(24,22,20,.35); }
.hx-filter__count { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.hx-filter__count b { font: 400 34px/1 var(--font); color: var(--bd-gold); }
.hx-filter__count span { font: 400 13px/1.4 var(--font); color: var(--muted); }

/* Listen-Grid (Karten) */
.hx-list { display: grid; grid-template-columns: repeat(3,1fr); gap: 34px; padding: 46px 0 clamp(70px,9vw,110px); }
.hx-lcard { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; transition: .5s var(--ease); }
.hx-lcard:hover { transform: translateY(-6px); border-color: var(--accent-dk); box-shadow: 0 24px 50px -28px rgba(24,22,20,.4); }
.hx-lcard__media { position: relative; aspect-ratio: 1; overflow: hidden; display: block; background: var(--band); }
.hx-lcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hx-lcard__ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(150deg,var(--band),var(--line)); }
.hx-lcard__ph img { width: 32%; opacity: .5; }
.hx-lcard.is-locked .hx-lcard__media img { filter: blur(7px); }
.hx-lcard__badge { position: absolute; top: 14px; left: 14px; z-index: 2; color: #fff; font: 600 10px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; padding: 8px 13px; }
.hx-lcard__art { position: absolute; top: 14px; right: 14px; z-index: 2; background: rgba(253,252,250,.92); color: var(--muted); font: 500 10px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; padding: 8px 12px; }
.hx-lcard__body { padding: 24px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.hx-lcard__ort { font: 500 11px/1 var(--font); letter-spacing: .18em; text-transform: uppercase; color: var(--accent-dk); }
.hx-lcard__name { margin: 13px 0 18px; font: 500 25px/1.12 var(--font); color: var(--ink); }
.hx-lcard__name a { color: inherit; }
.hx-lcard__name a:hover { color: var(--accent-dk); }
.hx-lcard__specs { display: flex; gap: 16px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.hx-lcard__specs span { font: 300 13px/1.4 var(--font); color: #8a847d; }
.hx-lcard__specs b { color: var(--ink); font-weight: 400; }
.hx-lcard__foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.hx-lcard__foot small { font: 500 10px/1 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-dk); display: block; margin-bottom: 6px; }
.hx-lcard__faktor b { font: 400 24px/1 var(--font); color: var(--bd-gold); }
.hx-lcard__preis { text-align: right; }
.hx-lcard__preis b { font: 400 21px/1 var(--font); color: var(--ink); }
.hx-lcard__lock { font: 600 10px/1.3 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--on-accent); background: var(--bd-gold); padding: 11px 15px; }
.hx-empty { padding: 70px 0; text-align: center; color: var(--muted); }
.hx-pager { display: flex; align-items: center; justify-content: center; gap: 24px; padding-bottom: clamp(60px,8vw,100px); }
.hx-pager a { color: var(--accent-dk); font: 600 12px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; }
.hx-pager span { color: var(--muted); font-size: 13px; }

/* Detail */
.hx-back { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-dk); transition: .3s; }
.hx-back:hover { color: var(--ink); }
.hx-dtop { padding-top: 30px; }
.hx-dgallery { aspect-ratio: 16/9; width: 100%; background: var(--band); overflow: hidden; border-radius: 12px; position: relative; margin-top: 26px; }
.hx-dgallery > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hx-dgallery.is-locked > img { filter: blur(16px); }
.hx-dgallery__ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.hx-dgallery__ph img { width: 22%; opacity: .5; }
.hx-dgallery__badge { position: absolute; top: 20px; left: 20px; z-index: 2; color: #fff; font: 600 11px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; padding: 10px 16px; }
.hx-dgallery__lock { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #fff; background: rgba(18,16,14,.4); z-index: 2; }
/* Galerie: Vollansicht-Button (frosted, oben rechts) */
.hx-dgallery__expand { position: absolute; top: 18px; right: 18px; z-index: 3; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #FDFCFA; background: rgba(12,12,12,.36); border: 1px solid rgba(245,242,236,.28); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); cursor: pointer; transition: .3s var(--ease); }
.hx-dgallery__expand:hover { background: rgba(12,12,12,.6); border-color: rgba(245,242,236,.5); transform: scale(1.06); }

/* Frosted Thumbnail-Leiste — steigt bei Hover von unten herein */
.hx-dgallery__strip { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; gap: 10px; padding: 14px 16px; overflow-x: auto; background: linear-gradient(180deg, rgba(12,12,12,.28), rgba(12,12,12,.62)); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border-top: 1px solid rgba(245,242,236,.16); transform: translateY(100%); transition: transform .5s var(--ease); scrollbar-width: thin; scrollbar-color: rgba(245,242,236,.4) transparent; }
.hx-dgallery:hover .hx-dgallery__strip { transform: translateY(0); }
.hx-dgallery__strip::-webkit-scrollbar { height: 6px; }
.hx-dgallery__strip::-webkit-scrollbar-thumb { background: rgba(245,242,236,.35); border-radius: 999px; }
.hx-dgallery__thumb { flex: 0 0 auto; width: 94px; height: 62px; border-radius: 6px; overflow: hidden; border: 1.5px solid transparent; padding: 0; cursor: pointer; background: none; opacity: .68; transition: opacity .3s, border-color .3s; }
.hx-dgallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hx-dgallery__thumb:hover { opacity: 1; }
.hx-dgallery__thumb.is-active { opacity: 1; border-color: var(--bd-gold); }

/* Punkte — sichtbar wenn nicht gehovert (Hinweis: es gibt mehr Bilder) */
.hx-dgallery__dots { position: absolute; left: 0; right: 0; bottom: 16px; z-index: 1; display: flex; gap: 8px; justify-content: center; transition: opacity .35s var(--ease); }
.hx-dgallery:hover .hx-dgallery__dots { opacity: 0; }
.hx-dgallery__dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(245,242,236,.6); box-shadow: 0 1px 5px rgba(0,0,0,.45); cursor: pointer; transition: .35s var(--ease); padding: 0; border: 0; }
.hx-dgallery__dot.is-on { width: 22px; border-radius: 999px; background: var(--bd-gold); }

/* Lightbox — Vollbild-Galerie mit Navigation */
.hx-lightbox { position: fixed; inset: 0; z-index: 120; background: rgba(12,12,12,.94); display: none; align-items: center; justify-content: center; padding: 2rem; }
.hx-lightbox.is-open { display: flex; }
.hx-lightbox img { max-width: 90vw; max-height: 86vh; object-fit: contain; border-radius: 6px; box-shadow: 0 40px 90px -30px rgba(0,0,0,.7); }
.hx-lightbox__close { position: absolute; top: 1.4rem; right: 1.8rem; background: none; border: 0; color: #fff; font-size: 2.4rem; line-height: 1; cursor: pointer; opacity: .8; transition: .25s; }
.hx-lightbox__close:hover { opacity: 1; }
.hx-lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; line-height: 1; color: #FDFCFA; background: rgba(245,242,236,.1); border: 1px solid rgba(245,242,236,.26); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); cursor: pointer; transition: .3s var(--ease); }
.hx-lightbox__nav:hover { background: rgba(245,242,236,.2); border-color: rgba(245,242,236,.5); }
.hx-lightbox__nav--prev { left: clamp(12px,3vw,40px); }
.hx-lightbox__nav--next { right: clamp(12px,3vw,40px); }
.hx-lightbox__count { position: absolute; bottom: 1.6rem; left: 50%; transform: translateX(-50%); color: rgba(245,242,236,.82); font: 500 13px/1 var(--font); letter-spacing: .12em; }
.hx-dbody { display: flex; gap: clamp(36px,5vw,72px); align-items: flex-start; padding: clamp(40px,5vw,64px) 0 clamp(70px,9vw,110px); }
.hx-dmain { flex: 1; min-width: 0; }
.hx-dmain__art { font: 500 12px/1 var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--accent-dk); }
.hx-dmain h1 { margin: 18px 0 0; font: 400 clamp(34px,5vw,60px)/1.04 var(--font); letter-spacing: -.02em; color: var(--ink); }
.hx-dmain__lead { margin: 30px 0 0; max-width: 680px; font: 300 clamp(16px,1.2vw,18px)/1.8 var(--font); color: var(--muted); white-space: pre-line; }
.hx-dmain h2 { margin: 48px 0 0; font: 600 12px/1 var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
.hx-kuenye { margin-top: 22px; border-top: 1px solid var(--line2); display: grid; grid-template-columns: 1fr 1fr; gap: 0 50px; }
.hx-kuenye > div { display: flex; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid var(--line2); }
.hx-kuenye dt { font: 300 14px/1.4 var(--font); color: #8a847d; margin: 0; }
.hx-kuenye dd { font: 500 14px/1.4 var(--font); color: var(--ink); margin: 0; }
.hx-daside { flex: 0 0 auto; width: min(380px,100%); position: sticky; top: 110px; }
.hx-daside__card { background: var(--surface); border: 1px solid var(--line2); border-radius: 14px 14px 0 0; padding: clamp(28px,3vw,40px); }
.hx-daside__lbl { font: 500 11px/1 var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--accent-dk); }
.hx-daside__kpi { display: flex; gap: 30px; margin: 24px 0 26px; flex-wrap: wrap; }
.hx-daside__kpi small { font: 500 10px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: #8a847d; display: block; margin-bottom: 8px; }
.hx-daside__kpi b { font: 400 40px/1 var(--font); }
.hx-daside__kpi .gold { color: var(--bd-gold); }
.hx-daside__preis { padding: 22px 0; border-top: 1px solid rgba(24,22,20,.12); border-bottom: 1px solid rgba(24,22,20,.12); margin-bottom: 22px; }
.hx-daside__preis small { font: 500 10px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: #8a847d; display: block; margin-bottom: 8px; }
.hx-daside__preis b { font: 400 32px/1 var(--font); color: var(--ink); }
.hx-daside__preis b.blur { filter: blur(8px); user-select: none; font-size: 24px; }
.hx-daside .hx-btn { width: 100%; justify-content: center; margin-top: 12px; padding: 17px; }
.hx-daside__note { background: var(--surface); border: 1px solid var(--line); border-top: none; border-radius: 0 0 14px 14px; padding: 22px clamp(28px,3vw,40px); display: flex; align-items: center; gap: 14px; }
.hx-daside__note span:first-child { width: 9px; height: 9px; border-radius: 50%; background: #3E6B4F; flex: 0 0 auto; }
.hx-daside__note span:last-child { font: 300 13px/1.5 var(--font); color: var(--muted); }
.hx-dgate { background: var(--ink); border-radius: 18px; padding: clamp(28px,4vw,48px); text-align: center; color: var(--linen); margin-bottom: 30px; }
.hx-dgate h2 { color: #fff; margin: 10px 0 12px; font: 500 26px/1.2 var(--font); letter-spacing: 0; }
.hx-dgate p { color: rgba(255,255,255,.75); max-width: 460px; margin: 0 auto 20px; font: 300 15px/1.7 var(--font); }
.hx-similar { margin-top: clamp(56px,7vw,90px); border-top: 1px solid var(--line2); padding-top: 48px; }
.hx-similar h2 { margin: 0 0 30px; font: 500 clamp(26px,3vw,38px)/1.1 var(--font); color: var(--ink); }
@media (max-width:980px){ .hx-list{grid-template-columns:repeat(2,1fr)} .hx-dbody{flex-direction:column} .hx-daside{position:static;width:100%} }
@media (max-width:560px){ .hx-list{grid-template-columns:1fr} .hx-kuenye{grid-template-columns:1fr} .hx-thumbs{grid-template-columns:repeat(2,1fr)} }

/* Kontaktformular */
.hx-form-grid { display: grid; grid-template-columns: 1.3fr .9fr; gap: 3rem; align-items: start; padding: clamp(50px,6vw,80px) 0 clamp(70px,9vw,110px); }
.hx-fobjekt { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--bd-gold); border-radius: 8px; padding: 1rem 1.2rem; margin-bottom: 1.6rem; }
.hx-fobjekt strong { display: block; margin-top: .3rem; }
.hx-frow { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.hx-field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.2rem; }
.hx-field label { font: 600 11px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-dk); }
.hx-field input, .hx-field select, .hx-field textarea { font-family: inherit; font-size: 15px; padding: .85rem .9rem; border: 1px solid var(--line2); border-radius: 4px; background: var(--surface); color: var(--ink); width: 100%; transition: border-color .2s, box-shadow .2s; }
.hx-field textarea { resize: vertical; min-height: 130px; }
.hx-field input:focus, .hx-field select:focus, .hx-field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(196,164,107,.18); }
.hx-field .field-validation-error { color: #9b2c2c; font-size: 13px; }
.hx-vsum:not(:empty) { background: #fbeceb; border: 1px solid #e3b9b4; border-radius: 6px; padding: .9rem 1.1rem; margin-bottom: 1.4rem; color: #9b2c2c; font-size: 14px; }
.hx-check { display: flex; gap: .6rem; align-items: flex-start; margin: .4rem 0; }
.hx-check input { margin-top: .3rem; width: 17px; height: 17px; accent-color: var(--accent-dk); flex: 0 0 auto; }
.hx-check label { font: 300 14px/1.6 var(--font); color: var(--muted); }
.hx-check a { color: var(--accent-dk); text-decoration: underline; }
.hx-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hx-aside-contact { background: var(--surface); border: 1px solid var(--line2); padding: clamp(28px,3vw,40px); }
.hx-aside-contact h2 { margin: 0 0 1.2rem; font: 500 22px/1.2 var(--font); color: var(--ink); }
.hx-aside-contact ul { list-style: none; padding: 0; margin: 0 0 1.4rem; display: flex; flex-direction: column; gap: .5rem; font: 300 15px/1.6 var(--font); color: var(--muted); }
.hx-aside-contact a:hover { color: var(--accent-dk); }
.hx-aside-actions { display: flex; gap: .7rem; }
.hx-thanks { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: clamp(40px,5vw,64px); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.hx-thanks__mark { width: 58px; height: 58px; border-radius: 50%; background: var(--bd-gold); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; }
@media (max-width:900px){ .hx-form-grid{grid-template-columns:1fr} }
@media (max-width:520px){ .hx-frow{grid-template-columns:1fr} }

/* Legal / Prose */
.hx-prose { padding: clamp(50px,6vw,80px) 0 clamp(70px,9vw,110px); max-width: 820px; }
.hx-prose h2 { font: 500 clamp(20px,2vw,26px)/1.3 var(--font); color: var(--ink); margin: 2rem 0 .8rem; }
.hx-prose p, .hx-prose li { font: 300 15px/1.8 var(--font); color: var(--muted); }
.hx-prose strong { color: var(--ink); font-weight: 500; }
.hx-prose a { color: var(--accent-dk); text-decoration: underline; }

/* Auth (Identity-Standardseiten brandgerecht) */
.hx-authpad { padding-top: 20px; }
main section[id]:not(.hx-hero) { scroll-margin-top: 90px; }
main > .row, main > div > .row { max-width: 480px; margin: 0 auto; padding: clamp(30px,5vw,60px) 24px; }
main h1 { font: 400 clamp(30px,4vw,46px)/1.1 var(--font); letter-spacing: -.02em; color: var(--ink); margin: 0 0 .4em; }
main .form-floating, main .form-group { margin-bottom: 1rem; }
main input.form-control { font-family: inherit; font-size: 15px; padding: .85rem .9rem; border: 1px solid var(--line2); border-radius: 4px; background: var(--surface); width: 100%; }
main input.form-control:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(196,164,107,.18); }
main .btn-primary, main button[type=submit].w-100 { background: var(--bd-gold); color: var(--on-accent); border: 0; padding: 14px 28px; font: 600 12px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: .35s; }
main .btn-primary:hover { background: var(--accent-dk); color: #fff; }
main section[role=alert] a, main a { color: var(--accent-dk); }

/* Identity-Verwaltung & 2FA (Default-UI-Seiten: EnableAuthenticator, Recovery-Codes …) */
main > div:has(> .row), main > .row { max-width: 760px; margin: 0 auto; padding: clamp(24px,4vw,44px) 24px clamp(60px,8vw,90px); }
main h2 { font: 400 clamp(22px,2.4vw,30px)/1.15 var(--font); color: var(--ink); margin: 0 0 .3em; letter-spacing: -.01em; }
main h3, main h4 { font: 500 clamp(17px,1.6vw,20px)/1.3 var(--font); color: var(--ink); margin: 1.7rem 0 .7rem; }
main hr { border: 0; border-top: 1px solid var(--line); margin: 1.4rem 0 2rem; }
main .nav.flex-column, main ul.nav, main .nav-pills { list-style: none; padding: 0; margin: 0 0 2rem; display: flex; flex-wrap: wrap; gap: .4rem; }
main .nav-item { list-style: none; }
main .nav-link { display: inline-flex; padding: .5rem .9rem; border-radius: 8px; font: 500 13px/1 var(--font); color: var(--muted); background: var(--surface); border: 1px solid var(--line); text-decoration: none; }
main .nav-link:hover { border-color: var(--accent); color: var(--accent-dk); }
main .nav-link.active { background: var(--bd-gold); color: var(--on-accent); border-color: var(--bd-gold); }
main kbd { display: inline-block; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 14px; letter-spacing: .04em; background: var(--band); color: var(--ink); border: 1px solid var(--line2); border-radius: 6px; padding: .35rem .6rem; }
main #qrCode { display: flex; justify-content: center; margin: 1.6rem 0; }
main #qrCode img, main #qrCode canvas { background: #fff; padding: 12px; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 40px -28px rgba(24,22,20,.5); }
main ol, main ul:not(.nav) { padding-left: 1.3rem; }
main ol li, main ul:not(.nav) li { font: 300 15px/1.7 var(--font); color: var(--muted); margin-bottom: .5rem; }
main .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 26px; border-radius: 9px; font: 600 12px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; border: 1px solid transparent; text-decoration: none; transition: .3s var(--ease); }
main .btn-secondary, main .btn-default, main .btn-outline-primary { background: transparent; color: var(--ink); border: 1px solid var(--line2); }
main .btn-secondary:hover, main .btn-outline-primary:hover { border-color: var(--accent); color: var(--accent-dk); }
main .btn-danger { background: #fff; color: #9b2c2c; border: 1px solid #c0564a; }
main .btn-danger:hover { background: #9b2c2c; color: #fff; }
main .alert, main div[role=alert] { border-radius: 8px; padding: .9rem 1.1rem; margin-bottom: 1.4rem; font-size: 14px; }
main .alert-success, main .alert-info { background: #e7f3ec; border: 1px solid #bcdcc6; color: #225c39; }
main .alert-danger, main .alert-warning { background: #fbeceb; border: 1px solid #e3b9b4; color: #9b2c2c; }
main .form-label { font: 500 12px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-dk); display: block; margin-bottom: .5rem; }
main .form-floating > label { color: var(--muted); font-size: 13px; }
main textarea.form-control, main select.form-control { font-family: inherit; font-size: 15px; padding: .85rem .9rem; border: 1px solid var(--line2); border-radius: 4px; background: var(--surface); width: 100%; }
/* Default-UI-Seiten ohne Page-Head: erste Überschrift unter der fixierten Nav freistellen */
main > h1 { margin-top: 48px; }

/* Zwei-Faktor-Einrichtung (markeneigene EnableAuthenticator-Seite) */
.hx-2fa { padding: clamp(30px,4vw,50px) 0 clamp(70px,9vw,110px); }
.hx-2fa__grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: clamp(30px,5vw,64px); align-items: start; }
.hx-2fa__steps { list-style: none; counter-reset: s; padding: 0; margin: 0 0 2.2rem; display: flex; flex-direction: column; gap: 1.5rem; }
.hx-2fa__steps li { position: relative; padding-left: 3rem; font: 300 15px/1.7 var(--font); color: var(--muted); counter-increment: s; }
.hx-2fa__steps li::before { content: counter(s); position: absolute; left: 0; top: -2px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--bd-gold); display: flex; align-items: center; justify-content: center; font: italic 14px/1 var(--font); color: var(--accent-dk); }
.hx-2fa__steps strong { color: var(--ink); font-weight: 500; display: block; margin-bottom: 3px; }
.hx-2fa__key { margin-top: .7rem; }
.hx-2fa__key kbd { display: inline-block; font-family: ui-monospace,"SF Mono",Menlo,monospace; font-size: 15px; letter-spacing: .06em; background: var(--band); color: var(--ink); border: 1px solid var(--line2); border-radius: 8px; padding: .55rem .8rem; }
.hx-2fa__form { max-width: 340px; }
.hx-2fa__form .hx-btn { margin-top: 1rem; }
.hx-2fa__qr { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: clamp(22px,3vw,34px); display: flex; flex-direction: column; align-items: center; gap: 1rem; position: sticky; top: 100px; }
.hx-2fa__qr #qrCode { display: flex; justify-content: center; margin: 0; }
.hx-2fa__qr #qrCodeData { display: none; }
.hx-2fa__hint { font: 300 13px/1.5 var(--font); color: var(--muted); text-align: center; margin: 0; }
.hx-2fa__status { background: #e7f3ec; border: 1px solid #bcdcc6; color: #225c39; border-radius: 8px; padding: .9rem 1.1rem; margin-bottom: 1.8rem; font-size: 14px; }
.hx-2fa__reset { margin-top: 2.2rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.hx-2fa__reset p { margin: 0 0 .8rem; font: 500 14px/1.5 var(--font); color: var(--ink); }
.hx-2fa__reset .hx-btn { padding: 12px 22px; }
.hx-2fa__reset span { display: block; margin-top: .7rem; font: 300 12.5px/1.5 var(--font); color: var(--muted); max-width: 420px; }
@media (max-width: 820px) { .hx-2fa__grid { grid-template-columns: 1fr; } .hx-2fa__qr { order: -1; } }

/* Wiederherstellungscodes */
.hx-reco { padding: clamp(30px,4vw,50px) 0 clamp(70px,9vw,110px); max-width: 720px; }
.hx-reco__warn { background: #fbf5e9; border: 1px solid var(--gold-lt, #D9BF8E); color: var(--accent-dk); border-radius: 10px; padding: 1rem 1.2rem; font: 300 14px/1.6 var(--font); margin-bottom: 1.8rem; }
.hx-reco__warn strong { color: var(--ink); font-weight: 600; }
.hx-reco__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; margin-bottom: 2rem; }
.hx-reco__grid code { font-family: ui-monospace,"SF Mono",Menlo,monospace; font-size: 15px; letter-spacing: .06em; color: var(--ink); background: var(--surface); border: 1px solid var(--line2); border-radius: 8px; padding: .75rem 1rem; text-align: center; cursor: pointer; transition: .2s var(--ease); }
.hx-reco__grid code:hover { border-color: var(--accent); }
.hx-reco__grid code.is-copied { background: #e7f3ec; border-color: #bcdcc6; color: #225c39; }
@media (max-width: 520px) { .hx-reco__grid { grid-template-columns: 1fr; } }

/* 2FA-Verwaltung (Hub) */
.hx-2fahub { padding: clamp(30px,4vw,50px) 0 clamp(70px,9vw,110px); max-width: 820px; }
.hx-2fahub__status { background: #e7f3ec; border: 1px solid #bcdcc6; color: #225c39; border-radius: 8px; padding: .9rem 1.1rem; margin-bottom: 1.8rem; font-size: 14px; }
.hx-2fahub__state { display: flex; align-items: flex-start; gap: 14px; border: 1px solid var(--line); border-radius: 12px; padding: 1.2rem 1.4rem; margin-bottom: 1.4rem; background: var(--surface); }
.hx-2fahub__dot { width: 11px; height: 11px; border-radius: 50%; margin-top: 6px; flex: 0 0 auto; }
.hx-2fahub__state.is-on .hx-2fahub__dot { background: #3E6B4F; box-shadow: 0 0 0 4px rgba(62,107,79,.14); }
.hx-2fahub__state.is-off .hx-2fahub__dot { background: var(--bd-gold); box-shadow: 0 0 0 4px rgba(196,164,107,.16); }
.hx-2fahub__state strong { display: block; font: 500 16px/1.3 var(--font); color: var(--ink); margin-bottom: 3px; }
.hx-2fahub__state span { font: 300 14px/1.6 var(--font); color: var(--muted); }
.hx-2fahub__cards { display: grid; gap: 1rem; }
.hx-2fahub__card { border: 1px solid var(--line); border-radius: 12px; padding: 1.4rem 1.5rem; background: var(--surface); }
.hx-2fahub__card h3 { margin: 0 0 .5rem; font: 500 17px/1.3 var(--font); color: var(--ink); }
.hx-2fahub__card p { margin: 0 0 1.1rem; font: 300 14px/1.65 var(--font); color: var(--muted); }
.hx-2fahub__card p strong { color: var(--ink); font-weight: 500; }
.hx-2fahub__card .hx-btn { padding: 12px 22px; }
.hx-2fahub__card--danger { border-color: #e3c3bf; background: #fdf7f6; }
.hx-btn--danger { background: #fff; color: #9b2c2c; border-color: #c0564a; }
.hx-btn--danger:hover { background: #9b2c2c; color: #fff; border-color: #9b2c2c; }

/* Auth — markeneigene Login/Register-Seiten (überschreibt Default-UI) */
.hx-auth { max-width: 520px; margin: 0 auto; padding: clamp(34px,5vw,60px) 0 clamp(70px,9vw,110px); }
.hx-auth--center { text-align: center; }
.hx-auth--center .hx-thanks__mark { margin: 0 auto 22px; }
.hx-auth__alt { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.hx-auth__hint { margin-top: 18px; font-size: 13px; color: var(--muted); }
.hx-auth__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 30px; }

/* Blog / Insights — Liste & Artikel */
.hx-art { display: block; }
.hx-art__excerpt { margin: 0 0 18px; color: var(--muted); font: 300 15px/1.6 var(--font); }
.hx-muted { color: var(--muted); }
.hx-artmeta { display: flex; gap: 12px; align-items: center; color: var(--muted); font: 400 13px/1 var(--font); margin: 18px 0 0; }
.hx-artcover { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 10px; margin: 10px 0 4px; }
.hx-article { max-width: 760px; margin: clamp(36px,5vw,56px) auto 0; }
.hx-article__lead { font: 300 clamp(18px,1.5vw,21px)/1.6 var(--font); color: var(--ink); margin: 0 0 1.4em; }
.hx-article__back { max-width: 760px; margin: 44px auto 0; }
.hx-article + .hx-article__back { border-top: 1px solid var(--line); padding-top: 28px; }
/* Leistung-Detail: Fließtext auf volle Sektionsbreite (bündig mit Cover + Raster) */
.hx-article--full { max-width: none; margin-left: 0; margin-right: 0; }
.hx-article--full p, .hx-article--full li { font-size: 16px; }
.hx-article__back--full { max-width: none; margin-left: 0; margin-right: 0; }
/* Abstand zum Footer, damit das Raster nicht klebt */
.hx-detailpad { padding-bottom: clamp(80px, 10vw, 130px); }
/* Aktuelle Leistung im 6-Feld-Raster dezent markieren */
.hx-card--active { background: #F1ECE2; box-shadow: inset 3px 0 0 var(--bd-gold); }
.hx-card--active .hx-card__more { color: var(--accent-dk); }

/* ==========================================================================
   Auth — Split-Screen (Registrierung, originalgetreu zum Entwurf)
   ========================================================================== */
.hx-authsplit { display: flex; align-items: stretch; min-height: 100vh; background: var(--bg); }
.hx-authsplit__media { flex: 1; align-self: flex-start; position: sticky; top: 0; height: 100vh; overflow: hidden; }
.hx-authsplit__media > img:first-child { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hx-authsplit__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,16,14,.5), rgba(18,16,14,.82)); }
.hx-authsplit__emblem { position: absolute; right: -3%; top: 46%; transform: translateY(-50%); width: min(420px, 40%); opacity: .08; }
.hx-authsplit__caption { position: absolute; left: clamp(34px,4vw,64px); right: clamp(34px,4vw,64px); bottom: clamp(40px,6vw,72px); z-index: 2; }
.hx-authsplit__caption h2 { margin: 0; font: 400 clamp(30px,3vw,46px)/1.1 var(--font); letter-spacing: -.02em; color: #FDFCFA; }
.hx-authsteps { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; max-width: 420px; }
.hx-authsteps li { display: flex; align-items: flex-start; gap: 13px; font: 300 14px/1.5 var(--font); color: rgba(255,255,255,.78); }
.hx-authsteps__no { flex: 0 0 auto; width: 26px; height: 26px; border: 1px solid var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-style: italic; font-size: 13px; color: var(--accent-lt); }

.hx-authsplit__panel { flex: 0 0 auto; width: min(620px, 100%); display: flex; align-items: center; justify-content: center; padding: 120px clamp(24px,4vw,64px) 64px; }
.hx-authsplit__inner { width: 100%; max-width: 460px; }
.hx-authsplit__inner h1 { margin: 0; font: 400 clamp(28px,3.2vw,40px)/1.04 var(--font); letter-spacing: -.02em; color: var(--ink); }
.hx-authsplit__sub { margin: 14px 0 0; font: 300 15px/1.6 var(--font); color: var(--muted); }
.hx-authform { margin-top: 32px; }
.hx-authrow { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.hx-authfield { display: flex; flex-direction: column; gap: 9px; margin-top: 20px; }
.hx-authrow .hx-authfield { margin-top: 20px; }
.hx-authrow .hx-authfield:first-child, .hx-authform > .hx-authfield:first-of-type { margin-top: 20px; }
.hx-authlabel { font: 500 11px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-dk); }
.hx-authfield input, .hx-authfield select, .hx-authfield textarea {
    background: transparent; border: none; border-bottom: 1px solid rgba(120,110,100,.4);
    padding: 12px 0; color: var(--ink); font: 300 16px/1.4 var(--font); outline: none; width: 100%;
    border-radius: 0;
}
.hx-authfield textarea { resize: vertical; min-height: 64px; }
.hx-authfield select { cursor: pointer; }
.hx-authfield input:focus, .hx-authfield select:focus, .hx-authfield textarea:focus { border-bottom-color: var(--accent); }
.hx-authfield span.field-validation-error { font-size: 12px; color: #9b2c2c; }
.hx-authcheck { display: flex; align-items: flex-start; gap: 12px; margin-top: 26px; cursor: pointer; }
.hx-authcheck input { margin-top: 3px; accent-color: var(--accent); width: 16px; height: 16px; flex: 0 0 auto; }
.hx-authcheck span { font: 300 13px/1.6 var(--font); color: var(--muted); }
.hx-authcheck a { color: var(--accent-dk); }
.hx-authsubmit { margin-top: 30px; width: 100%; background: var(--bd-gold); color: var(--on-accent); padding: 18px; border: none; border-radius: 9px; cursor: pointer; font: 600 12px/1 var(--font); letter-spacing: .16em; text-transform: uppercase; transition: .4s var(--ease); }
.hx-authsubmit:hover { background: var(--accent-dk); color: #fff; }
.hx-authsplit__alt { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line2); text-align: center; font: 300 14px/1.6 var(--font); color: var(--muted); }
.hx-authsplit__alt a { font-weight: 600; color: var(--accent-dk); }

@media (max-width: 980px) {
    .hx-authsplit__media { display: none; }
    .hx-authsplit__panel { width: 100%; padding: 110px clamp(22px,6vw,40px) 56px; }
}
@media (max-width: 520px) {
    .hx-authrow { grid-template-columns: 1fr; gap: 0; }
}