/* BAO Selbstauskunft 0.2.6
   Frontend-spezifisches Formularlayout. Farben/Buttons bleiben bei Joomla/BAO-Zentralklassen. */
.bao-self-form-wrap{max-width:980px;margin:0 auto;padding:0 .5rem;box-sizing:border-box}
.bao-self-header{margin:0 0 1.1rem}
.bao-self-header h1{margin:0 0 .35rem;font-size:clamp(1.8rem,4vw,2.35rem);line-height:1.15}
.bao-self-header p{margin:.25rem 0;line-height:1.5}
.bao-required-note{font-size:.92rem;opacity:.72}
.bao-required{color:#b42318}

.bao-section{background:rgba(255,255,255,.96);border:1px solid rgba(0,0,0,.12);border-radius:10px;padding:1.15rem 1.35rem;margin:0 0 1rem;box-shadow:0 1px 3px rgba(0,0,0,.04);scroll-margin-top:1rem}
.bao-section-intro{padding-top:1rem;padding-bottom:1rem}
.bao-section h2{font-size:1.3rem;line-height:1.2;margin:0 0 1rem;padding-bottom:.55rem;border-bottom:2px solid rgba(0,0,0,.09)}

/* Desktop: ruhige, durchgehende Formularachse – Label rechts, Eingabe linksbündig daneben. */
.bao-grid{display:block}
.bao-field{display:grid;grid-template-columns:minmax(190px,260px) minmax(0,1fr);column-gap:1rem;align-items:center;margin:0 0 .8rem;min-width:0}
.bao-grid .bao-field{margin-bottom:.8rem}
.bao-field>label{display:block;margin:0;text-align:right;font-weight:600;line-height:1.35}
.bao-field>small{grid-column:2;margin-top:.35rem;line-height:1.4;opacity:.72}
.bao-field textarea+small{grid-column:2}

.bao-field input[type=text],
.bao-field input[type=email],
.bao-field input[type=tel],
.bao-field input[type=date],
.bao-field input[type=number],
.bao-field select,
.bao-field textarea{display:block;width:100%;max-width:560px;min-height:46px;border:1px solid #aeb7c2;border-radius:7px;padding:.62rem .75rem;background:#fff;box-sizing:border-box;font:inherit;line-height:1.35}
.bao-field textarea{min-height:100px;resize:vertical}
.bao-field textarea.bao-textarea-short{min-height:54px;height:54px}
.bao-field input:focus,.bao-field select:focus,.bao-field textarea:focus{outline:2px solid currentColor;outline-offset:1px}

.bao-choices{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1.35rem;min-height:46px}
.bao-choice{display:inline-flex!important;align-items:center;gap:.55rem;min-height:44px;padding:.45rem .7rem;border:1px solid rgba(0,0,0,.18);border-radius:7px;background:rgba(255,255,255,.72);font-weight:600!important;cursor:pointer;user-select:none;box-sizing:border-box}
.bao-choice input{width:1.15rem;height:1.15rem;margin:0;flex:0 0 auto}
.bao-choice:has(input:checked){border-width:2px}

.bao-conditional[hidden]{display:none!important}
.bao-check{grid-column:1/-1;display:flex;gap:.7rem;align-items:flex-start;line-height:1.45;cursor:pointer}
.bao-check input{width:1.2rem;height:1.2rem;margin-top:.15rem;flex:0 0 auto}
.bao-privacy{background:rgba(255,255,255,.8)}
.bao-actions{display:flex;justify-content:flex-end;margin:1.2rem 0 1.8rem}
.bao-submit{min-width:240px;min-height:48px;font-weight:700;font-size:1.02rem}
.bao-self-form :invalid:not(:focus):not(:placeholder-shown){border-color:#b42318}

/* Lange Fragen dürfen auf Desktop mehr Platz für den Text verwenden. */
.bao-field.bao-full>label{max-width:260px;justify-self:end}

/* Mobile first in der Bedienung: Label oben, volle Feldbreite, große Touchflächen. */
@media(max-width:720px){
  .bao-self-form-wrap{padding:0 .15rem}
  .bao-section{padding:1rem .85rem;border-radius:8px;margin-bottom:.8rem}
  .bao-section h2{font-size:1.2rem;margin-bottom:.9rem}
  .bao-field,.bao-grid .bao-field{display:block;margin-bottom:1rem}
  .bao-field>label,.bao-field.bao-full>label{margin:0 0 .4rem;text-align:left!important;justify-self:start!important;max-width:none}
  .bao-field>small,.bao-field textarea+small{display:block;margin-top:.4rem}
  .bao-field input[type=text],.bao-field input[type=email],.bao-field input[type=tel],.bao-field input[type=date],.bao-field input[type=number],.bao-field select,.bao-field textarea{width:100%;max-width:none;min-height:50px;font-size:16px}
  .bao-field textarea{min-height:110px}
  .bao-field textarea.bao-textarea-short{min-height:58px;height:58px}
  .bao-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem;width:100%}
  .bao-choice{justify-content:center;width:100%;min-height:50px;padding:.65rem .7rem}
  .bao-check{font-size:.98rem}
  .bao-actions{position:sticky;bottom:0;z-index:5;margin:1rem 0 0;padding:.7rem 0;background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.97) 24%)}
  .bao-actions .bao-submit{width:100%;min-height:52px}
}


/* Hinweislink bei fehlendem Sachkundenachweis */
.bao-info-link p{margin:.15rem 0 .35rem 0}
.bao-info-link a{font-weight:600;text-decoration:underline}

/* 0.2.6: Sachkundenachweis-Hinweis auch auf schmalen Displays sicher sichtbar. */
.bao-info-link{min-width:0}
.bao-info-link p{display:block!important;width:100%;max-width:100%;overflow-wrap:anywhere}
.bao-info-link a{display:inline;white-space:normal;overflow-wrap:anywhere}
@media(max-width:720px){
  .bao-info-link{display:block!important;width:100%}
  .bao-info-link[hidden]{display:none!important}
}

/* 0.3.2: kompakte Testhilfe – nur serverseitig für Super User ausgegeben. */
.bao-test-tools{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin:0 0 1rem;padding:.7rem .85rem;border:1px dashed rgba(0,0,0,.28);border-radius:8px;background:rgba(0,0,0,.035)}
.bao-test-tools span{font-size:.92rem;opacity:.72;margin-right:auto}
@media(max-width:720px){
  .bao-test-tools{display:grid;grid-template-columns:1fr;gap:.45rem}
  .bao-test-tools .btn{width:100%;min-height:48px}
}