/*
 * bauredakteur.de Betonrechner
 * Die Gestaltung übernimmt nach Möglichkeit die GeneratePress Global Colors
 * der Website. Fallbacks greifen, falls die Variablen nicht vorhanden sind.
 */
.br-wrap{
  --br-accent:var(--accent,#1e73be);
  --br-text:var(--contrast,#222222);
  --br-muted:var(--contrast-2,#575760);
  --br-soft-text:var(--contrast-3,#7a7a7a);
  --br-base:var(--base,#f0f0f0);
  --br-surface:var(--base-2,#f7f8f9);
  --br-white:var(--base-3,#ffffff);
  --br-border:#d9dde1;
  --br-border-strong:#b9c0c6;
  --br-warning:#fff7df;
  --br-warning-border:#bd7c00;
  width:100%;
  max-width:100%;
  margin:2em 0;
  color:var(--br-text);
  font-family:inherit;
  font-size:inherit;
  line-height:inherit;
}
.br-wrap *{box-sizing:border-box}
.br-calculator{
  width:100%;
  overflow:hidden;
  background:var(--br-white);
  border:1px solid var(--br-border);
  border-radius:4px;
  box-shadow:0 1px 2px rgba(0,0,0,.035);
}
.br-head{
  padding:24px 26px 22px;
  background:var(--br-surface);
  border-bottom:1px solid var(--br-border);
}
.br-head .br-main-title{
  margin:0 0 8px;
  color:var(--br-text);
  font-family:inherit;
  font-size:clamp(1.45rem,2.4vw,1.9rem);
  line-height:1.2;
  font-weight:700;
}
.br-head p{
  max-width:720px;
  margin:0;
  color:var(--br-muted);
}
.br-section{
  padding:25px 26px 27px;
  border-bottom:1px solid var(--br-border);
}
.br-section h3{
  margin:0 0 17px;
  color:var(--br-text);
  font-family:inherit;
  font-size:1.18rem;
  line-height:1.3;
  font-weight:700;
}
.br-project-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:9px;
}
.br-project{
  appearance:none;
  min-height:92px;
  padding:14px 12px 13px;
  color:var(--br-text);
  background:var(--br-white);
  border:1px solid var(--br-border);
  border-radius:3px;
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease;
}
.br-project:hover{
  border-color:var(--br-border-strong);
  background:var(--br-surface);
}
.br-project:focus-visible,
.br-tab:focus-visible{
  outline:3px solid color-mix(in srgb,var(--br-accent) 25%,transparent);
  outline-offset:2px;
}
.br-project[aria-pressed="true"]{
  padding:13px 11px 12px;
  background:var(--br-surface);
  border:2px solid var(--br-accent);
  box-shadow:inset 4px 0 0 var(--br-accent);
}
.br-project strong{
  display:block;
  margin-bottom:4px;
  font-weight:700;
  line-height:1.25;
}
.br-project small{
  display:block;
  color:var(--br-muted);
  font-size:.82em;
  line-height:1.35;
}
.br-fields{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:17px 20px;
}
.br-field label{
  display:block;
  margin-bottom:6px;
  color:var(--br-text);
  font-weight:600;
}
.br-input-row{display:flex;width:100%}
.br-field input,
.br-field select{
  width:100%;
  min-height:46px;
  margin:0;
  padding:9px 11px;
  color:var(--br-text);
  background:var(--br-white);
  border:1px solid var(--br-border-strong);
  border-radius:3px;
  box-shadow:none;
  font:inherit;
  line-height:1.25;
}
.br-input-row input{border-radius:3px 0 0 3px}
.br-input-row select{
  width:88px;
  flex:0 0 88px;
  border-left:0;
  border-radius:0 3px 3px 0;
}
.br-unit-static{
  display:flex;
  min-width:72px;
  align-items:center;
  justify-content:center;
  padding:9px 11px;
  color:var(--br-muted);
  background:var(--br-surface);
  border:1px solid var(--br-border-strong);
  border-left:0;
  border-radius:0 3px 3px 0;
}
.br-field input:focus,
.br-field select:focus{
  outline:0;
  border-color:var(--br-accent);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--br-accent) 18%,transparent);
}
.br-help{
  margin-top:6px;
  color:var(--br-muted);
  font-size:.88em;
  line-height:1.45;
}
.br-radio-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
}
.br-radio-card{position:relative;display:block;margin:0}
.br-radio-card input{position:absolute;opacity:0;pointer-events:none}
.br-radio-card span{
  display:block;
  height:100%;
  padding:12px 13px;
  background:var(--br-white);
  border:1px solid var(--br-border);
  border-radius:3px;
  cursor:pointer;
}
.br-radio-card input:focus-visible + span{
  outline:3px solid color-mix(in srgb,var(--br-accent) 25%,transparent);
  outline-offset:2px;
}
.br-radio-card input:checked + span{
  padding:11px 12px;
  background:var(--br-surface);
  border:2px solid var(--br-accent);
}
.br-radio-card b{display:block;color:var(--br-text);font-weight:700}
.br-radio-card small{color:var(--br-muted);font-size:.85em}
.br-material-tabs{
  display:flex;
  gap:0;
  flex-wrap:wrap;
  margin:0 0 20px;
  border-bottom:2px solid var(--br-border);
}
.br-tab{
  appearance:none;
  margin:0 18px -2px 0;
  padding:8px 1px 10px;
  color:var(--br-muted);
  background:transparent;
  border:0;
  border-bottom:2px solid transparent;
  border-radius:0;
  font:inherit;
  font-weight:600;
  cursor:pointer;
}
.br-tab:hover{color:var(--br-text)}
.br-tab[aria-selected="true"]{
  color:var(--br-accent);
  background:transparent;
  border-bottom-color:var(--br-accent);
}
.br-result{
  position:relative;
  padding:28px 26px 29px 31px;
  background:var(--br-surface);
  border-left:5px solid var(--br-accent);
}
.br-result-grid{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr);
  gap:26px;
  align-items:start;
}
.br-big{
  margin:5px 0 8px;
  color:var(--br-text);
  font-size:clamp(2.1rem,5vw,3.35rem);
  line-height:1;
  font-weight:750;
  letter-spacing:-.025em;
}
.br-sub{margin:0 0 20px;color:var(--br-muted)}
.br-stat-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
}
.br-stat{
  padding:12px 13px;
  background:var(--br-white);
  border:1px solid var(--br-border);
  border-radius:3px;
}
.br-stat span{display:block;color:var(--br-muted);font-size:.82em}
.br-stat strong{display:block;margin-top:2px;color:var(--br-text);font-size:1.06em;font-weight:700}
.br-notice{
  margin-top:17px;
  padding:12px 14px;
  color:var(--br-text);
  background:var(--br-white);
  border-left:4px solid var(--br-accent);
}
.br-notice.warn{
  background:var(--br-warning);
  border-left-color:var(--br-warning-border);
}
.br-breakdown{
  padding:16px 17px;
  background:var(--br-white);
  border:1px solid var(--br-border);
  border-radius:3px;
}
.br-breakdown h4{
  margin:0 0 11px;
  color:var(--br-text);
  font-size:1em;
  font-weight:700;
}
.br-breakdown dl{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px 14px;
  margin:0;
}
.br-breakdown dt{color:var(--br-muted);font-weight:400}
.br-breakdown dd{margin:0;color:var(--br-text);font-weight:650;text-align:right}
.br-advanced{
  margin-top:19px;
  padding-top:17px;
  border-top:1px solid var(--br-border);
}
.br-advanced summary{
  color:var(--br-text);
  font-weight:600;
  cursor:pointer;
}
.br-footer-note{
  padding:19px 26px 20px;
  color:var(--br-muted);
  background:var(--br-white);
  border-top:1px solid var(--br-border);
  font-size:.88em;
  line-height:1.5;
}
.br-footer-note strong{color:var(--br-text)}
.br-error-text{
  margin-top:8px;
  color:#a32020;
  font-size:.86em;
  line-height:1.4;
}
.br-hidden{display:none!important}

@media (max-width:820px){
  .br-project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .br-result-grid{grid-template-columns:1fr}
}
@media (max-width:680px){
  .br-fields{grid-template-columns:1fr}
  .br-radio-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:480px){
  .br-wrap{margin:1.5em 0}
  .br-calculator{border-left:0;border-right:0;border-radius:0;box-shadow:none}
  .br-head,.br-section{padding:20px 18px 21px}
  .br-result{padding:23px 18px 24px 21px}
  .br-footer-note{padding:17px 18px}
  .br-project-grid,.br-radio-grid,.br-stat-grid{grid-template-columns:1fr}
  .br-project{min-height:0}
  .br-material-tabs{display:grid;grid-template-columns:1fr}
  .br-tab{margin:0;padding:10px 0;text-align:left;border-bottom:1px solid var(--br-border)}
  .br-tab[aria-selected="true"]{border-bottom:2px solid var(--br-accent)}
  .br-breakdown dl{grid-template-columns:1fr auto}
}
@media (prefers-reduced-motion:reduce){
  .br-project{transition:none}
}