/* Werteinschätzung, Domain-6-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. */

/* Texte */
.we-mikro{margin:12px 0 0;font-size:.9rem;font-weight:600;color:var(--navy)}
.check-cta .we-mikro{color:#f0f0f0}
.we-notiz{margin-top:22px;max-width:77ch;padding:16px 20px;border-left:4px solid var(--gold);background:color-mix(in srgb,#081f38 5%,#f0f0f0);border-radius:0 14px 14px 0;color:var(--navy)}
.we-weiter{margin-top:22px}
.we-liste{padding-left:1.3em;margin-block:18px}
.we-liste li+li{margin-top:8px}
.we-frage{color:var(--navy)!important;margin-bottom:8px}
.hero-copy .next-note,.inner-hero .next-note{font-size:.9rem;max-width:62ch}
.we-zitat{margin:20px 0;padding:16px 22px;border-left:4px solid var(--gold);background:#f0f0f0;border-radius:0 14px 14px 0;color:var(--navy);font-weight:600}
.we-spanne p:first-child strong{display:block;font-size:clamp(1.5rem,2.4vw,2rem);letter-spacing:-.02em}
.we-ohne-js{margin:0;font-size:.95rem;color:var(--navy)}
.we-nach{margin-top:26px}
.we-verkauf .section-head{margin-bottom:0}
.we-verkauf{padding-bottom:20px}
.we-leistungen{padding-top:40px}

/* Startseite: Bild ohne Ergebnisfläche, drei Punkte, elf Anlässe */
.we-hero-bild{padding-bottom:0}
.we-punkte .item+.item{margin-top:18px}
.we-punkte .item h3{font-size:1.06rem;margin-bottom:6px}
.we-schritte{list-style:none;margin:0;padding:0}
/* Nie ein Element allein in der letzten Zeile: elf Anlässe in drei Spalten,
   die drei Verkaufssituationen nebeneinander, darunter einspaltig. */
.we-anlaesse{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px}
#verkaufssituationen .situation-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1020px){.we-anlaesse,#verkaufssituationen .situation-grid{grid-template-columns:1fr}}
.we-anlaesse li{border-top:1px solid color-mix(in srgb,#081f38 15%,#f0f0f0);padding:16px 0}
.we-anlaesse .link-arrow{font-size:1rem}
.section-steps .step-note p{color:color-mix(in srgb,#081f38 14%,#f0f0f0)}

/* Symbole der F40-Familie: 56 bis 64 px statt der alten Sondergrößen */
.example-next .icon{width:56px;height:56px}
.service .icon{width:56px;height:56px}

/* Tabelle im Beispiel; auf dem Telefon zeilenweise */
.we-tabelle{margin-top:8px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#f0f0f0}
.we-tabelle table{width:100%;border-collapse:collapse;font-size:.97rem}
.we-tabelle th{text-align:left;background:var(--navy);color:#f0f0f0;font-weight:600;padding:14px 18px}
.we-tabelle td{padding:14px 18px;border-top:1px solid var(--line);vertical-align:top;color:var(--muted);line-height:1.7}
.we-tabelle td:first-child{color:var(--navy);font-weight:600;width:42%}
@media(max-width:640px){
  html body .we-tabelle table,html body .we-tabelle tbody,html body .we-tabelle tr,html body .we-tabelle td{display:block;width:auto;overflow:visible}
  .we-tabelle thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .we-tabelle tr{border-top:1px solid var(--line);padding:14px 16px}
  .we-tabelle tr:first-child{border-top:0}
  html body .we-tabelle td,html body .we-tabelle td:first-child{border:0;padding:0;width:auto}
  .we-tabelle td+td{margin-top:6px}
  .we-tabelle td::before{content:attr(data-label);display:block;font-size:.78rem;font-weight:600;color:var(--muted);margin-bottom:2px}
}

/* Kontaktwege als drei Karten */
.we-wege .card h3{font-size:1.25rem;margin-bottom:14px}
.we-wege .actions{margin-top:4px}
.we-wege .button{width:100%}

/* Umrandeter Knopf neben dem goldenen. form.css färbt jeden .button ohne
   .secondary gold - deshalb trägt er die Klasse zusätzlich. */
html body .button.we-neben{background:transparent!important;color:var(--navy)!important;border:1px solid var(--navy)!important;box-shadow:none!important}
html body .button.we-neben:hover{background:color-mix(in srgb,#081f38 6%,#f0f0f0)!important}
html body .check-cta .button.we-neben,html body .section-steps .button.we-neben{color:#f0f0f0!important;border-color:#f0f0f0!important}
html body .check-cta .button.we-neben:hover{background:color-mix(in srgb,#f0f0f0 12%,#081f38)!important}
html body .check-cta .button.we-neben .ui-icon{filter:brightness(0) invert(1)}
.button.we-neben .ui-icon{width:20px;height:20px}

/* Knöpfe nie unter 14 px (Bestand: 12,6 bis 13,8 px auf schmalen Geräten) */
html body .button{font-size:.9375rem}
html body .desktop-nav .button{font-size:.875rem;max-width:230px;line-height:1.25}
html body .mobile-cta .button{font-size:.9375rem}

/* Knöpfe einer Gruppe stehen in einer Zeile, auch mobil. Wird es eng, steht
   die Beschriftung zweizeilig. Gemessen bei 14 px: „besser einschätzen“
   132 px, „Per WhatsApp“ 97 px - bei 320 px Breite bleiben 280 px für beide. */
html body .actions.we-gruppe{flex-wrap:nowrap;align-items:stretch;gap:14px}
html body .actions.we-gruppe>.button{flex:0 1 auto;min-width:0;white-space:normal;text-wrap:balance;line-height:1.25}
.we-gruppe+.we-weiter{margin-top:14px}
.we-tel .ui-icon{width:20px;height:20px}
@media(max-width:1020px){
  html body .actions.we-gruppe{gap:8px}
  html body .actions.we-gruppe>.button{padding:10px 10px;gap:8px;min-height:52px}
  html body .actions.we-gruppe.we-2>.button.button-primary{flex:0 0 calc((100% - 8px) * .56)}
  html body .actions.we-gruppe.we-2>.button.we-neben{flex:0 0 calc((100% - 8px) * .44)}
  html body .actions.we-gruppe.we-2>.button-primary .ui-icon{display:none}
  html body .actions.we-gruppe>.button{font-size:.875rem}
  .check-cta .cta-grid{display:block}
  .check-cta .cta-panel{margin-top:30px;max-width:620px}
}
/* Schmale Telefone: Die Fläche um die Knöpfe gibt ihre Ränder ab, damit beide
   Beschriftungen zweizeilig bleiben. */
@media(max-width:440px){
  html body .check-cta .cta-panel{padding:20px 0 0;border:0;border-top:1px solid color-mix(in srgb,#081f38 75%,#f0f0f0);border-radius:0;background:transparent}
}