/* Styles für den UST-Abstandsrechner auf ust-beamer.de
   Ablage: /wp-content/uploads/ust-rechner/rechner.css
   Nach Änderungen ?v= in der Seite hochzählen. */
.ustbr{
  --ustbr-ground:#101E2B;
  --ustbr-ground-2:#17293a;
  --ustbr-cone:#E9C46A;
  --ustbr-signal:#235D8C;
  --ustbr-signal-lift:#5b9bd0;
  --ustbr-paper:#f3f1ec;
  --ustbr-muted:#9aa9b8;
  background:var(--ustbr-ground);
  color:var(--ustbr-paper);
  padding:clamp(20px,4vw,34px);
  border-radius:3px;
  margin:2.2em 0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.55;
}
.ustbr *,.ustbr *::before,.ustbr *::after{box-sizing:border-box;}
.ustbr__head{max-width:60ch;}
.ustbr__title{
  font-family:Lora,Georgia,serif;font-weight:600;
  font-size:clamp(1.35rem,3.4vw,1.75rem);line-height:1.25;
  color:var(--ustbr-paper);margin:0 0 .5em;
}
.ustbr__lead{color:var(--ustbr-muted);margin:0 0 1.6em;font-size:.94rem;}

.ustbr__grid{display:grid;gap:clamp(20px,4vw,38px);grid-template-columns:1fr;}
@media(min-width:820px){.ustbr__grid{grid-template-columns:minmax(240px,300px) 1fr;}}

.ustbr__field{border:0;padding:0;margin:0 0 1.4em;min-width:0;}
.ustbr__label{
  display:block;font-size:.8rem;letter-spacing:.01em;
  color:var(--ustbr-cone);margin:0 0 .45em;padding:0;font-weight:600;
}
.ustbr__select,.ustbr__input{
  width:100%;background:var(--ustbr-ground-2);color:var(--ustbr-paper);
  border:1px solid rgba(233,196,106,.3);border-radius:2px;
  padding:.6em .7em;font:inherit;font-size:.95rem;
}
.ustbr__select:focus-visible,.ustbr__input:focus-visible,
.ustbr__segbtn input:focus-visible+span,.ustbr__radio input:focus-visible+span,
.ustbr__chip:focus-visible{outline:2px solid var(--ustbr-cone);outline-offset:2px;}
.ustbr__note{font-size:.78rem;color:var(--ustbr-muted);margin:.5em 0 0;}

.ustbr__seg{display:flex;gap:6px;}
.ustbr__segbtn{flex:1;}
.ustbr__segbtn input{position:absolute;opacity:0;width:0;height:0;}
.ustbr__segbtn span{
  display:block;text-align:center;padding:.55em .3em;font-size:.83rem;
  background:var(--ustbr-ground-2);border:1px solid rgba(233,196,106,.22);
  border-radius:2px;cursor:pointer;color:var(--ustbr-muted);
}
.ustbr__segbtn input:checked+span{
  background:var(--ustbr-signal);border-color:var(--ustbr-signal-lift);color:#fff;
}
.ustbr__radios{margin-top:.7em;display:grid;gap:.35em;}
.ustbr__radio{display:flex;align-items:flex-start;gap:.5em;font-size:.85rem;cursor:pointer;color:var(--ustbr-paper);}
.ustbr__radio input{margin:.28em 0 0;accent-color:var(--ustbr-cone);flex:none;}
.ustbr__radio.is-disabled{opacity:.4;cursor:not-allowed;}

.ustbr__chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:.7em;}
.ustbr__chip{
  background:transparent;border:1px solid rgba(233,196,106,.3);
  color:var(--ustbr-muted);border-radius:999px;padding:.3em .8em;
  font:inherit;font-size:.8rem;cursor:pointer;
}
.ustbr__chip[aria-pressed="true"]{background:var(--ustbr-cone);color:var(--ustbr-ground);border-color:var(--ustbr-cone);}

.ustbr__figurewrap{margin:0 0 1.4em;}
.ustbr__figure{width:100%;height:auto;display:block;}
.ustbr__caption{font-size:.75rem;color:var(--ustbr-muted);margin:.6em 0 0;}

.ustbr__readout{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:1px;background:rgba(233,196,106,.18);border:1px solid rgba(233,196,106,.18);margin:0;
}
.ustbr__cell{background:var(--ustbr-ground);padding:.85em .9em;margin:0;}
.ustbr__cell dt{font-size:.74rem;color:var(--ustbr-muted);margin:0 0 .25em;}
.ustbr__cell dd{
  margin:0;font-family:Lora,Georgia,serif;font-size:1.35rem;line-height:1.15;
  color:var(--ustbr-paper);font-variant-numeric:tabular-nums;
}
.ustbr__cell dd small{font-size:.62em;color:var(--ustbr-muted);font-family:inherit;}
.ustbr__cell--hero dd{color:var(--ustbr-cone);font-size:1.85rem;}

.ustbr__warn{
  margin:1em 0 0;padding:.75em .9em;font-size:.85rem;
  background:rgba(233,196,106,.1);border-left:3px solid var(--ustbr-cone);color:var(--ustbr-paper);
}
.ustbr__source{font-size:.75rem;color:var(--ustbr-muted);margin:1.2em 0 0;}
.ustbr__fehler{padding:1em;font-size:.9rem;color:var(--ustbr-paper);}
@media(prefers-reduced-motion:no-preference){
  .ustbr__cone,.ustbr__box,.ustbr__dim{transition:all .18s ease-out;}
}

/* Generierte Tabelle, steht außerhalb des dunklen Blocks im Fließtext */
.ustbr-tab table{width:100%;border-collapse:collapse;font-size:.92rem;}
.ustbr-tab th,.ustbr-tab td{padding:.55em .6em;border-bottom:1px solid rgba(0,0,0,.12);text-align:left;vertical-align:top;}
.ustbr-tab thead th{border-bottom:2px solid #235D8C;font-size:.85rem;}
.ustbr-tab tbody tr:nth-child(odd){background:rgba(0,0,0,.025);}
.ustbr-tab small{color:#5a6672;}
.ustbr-tab__stand{font-size:.8rem;color:#5a6672;margin:.7em 0 0;}

/* Mobil: Zeilen als Karten. Bewusst selbst definiert statt dem Theme
   überlassen, damit die Spaltennamen sicher mitkommen. */
@media(max-width:781px){
  .ustbr-tab table,.ustbr-tab tbody,.ustbr-tab tr,.ustbr-tab td{display:block;width:100%;}
  .ustbr-tab thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
  .ustbr-tab tbody tr{
    border:1px solid rgba(0,0,0,.14);border-radius:2px;
    margin:0 0 1em;overflow:hidden;background:none;
  }
  .ustbr-tab tbody tr:nth-child(odd){background:none;}
  .ustbr-tab td{
    border:0;border-top:1px solid rgba(0,0,0,.1);padding:.6em .8em;
  }
  .ustbr-tab td:first-child{
    background:#101E2B;color:#f3f1ec;font-family:Lora,Georgia,serif;
    font-size:1.05rem;border-top:0;padding:.55em .8em;
  }
  .ustbr-tab td::before{
    content:attr(data-label) !important;
    display:block;font-size:.72rem;color:#5a6672;margin:0 0 .15em;
  }
  .ustbr-tab td:first-child::before{content:none !important;}
}