/* seite.css – Ergänzungen für administrativekarte-deutschland.de
   Nur Token aus p17.css, eckig, ohne Schatten und Verläufe. Neue Komponenten:
   Kartenkonfigurator (.ak-*) und Einwilligungsdialog (.p17-consent). */

/* ---------- Hero-Abbildung ---------- */
.ak-hero-karte { margin: 0; }
.ak-hero-karte img { display: block; width: 100%; max-width: 26rem; height: auto; margin-inline: auto; }
.ak-hero-karte figcaption { font-size: .875rem; color: var(--p17-ink-muted); margin-top: .5rem; text-align: center; }
/* niedrige Laptop-Fenster (1280 × 580): CTA im ersten Bildschirm halten */
@media (min-width: 61.875rem) and (max-height: 700px) {
  .p17-hero .p17-display--bereich { font-size: clamp(2.25rem, 1.4rem + 2.4vw, 3.25rem); }
  .ak-hero-karte img { max-height: 22rem; width: auto; }
}
.ak-richtpreis { font-size: .9375rem; margin: 0; }
.ak-richtpreis strong { font-family: var(--p17-font-numeric); font-variant-numeric: tabular-nums; }

/* ---------- Konfigurator: Raster ---------- */
.ak-app {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border: 1px solid var(--p17-line);
  border-right: var(--p17-edge-box, 6px) solid var(--p17-feld);
  background: var(--p17-surface);
}
.ak-panel { padding: 1.5rem; display: grid; gap: 1.5rem; align-content: start; min-width: 0; }
.ak-kartenbereich { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; border-bottom: 1px solid var(--p17-line); order: -1; }
@media (min-width: 61.875rem) {
  .ak-app { grid-template-columns: minmax(22rem, 5fr) 7fr; min-height: min(46rem, calc(100svh - var(--p17-chrome-h, 0px) - 2rem)); }
  .ak-kartenbereich { order: 0; border-bottom: 0; border-left: 1px solid var(--p17-line); }
  .ak-panel { max-height: min(46rem, calc(100svh - var(--p17-chrome-h, 0px) - 2rem)); overflow-y: auto; }
}

/* ---------- Fortschritt ---------- */
.ak-fortschritt { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.ak-fortschritt li { height: 6px; background: var(--p17-line); }
.ak-fortschritt li.ist-fertig, .ak-fortschritt li[aria-current] { background: var(--p17-feld); }
.ak-fortschritt li[aria-current] { outline: 2px solid var(--p17-ink); outline-offset: 1px; }
.ak-schrittzahl { font-family: var(--p17-font-numeric); font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--p17-ink-muted); margin: .5rem 0 0; }

.ak-schritt { display: grid; gap: 1rem; border: 0; padding: 0; margin: 0; min-width: 0; }
.ak-schritt__titel { font-family: var(--p17-font-display); font-weight: 500; font-size: 1.5rem; line-height: 1.15; margin: 0; }
.ak-schritt__titel:focus { outline: none; }
.ak-schritt__titel:focus-visible { outline: var(--p17-focus-width, 3px) solid var(--p17-focus); outline-offset: 4px; }
.ak-schritt legend { float: none; padding: 0; }
.ak-hilfe { color: var(--p17-ink-muted); margin: 0; font-size: .9375rem; }

/* ---------- Auswahloptionen (Radio als ganze Fläche) ---------- */
.ak-optionen { display: grid; gap: .5rem; }
.ak-option {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .75rem; align-items: start;
  padding: .875rem 1rem; border: 1px solid var(--p17-line-strong); background: var(--p17-surface); cursor: pointer;
}
.ak-option input { width: 1.25rem; height: 1.25rem; margin: .15rem 0 0; accent-color: var(--p17-feld-strong); }
.ak-option__text { display: grid; gap: .125rem; min-width: 0; }
.ak-option__text strong { font-weight: 600; }
.ak-option__text span { font-size: .875rem; color: var(--p17-ink-muted); }
.ak-option__preis { font-family: var(--p17-font-numeric); font-variant-numeric: tabular-nums; font-weight: 600; font-size: .875rem; text-align: right; white-space: nowrap; }
.ak-option:hover { background: var(--p17-feld-soft); }
.ak-option:has(input:checked) { border-color: var(--p17-feld-strong); border-right: 6px solid var(--p17-feld); background: var(--p17-feld-soft); }
.ak-option:has(input:focus-visible) { outline: var(--p17-focus-width, 3px) solid var(--p17-focus); outline-offset: 2px; }
.ak-option.ist-aus { cursor: not-allowed; color: var(--p17-ink-muted); background: var(--p17-paper); }
.ak-option.ist-aus:hover { background: var(--p17-paper); }
@media (max-width: 30rem) { .ak-option { grid-template-columns: auto minmax(0, 1fr); } .ak-option__preis { grid-column: 2; text-align: left; } }

.ak-typen { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); }
.ak-typ { grid-template-columns: auto minmax(0, 1fr); }
.ak-typ img { grid-column: 1 / -1; width: 100%; height: 7rem; object-fit: cover; border: 1px solid var(--p17-line); }

/* ---------- Gebiete ---------- */
.ak-suche { position: relative; }
.ak-treffer {
  list-style: none; margin: 0; padding: 0; position: absolute; left: 0; right: 0; top: 100%; z-index: 5;
  max-height: 18rem; overflow-y: auto; background: var(--p17-surface); border: 1px solid var(--p17-line-strong); border-top: 0;
}
.ak-treffer button {
  display: grid; width: 100%; text-align: left; gap: .125rem; padding: .625rem .875rem; border: 0;
  border-bottom: 1px solid var(--p17-line); background: transparent; color: var(--p17-ink); font: inherit; min-height: 44px;
}
.ak-treffer button:hover, .ak-treffer button:focus-visible { background: var(--p17-feld-soft); }
.ak-treffer button:focus-visible { outline: var(--p17-focus-width, 3px) solid var(--p17-focus); outline-offset: -3px; }
.ak-treffer button span { font-size: .8125rem; color: var(--p17-ink-muted); }
.ak-treffer__leer { padding: .75rem .875rem; font-size: .9375rem; }

.ak-schnell { border: 1px solid var(--p17-line); padding: 1rem; display: grid; gap: .75rem; margin: 0; }
.ak-schnell legend { font-weight: 600; font-size: 1rem; float: none; padding: 0 .25rem; margin: 0; width: auto; }
.ak-schnell__felder { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr)); align-items: end; }

.ak-anzahl { font-weight: 600; margin: 0; }
.ak-auswahl { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .375rem; max-height: 12rem; overflow-y: auto; }
.ak-auswahl li { display: inline-flex; align-items: center; gap: .25rem; background: var(--p17-feld-soft); border: 1px solid var(--p17-feld-strong); padding: .125rem .125rem .125rem .5rem; font-size: .875rem; }
.ak-auswahl button { border: 0; background: transparent; color: var(--p17-feld-strong); font: inherit; font-size: .8125rem; text-decoration: underline; padding: .25rem .375rem; min-height: 32px; }
.ak-auswahl button:hover { background: var(--p17-surface); }
.ak-auswahl__mehr { background: transparent !important; border-color: transparent !important; color: var(--p17-ink-muted); }
.ak-textknopf { justify-self: start; border: 0; background: none; padding: .25rem 0; color: var(--p17-feld-strong); text-decoration: underline; font: inherit; min-height: 32px; }

/* ---------- Maße ---------- */
.ak-masse { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ak-einheit { display: flex; align-items: stretch; }
.ak-einheit input { min-width: 0; }
.ak-einheit span { display: grid; place-items: center; padding: 0 .75rem; border: 1px solid var(--p17-line-strong); border-left: 0; background: var(--p17-paper); }
.ak-formate { display: flex; flex-wrap: wrap; gap: .375rem; margin: 0; padding: 0; list-style: none; }
.ak-formate button { border: 1px solid var(--p17-line-strong); background: var(--p17-surface); color: var(--p17-ink); font: inherit; font-size: .875rem; padding: .375rem .625rem; min-height: 36px; }
.ak-formate button:hover { background: var(--p17-feld-soft); }

/* ---------- Preis ---------- */
.ak-preis { border: 1px solid var(--p17-line); border-right: var(--p17-edge-box, 6px) solid var(--p17-feld); padding: 1rem; background: var(--p17-paper); }
.ak-preis h3, .ak-preis h4 { font-family: var(--p17-font-body); font-weight: 600; font-size: 1rem; margin: 0 0 .5rem; }
.ak-preis__liste { margin: 0; display: grid; }
.ak-preis__liste div { display: flex; justify-content: space-between; gap: 1rem; padding: .375rem 0; border-bottom: 1px solid var(--p17-line); font-size: .9375rem; }
.ak-preis__liste dt { font-weight: 400; }
.ak-preis__liste dd { margin: 0; text-align: right; font-family: var(--p17-font-numeric); font-variant-numeric: tabular-nums; font-weight: 600; }
.ak-preis__summe { border-bottom: 2px solid var(--p17-ink) !important; font-size: 1.0625rem !important; }
.ak-preis__hinweis { font-size: .875rem; color: var(--p17-ink-muted); margin: .75rem 0 0; }

/* ---------- Steuerung ---------- */
.ak-steuerung { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; border-top: 1px solid var(--p17-line); padding-top: 1rem; }
.ak-steuerung .btn.ist-gesperrt { opacity: .55; }
.ak-fehlt { color: var(--p17-raum-strong, #a7323d); font-weight: 600; margin: 0; flex-basis: 100%; }

/* ---------- Karte ---------- */
.ak-kartenkopf { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; padding: .75rem 1rem; border-bottom: 1px solid var(--p17-line); }
.ak-status { margin: 0; font-size: .875rem; color: var(--p17-ink-muted); }
.ak-karte { position: relative; min-height: 22rem; height: 55svh; background: var(--p17-paper); touch-action: none; cursor: grab; overflow: hidden; }
@media (min-width: 61.875rem) { .ak-karte { height: auto; min-height: 0; } }
.ak-karte.ist-auswahl { cursor: pointer; }
.ak-vorschauhinweis { position: absolute; left: .75rem; bottom: .75rem; margin: 0; background: var(--p17-surface); border: 1px solid var(--p17-line-strong); border-right: 6px solid var(--p17-feld); padding: .375rem .75rem; font-size: .875rem; font-weight: 600; }
@media (max-width: 61.86rem) { .ak-vorschauhinweis { bottom: 3.75rem; right: .5rem; left: .5rem; } }
.ak-karte canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ak-laden { position: absolute; left: 1rem; top: 1rem; margin: 0; padding: .5rem .75rem; background: var(--p17-surface); border: 1px solid var(--p17-line-strong); font-size: .9375rem; }
.ak-tip { position: absolute; pointer-events: none; transform: translate(12px, 12px); background: var(--p17-anthrazit); color: #fff; padding: .375rem .625rem; font-size: .8125rem; line-height: 1.35; max-width: 16rem; }
.ak-zoom { position: absolute; right: .75rem; top: .75rem; display: grid; gap: 4px; }
.ak-zoom button { min-width: 44px; min-height: 44px; border: 1px solid var(--p17-line-strong); background: var(--p17-surface); color: var(--p17-ink); font: inherit; font-weight: 600; padding: 0 .5rem; }
.ak-zoom button:hover { background: var(--p17-feld-soft); }
@media (max-width: 61.86rem) { .ak-zoom { grid-auto-flow: column; top: auto; bottom: .5rem; right: .5rem; } .ak-kartenhinweis { bottom: 3.75rem; right: .5rem; left: .5rem; } }
.ak-kartenhinweis { position: absolute; left: .75rem; bottom: .75rem; right: 4.5rem; margin: 0; background: var(--p17-surface); border: 1px solid var(--p17-line); padding: .375rem .625rem; font-size: .8125rem; }
.ak-quelle { margin: 0; padding: .5rem 1rem; font-size: .8125rem; color: var(--p17-ink-muted); border-top: 1px solid var(--p17-line); }

/* ---------- Formular im Schritt 5: volle Breite, Karte ausgeblendet ---------- */
.ak-app.ist-formular { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.ak-app.ist-formular .ak-kartenbereich { display: none; }
.ak-app.ist-formular .ak-panel { max-height: none; overflow: visible; padding: 2rem; }
.ak-formular__raster { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 61.875rem) { .ak-formular__raster { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 3rem; } }
.ak-formular__felder { display: grid; gap: 1.5rem; min-width: 0; }
.ak-formular__auswahl { display: grid; gap: 1rem; justify-items: start; }
.ak-formular__auswahl .ak-preis { width: 100%; }
@media (min-width: 61.875rem) { .ak-formular__auswahl { position: sticky; top: calc(var(--p17-chrome-h, 0px) + 1rem); } }
.ak-felder { display: grid; gap: 1.25rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
.ak-felder > div, .ak-felder > p { min-width: 0; }
.ak-felder > div { display: flex; flex-direction: column; justify-content: flex-start; }
.ak-felder > div > .form-label { flex: 1 0 auto; display: flex; align-items: flex-end; flex-wrap: wrap; gap: 0 .25rem; }
.ak-formular .p17-formular__abschluss { display: grid; gap: .75rem; justify-items: start; }
.ak-formular .p17-formular__abschluss p { margin: 0; max-width: 40rem; }
.ak-felder .form-label { min-height: 1.5em; }
.ak-felder__voll { grid-column: 1 / -1; }
.ak-felder__plz, .ak-felder__ort { grid-column: span 1; }
@media (min-width: 37.5rem) {
  .ak-felder { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ak-felder > div { grid-column: span 3; }
  .ak-felder > .ak-felder__plz { grid-column: span 2; }
  .ak-felder > .ak-felder__ort { grid-column: span 4; }
  .ak-felder > .ak-felder__voll { grid-column: 1 / -1; }
}
.ak-sendefehler { border: 1px solid var(--p17-raum-strong, #a7323d); border-right-width: 6px; padding: .75rem 1rem; margin: 0; }
.ak-danke { display: grid; gap: .75rem; }

/* ---------- Ansprechpartner ohne Foto (Fotokatalog: kein Foto für diese Domain) ---------- */
.p17-person--ohne-foto { grid-template-columns: minmax(0, 1fr); }
.p17-person--ohne-foto strong { font-size: 1.25rem; margin-bottom: .125rem; }
.p17-person--ohne-foto span { display: block; }
.p17-kontakt .p17-tel--gross { white-space: nowrap; font-size: clamp(1.0625rem, .55rem + 2.6vw, 2rem); }
.p17-kontakt__wege a { overflow-wrap: break-word; }

/* ---------- Tabellen Ebenen und Richtpreise ---------- */
.ak-tabelle-link { white-space: nowrap; }
.p17-tabelle.ak-tabelle th, .p17-tabelle.ak-tabelle td { padding-right: 1.5rem; }
.p17-tabelle.ak-tabelle th:last-child, .p17-tabelle.ak-tabelle td:last-child { padding-right: 0; }
.p17-tabelle.ak-tabelle td.zahl { font-weight: 600; }
.p17-tabelle.ak-tabelle td.zahl small { font-family: var(--p17-font-body); font-weight: 400; color: var(--p17-ink-muted); }
@media (max-width: 46.874rem) {
  .p17-tabelle.ak-tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .p17-tabelle.ak-tabelle tr { display: block; padding-block: .75rem; border-bottom: 1px solid var(--p17-line); }
  .p17-tabelle.ak-tabelle th, .p17-tabelle.ak-tabelle td { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: .75rem; border: 0; padding: .25rem 0; text-align: left; white-space: normal; }
  .p17-tabelle.ak-tabelle th[scope="row"] { display: block; font-size: 1.0625rem; padding-bottom: .5rem; }
  .ak-tabelle-link { white-space: normal; }
  .p17-tabelle.ak-tabelle td::before { content: attr(data-label); font-family: var(--p17-font-body); font-weight: 600; font-size: .875rem; color: var(--p17-ink-muted); }
}

/* ---------- Kartentypen ---------- */
.ak-typliste { display: grid; gap: 2rem; }
.ak-typzeile { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); align-items: start; padding-top: 1.5rem; border-top: 1px solid var(--p17-line); }
@media (min-width: 46.875rem) { .ak-typzeile { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
.ak-typzeile img { width: 100%; height: auto; border: 1px solid var(--p17-line); }
.ak-typzeile h3 { margin-top: 0; }

/* ---------- Einwilligungsdialog ---------- */
.p17-consent { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 1rem; }
.p17-consent[hidden] { display: none; }
.p17-consent__hintergrund { position: absolute; inset: 0; background: rgba(12, 13, 15, .5); }
.p17-consent__fenster {
  position: relative; width: min(40rem, 100%); max-height: calc(100svh - 2rem); overflow-y: auto;
  background: var(--p17-surface); color: var(--p17-ink); border-right: 6px solid var(--p17-feld);
  padding: 1.5rem 1.5rem 1.25rem; display: grid; gap: .75rem;
}
.p17-consent__fenster:focus { outline: none; }
.p17-consent__fenster h2 { font-family: var(--p17-font-display); font-weight: 500; font-size: 1.5rem; line-height: 1.15; margin: 0; padding-right: 2.5rem; }
.p17-consent__fenster h3 { font-family: var(--p17-font-body); font-size: 1rem; font-weight: 600; margin: 0; }
.p17-consent__fenster p { margin: 0 0 .5rem; font-size: .9375rem; line-height: 1.5; }
.p17-consent__x { position: absolute; right: .5rem; top: .5rem; width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: transparent; color: var(--p17-ink); }
.p17-consent__x:hover { background: var(--p17-feld-soft); }
.p17-consent__einstellungen { display: grid; gap: .5rem; border-top: 1px solid var(--p17-line); padding-top: .75rem; }
.p17-consent__kategorie { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem; align-items: start; }
.p17-consent__kategorie input { width: 1.25rem; height: 1.25rem; margin-top: .2rem; accent-color: var(--p17-feld-strong); }
.p17-consent__kategorie label { display: grid; gap: .125rem; }
.p17-consent__kategorie span { font-size: .875rem; color: var(--p17-ink-muted); }
.p17-consent__knoepfe { display: grid; gap: .5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.p17-consent__knopf {
  min-height: 48px; padding: .625rem 1rem; font: inherit; font-weight: 600; font-size: 1rem;
  background: var(--p17-feld); color: var(--p17-on-feld); border: 2px solid var(--p17-feld);
}
.p17-consent__knopf:hover { background: var(--p17-feld-strong); border-color: var(--p17-feld-strong); }
.p17-consent__knopf--neben { grid-column: 1 / -1; background: var(--p17-surface); color: var(--p17-ink); border-color: var(--p17-line-strong); }
.p17-consent__knopf--neben:hover { background: var(--p17-feld-soft); border-color: var(--p17-line-strong); }
.p17-consent__knopf[hidden] { display: none; }
.p17-consent__links { font-size: .875rem; margin: 0 !important; }
.p17-consent button:focus-visible, .p17-consent a:focus-visible, .p17-consent input:focus-visible { outline: var(--p17-focus-width, 3px) solid var(--p17-focus); outline-offset: 2px; }
.p17-consent-offen, .p17-consent-offen body { overflow: hidden; }
@media (max-width: 24rem) { .p17-consent__knoepfe { grid-template-columns: minmax(0, 1fr); } .p17-consent__fenster { padding: 1.25rem 1rem 1rem; } }
@media (forced-colors: active) { .p17-consent__knopf { border-color: ButtonText; } }

@media print {
  .ak-app, .p17-consent, .p17-telleiste { display: none !important; }
}