/* Verkaufsakte, Domain-5-Paket vom 31.10.2026. Baut auf site.css und form.css
   auf; form.css setzt Knöpfe mit !important, deshalb stehen die Gegenregeln
   hier mit höherer Spezifität. */

/* Fußzeile: Original auf heller Fläche, nicht freigestellt. */
.va-footer-brand{display:inline-block;background:#fff;padding:12px 16px;border-radius:14px;margin-bottom:24px}
.va-footer-brand img.footer-mark{display:block;width:230px;max-width:100%;max-height:none;height:auto;margin:0;object-fit:contain}
@media(max-width:600px){.va-footer-brand img.footer-mark{width:220px}}

/* Texte */
.va-mikro{margin:12px 0 0;font-size:.86rem;font-weight:600;color:var(--navy)}
.va-zeiten{margin:8px 0 0;font-size:.84rem;color:var(--muted)}
.va-mail{margin:14px 0 0}
.va-mail .text-link{overflow-wrap:anywhere}
.va-mail .text-link .icon,.va-fuss .text-link .icon{flex:none}
.va-fuss{margin-top:16px}
.va-hinweis{margin-top:12px}
.va-hell{color:color-mix(in srgb,#081f38 14%,#f0f0f0)}
.va-anschrift{margin:0 0 4px;font-weight:600;color:var(--navy)}
.va-liste{margin:14px 0 0;padding-left:20px}
.va-mittel{max-width:980px}
.va-alias{display:block;height:0;width:0}
.subhero.text-only .note{text-align:left;max-width:760px;margin-inline:auto}
.subhero.text-only .actions{justify-content:center}
.subhero.text-only .va-mail,.subhero.text-only .va-mikro{text-align:center}
@media(max-width:600px){
  .subhero.text-only .actions{justify-content:flex-start}
  .subhero.text-only .va-mail,.subhero.text-only .va-mikro{text-align:left}
}

/* Knöpfe einer Gruppe stehen in einer Zeile, auch mobil. Wird es eng, steht die
   Beschriftung zweizeilig. */
html body .actions.va-gruppe{flex-wrap:nowrap;align-items:stretch;flex-direction:row}
html body .actions.va-gruppe>.button{flex:0 1 auto;min-width:0;white-space:normal;text-wrap:balance;line-height:1.25;padding-inline:18px}
html body .actions.va-gruppe>.text-link{flex:0 1 auto;min-width:0;align-items:center;justify-content:flex-start;line-height:1.3}
.button.outline{color:var(--navy)}
@media(max-width:600px){
  html body .actions.va-gruppe{gap:10px}
  html body .actions.va-gruppe>.button{flex:1 1 auto;min-width:min-content;padding-inline:8px;gap:6px}
  html body .actions.va-gruppe>.text-link{flex:1 1 auto;min-width:min-content;gap:6px;font-size:.84rem}
  html body .actions.va-gruppe .icon{width:16px;height:16px;flex:none}
}
html body .va-entwurf>.button{white-space:normal}

/* Themenwahl im Entwurf: vier Knöpfe, eine Zeile. */
html body .topic-options{flex-wrap:nowrap;gap:8px}
html body .topic-options .button{flex:1 1 auto;min-width:0;white-space:normal;text-wrap:balance;line-height:1.2;padding-inline:12px}
/* Telefon: Die vier Wortlaute passen lesbar nicht nebeneinander. Die Zeile bleibt
   und rollt, die Rollleiste bleibt sichtbar. */
@media(max-width:600px){
  html body .topic-options{gap:6px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
  html body .topic-options .button{flex:none;white-space:nowrap;padding:8px 14px;font-size:.875rem;min-height:48px;hyphens:manual}
}
.topic-options button[aria-pressed=true]{color:#f0f0f0}

/* Karten */
.topic-card img.va-topic-icon,.va-topic-icon{display:block;flex:none;width:64px;height:64px;object-fit:contain;margin-bottom:16px;border-radius:0}
.service-card img.va-service-icon{display:block;width:96px;height:96px;aspect-ratio:1;object-fit:contain;margin:24px auto 0;border-radius:0}
.service-card{text-align:left}
.va-bedingungen{font-size:.9rem;margin-bottom:0}
.va-bedingungen p:last-child{margin-bottom:0}
.state-item h3{hyphens:manual}
@media(min-width:881px){.state-grid.va-drei{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:880px){.state-grid.va-drei{grid-template-columns:minmax(0,1fr)}}

/* Bilder */
.va-kamera{object-position:65% 50%}
.hero-media .photo img.va-kamera{object-position:65% 50%}
.va-mappe{max-width:520px;margin-inline:auto}
.va-illustration{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain}

/* Tabellen: auf dem Telefon Zeile für Zeile, ohne seitliches Scrollen. */
.va-tabelle{margin-top:6px}
.va-tabelle table{min-width:0}
.va-tabelle+p,.va-tabelle+.actions{margin-top:18px}
.va-tabelle a{text-decoration:underline;text-underline-offset:2px}
.section-navy .va-tabelle{color:var(--ink)}
@media(max-width:700px){
  .va-tabelle thead{display:none}
  .va-tabelle tr,.va-tabelle td{display:block}
  .va-tabelle tr{padding:14px 16px;border-bottom:1px solid var(--line)}
  .va-tabelle tr:last-child{border-bottom:0}
  .va-tabelle td{padding:0;border:0}
  .va-tabelle td+td{margin-top:8px}
  .va-tabelle td+td::before{content:attr(data-label);display:block;font-size:.74rem;font-weight:600;color:var(--muted)}
}

.numbered+p,.numbered+.actions{margin-top:22px}

/* Fragen */
.va-faq-weg{margin:0 0 24px}
.faq-group .faq-answer .va-gruppe{margin-top:12px}

/* Beispielakte */
.va-demo{margin-top:32px;min-width:0}
html body .demo-tools{display:flex;flex-direction:row;flex-wrap:nowrap;gap:10px}
html body .demo-tools .button{flex:0 1 auto;width:auto;min-width:min-content;white-space:normal;text-wrap:balance;line-height:1.25}
@media(max-width:600px){
  html body .demo-tools .button{flex:1 1 auto;padding:9px 8px;font-size:.76rem}
}

/* Sieben Themen: auf dem Telefon untereinander, sonst bricht „Wohnflächenberechnung“
   mitten im Wort. */
@media(max-width:600px){.demo-doc-list{grid-template-columns:minmax(0,1fr)}.draft-text{min-height:23em}}

/* Kontaktblock */
.contact-panel h2{overflow-wrap:break-word}
@media(max-width:360px){
  .contact-panel>div{padding:22px 18px}
}