/* Loaded only inside ming-foerderrechner's shadow root. Never add to global assets.
   Pixel lengths retain the supplied 16px rem basis independently of the host theme. */
:host { display:block; min-width:0; }
.calculator-root {
  all:initial;
  display:block;
  font-size:16px;
  font-weight:400;
  letter-spacing:normal;
  text-align:start;
  text-transform:none;
  direction:ltr;
  overflow-x:clip;
  container-type:inline-size;
}
[hidden] { display:none !important; }
  .calculator-root{
    --petrol-900:#141412;
    --petrol-700:#1F1F1D;
    --petrol-500:#3A3A37;
    --amber:#4CB944;
    --amber-deep:#2E8B2A;
    --paper:#F4F5F2;
    --paper-2:#E7E8E3;
    --input-bg:#FFF6DC;
    --input-border:#D8B65A;
    --result-bg:#E6F5E1;
    --result-border:#A9D89C;
    --ink:#1B2320;
    --ink-soft:#5B655F;
    --line:#D8D3C4;
    --danger:#B23A2E;
  }

  *{box-sizing:border-box;}
  .calculator-root{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'MING Calculator Sans', sans-serif;
    line-height:1.5;
    max-width:100vw;
    overflow-wrap:break-word;
    word-break:break-word;
  }
  img, svg{max-width:100%; height:auto;}

  header.hero{
    background:var(--petrol-900);
    color:var(--paper);
    padding:41.6px 24px 54.4px;
    position:relative;
    overflow:hidden;
  }
  header.hero::after{
    content:"";
    position:absolute; inset:0;
    background:
      repeating-linear-gradient(115deg, rgba(76,185,68,0.09) 0 2px, transparent 2px 34px);
    pointer-events:none;
  }
  .hero-inner{max-width:980px;margin:0 auto;position:relative;}
  .eyebrow{
    font-family:'MING Calculator Mono', monospace;
    font-size:12.48px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--amber);
    margin:0 0 12.8px;
  }
  h1{
    font-family:'MING Calculator Sans', sans-serif;
    font-weight:700;
    font-size:clamp(30.4px, 4vw, 46.4px);
    margin:0 0 9.6px;
    letter-spacing:-0.01em;
  }
  .hero p.sub{max-width:56ch; color:#D7D9C9; margin:0; font-size:16.32px;}
  .stand-badge{
    display:inline-block;
    margin-top:22.4px;
    background:var(--amber);
    transform:skewX(-18deg);
    border-radius:2px;
  }
  .stand-badge span{
    display:block;
    transform:skewX(18deg);
    padding:8.8px 20.8px;
    font-family:'MING Calculator Mono', monospace;
    font-size:12.8px;
    color:var(--petrol-900);
  }
  .stand-badge strong{font-weight:600;}

  .hero-ribbon{
    position:absolute; top:0; right:0;
    pointer-events:none;
    z-index:2;
  }
  .hero-ribbon-fill{
    position:absolute; inset:0;
    background:var(--amber);
    clip-path:polygon(0 0, 100% 0, 100% 100%);
  }
  .hero-ribbon-text{
    position:absolute; top:33.33%; left:66.67%;
    color:var(--petrol-900);
    font-family:'MING Calculator Mono', monospace;
    font-weight:600;
    font-size:12.8px;
    line-height:1.35;
    text-align:center;
    white-space:normal;
    overflow-wrap:break-word;
    pointer-events:none;
    z-index:3;
  }

  main{max-width:980px; margin:-32px auto 0; padding:0 24px 64px; position:relative;}

  .tabs-question{font-size:15.68px; font-weight:600; color:var(--petrol-700); margin:0 0 9.6px 3.2px;}
  .tabs{
    display:flex; gap:6.4px; background:var(--paper-2);
    border-radius:14px; padding:6px; margin-bottom:25.6px;
    box-shadow:0 10px 30px -18px rgba(18,48,43,0.35);
  }
  .tab{
    flex:1; text-align:center; padding:13.6px 16px;
    border-radius:10px; cursor:pointer; font-weight:600;
    color:var(--ink-soft); transition:all .18s ease;
    border:none; background:transparent; font-size:15.36px;
    font-family:inherit;
  }
  .tab.active{background:var(--petrol-900); color:var(--paper);}
  @container (max-width:400px){
    .tab{padding:11.2px 8px; font-size:13.76px;}
  }

  .gebaeudetyp-card{
    background:#fff; border-radius:18px; padding:24px 32px;
    box-shadow:0 20px 45px -30px rgba(18,48,43,0.4);
    border:1px solid var(--line);
    margin-bottom:25.6px;
  }
  .gebaeudetyp-card .field label{font-size:15.68px;}

  .panel{
    background:#fff; border-radius:18px; padding:32px;
    box-shadow:0 20px 45px -30px rgba(18,48,43,0.4);
    border:1px solid var(--line);
    display:none;
  }
  .panel.active{display:block;}

  @container (max-width:600px){
    main{padding:0 16px 48px;}
    .gebaeudetyp-card{padding:19.2px 20.8px;}
    .panel{padding:20.8px;}
    .results{padding:19.2px 20.8px;}
    h1{letter-spacing:-0.005em;}
    header.hero{padding:35.2px 19.2px 48px;}
  }

  .section-title{
    font-family:'MING Calculator Sans', sans-serif; font-weight:700; font-size:21.6px;
    margin:0 0 4.8px;
  }
  .section-note{color:var(--ink-soft); font-size:14.72px; margin:0 0 25.6px;}

  .grid{display:grid; grid-template-columns:1fr 1fr; gap:24px 32px;}
  @container (max-width:640px){ .grid{grid-template-columns:1fr;} }

  /* Ersetzt "display:contents" (in älteren iOS-Safari-Versionen unzuverlässig) für die
     Wohn-/Nichtwohngebäude-Umschaltung: die jeweilige Gruppe ist selbst ein Grid-Element,
     das die volle Zeilenbreite einnimmt und ihre Felder intern im selben Muster anordnet. */
  .subgrid-fields{display:grid; grid-template-columns:1fr 1fr; gap:24px 32px; grid-column:1/-1;}
  @container (max-width:640px){ .subgrid-fields{grid-template-columns:1fr;} }
  .subgrid-results{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:19.2px; grid-column:1/-1;}
  @container (max-width:640px){ .subgrid-results{grid-template-columns:1fr;} }

  .field{display:flex; flex-direction:column; gap:6.4px;}
  .field label{font-size:14.08px; font-weight:600; color:var(--petrol-700);}
  .field .hint{font-size:12.48px; color:var(--ink-soft); margin-top:-0.32px;}
  .hint code{background:var(--paper-2); padding:1.6px 5.6px; border-radius:4px; font-family:'MING Calculator Mono', monospace; font-size:0.85em;}

  /* Info-Icon & Tooltip */
  .info-icon{
    position:relative; display:inline-flex; margin-left:5.6px;
    vertical-align:super; line-height:1;
  }
  .info-icon-mark{
    display:grid; place-items:center;
    width:15px; height:15px; border-radius:50%;
    background:var(--petrol-500); color:#fff;
    font-family:'MING Calculator Mono', monospace; font-size:9.92px; font-weight:600;
    line-height:1; text-align:center;
    cursor:help; user-select:none;
  }
  .info-tooltip{
    position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
    background:var(--petrol-900); color:var(--paper);
    font-family:'MING Calculator Sans', sans-serif; font-weight:400; font-size:12.8px; line-height:1.4;
    padding:9.6px 12.8px; border-radius:8px; width:max-content; max-width:260px;
    box-shadow:0 12px 28px -12px rgba(18,35,32,0.5);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .12s ease;
    z-index:10;
  }
  .info-tooltip::after{
    content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
    border:6px solid transparent; border-top-color:var(--petrol-900);
  }
  .info-tooltip.visible{opacity:1; visibility:visible; pointer-events:auto;}
  .info-icon.no-text{display:none;}
  @container (max-width:480px){
    .info-tooltip{max-width:190px; font-size:12.16px; padding:8px 11.2px;}
  }

  input[type=number], input[type=text], input[type=email], input[type=tel], input[type=password], select, textarea{
    background:var(--input-bg);
    border:1.5px solid var(--input-border);
    border-radius:9px;
    padding:10.4px 12.8px;
    font-size:16px;
    font-family:'MING Calculator Mono', monospace;
    color:var(--ink);
  }
  input[type=number]:focus, input[type=text]:focus, input[type=email]:focus, input[type=tel]:focus, input[type=password]:focus, select:focus, textarea:focus{
    outline:2px solid var(--amber-deep); outline-offset:1px;
  }

  .euro-input{display:flex; align-items:center; gap:9.6px;}
  .euro-input input{flex:1; min-width:0;}
  .euro-input span{
    font-family:'MING Calculator Mono', monospace; font-weight:600;
    color:var(--petrol-700); font-size:15.68px;
  }

  .toggle-row{display:flex; gap:8px;}
  .toggle-row button{
    flex:1; padding:9.6px; border-radius:9px; border:1.5px solid var(--input-border);
    background:var(--input-bg); font-family:'MING Calculator Sans'; font-weight:600;
    cursor:pointer; color:var(--ink-soft); font-size:14.4px;
  }
  .toggle-row button.on{background:var(--petrol-700); color:#fff; border-color:var(--petrol-700);}

  .results{
    margin-top:32px; background:var(--result-bg); border:1.5px solid var(--result-border);
    border-radius:16px; padding:25.6px 28.8px;
  }
  .results-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:19.2px;}
  @container (max-width:640px){ .results-grid{grid-template-columns:1fr;} }
  .stat-label{
    font-size:12.8px; color:var(--petrol-700); font-weight:600; margin:0 0 4px;
    line-height:1.3; min-height:2.6em; display:flex; align-items:flex-start;
  }
  .stat-value{
    font-family:'MING Calculator Sans', sans-serif; font-weight:700; font-size:30.4px; color:var(--petrol-900);
  }
  .stat-value small{font-family:'MING Calculator Mono'; font-size:16px; font-weight:500;}
  .results-subheading{
    grid-column:1/-1; font-family:'MING Calculator Mono'; font-size:12px; text-transform:uppercase;
    letter-spacing:0.05em; color:var(--ink-soft); margin:6.4px 0 -0.64px; padding-top:12.8px;
    border-top:1px solid var(--line);
  }
  .results-subheading:first-child{border-top:none; padding-top:0; margin-top:0;}
  .stat-subnote{font-size:12.48px; color:var(--ink-soft); font-weight:500; margin:4.8px 0 0;}

  .note-box{
    margin-top:19.2px; padding:13.6px 16px; border-radius:10px;
    background:#FBEFDD; border:1px solid var(--input-border); font-size:13.6px; color:#6B4E12;
  }

  .charts{display:grid; grid-template-columns:1.3fr 1fr; gap:24px; margin-top:28.8px;}
  @container (max-width:720px){ .charts{grid-template-columns:1fr;} }
  .chart-card{background:#fff; border:1px solid var(--line); border-radius:14px; padding:19.2px;}
  .chart-card h3{
    font-family:'MING Calculator Mono'; font-size:13.12px; text-transform:uppercase;
    letter-spacing:0.06em; color:var(--ink-soft); margin:0 0 12.8px; font-weight:600;
  }
  canvas{max-height:260px; max-width:100%;}

  .report-actions{display:flex; flex-direction:column; align-items:flex-end; gap:14.4px; margin-top:25.6px;}
  .report-actions-buttons{display:flex; gap:11.2px; flex-wrap:wrap; justify-content:flex-end;}
  .btn-report{display:inline-flex; align-items:center; gap:8px;}
  .btn-report svg{width:16px; height:16px; flex-shrink:0;}
  @container (max-width:480px){
    .report-actions{align-items:stretch;}
    .report-actions-buttons{flex-direction:column;}
    .report-actions-buttons .btn{width:100%; justify-content:center;}
  }

  .report-queue-list{display:none; flex-direction:column; gap:8px; width:100%;}
  .report-queue-item{
    display:flex; align-items:center; justify-content:space-between; gap:12.8px;
    background:var(--paper-2); border-radius:9px; padding:9.6px 14.4px;
    font-size:13.6px; color:var(--petrol-700);
  }
  .report-queue-item .rq-label{color:var(--ink-soft); font-weight:400;}
  .report-queue-item button{
    background:none; border:none; color:var(--danger); font-weight:700;
    cursor:pointer; font-size:16.8px; line-height:1; padding:0 4.8px; flex-shrink:0;
  }

  footer{
    max-width:980px; margin:0 auto; padding:12.8px 24px 48px;
    display:flex; justify-content:flex-end; align-items:center;
    color:var(--ink-soft); font-size:13.12px;
  }
  footer a{color:var(--petrol-700); font-weight:600; text-decoration:none; cursor:pointer;}
  footer a:hover{text-decoration:underline;}

  .panel-footnote{margin-top:19.2px;}
  .panel-footnote p{font-size:13.12px; color:var(--ink-soft); margin:0 0 6.4px; line-height:1.5;}
  .panel-footnote p:last-child{margin-bottom:0;}

  /* Admin overlay */
  .overlay{
    position:fixed; inset:0; background:rgba(18,35,32,0.55);
    display:none; align-items:center; justify-content:center; padding:24px; z-index:50;
  }
  .overlay.active{display:flex;}
  .admin-box{
    background:#fff; border-radius:16px; padding:32px; max-width:640px; width:100%;
    max-height:86vh; overflow-y:auto;
  }
  @container (max-width:600px){
    .overlay{padding:9.6px;}
    .admin-box{padding:19.2px; border-radius:12px; max-height:92vh;}
    fieldset{padding:12.8px 14.4px;}
  }
  .admin-box h2{font-family:'MING Calculator Sans', sans-serif; font-weight:700; margin-top:0;}
  .admin-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px 22.4px; margin:19.2px 0;}
  @container (max-width:640px){ .admin-grid{grid-template-columns:1fr;} }
  .admin-grid label{font-size:12.8px; color:var(--petrol-700); font-weight:600; display:block; margin-bottom:4.8px;}
  .admin-grid input{width:100%; padding:8px 9.6px; border:1px solid var(--line); border-radius:7px; font-family:'MING Calculator Mono';}
  .admin-actions{display:flex; gap:11.2px; margin-top:19.2px; flex-wrap:wrap;}
  .consent-row{
    display:flex; align-items:flex-start; gap:9.6px;
    margin-top:16px; font-size:13.76px; color:var(--ink); line-height:1.4;
  }
  .consent-row input[type="checkbox"]{
    width:18px; height:18px; margin-top:2.4px; flex-shrink:0; accent-color:var(--petrol-900); cursor:pointer;
  }
  .consent-row label{cursor:pointer;}
  .consent-row a{color:var(--petrol-700); font-weight:600;}

  .captcha-row{
    margin-top:16px; background:var(--paper-2); border-radius:9px; padding:14.4px;
  }
  .captcha-row label{font-size:13.76px; font-weight:600; color:var(--petrol-700); display:block; margin-bottom:8px;}
  .captcha-image-wrap{display:flex; align-items:center; gap:9.6px;}
  .captcha-image-wrap canvas{border-radius:6px; display:block; box-shadow:0 4px 12px -4px rgba(18,35,32,0.4);}
  .captcha-refresh{
    background:var(--petrol-900); color:#fff; border:none; border-radius:6px;
    width:36px; height:36px; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
  }
  .captcha-refresh:hover{background:var(--petrol-700);}
  .captcha-refresh svg{width:16px; height:16px;}
  .captcha-row input{width:100%; margin-top:9.6px;}

  .admin-tabs{
    display:flex; gap:4.8px; background:var(--paper-2); border-radius:11px;
    padding:5px; margin-bottom:22.4px; flex-wrap:wrap;
  }
  .admin-tab{
    flex:1; min-width:90px; text-align:center; padding:9.6px 8px;
    border-radius:8px; cursor:pointer; font-weight:600; font-size:13.12px;
    color:var(--ink-soft); border:none; background:transparent; font-family:inherit;
  }
  .admin-tab.active{background:var(--petrol-900); color:#fff;}
  .admin-tab-panel{display:none;}
  .admin-tab-panel.active{display:block;}
  @container (max-width:480px){ .admin-tab{min-width:70px; font-size:11.52px; padding:8.8px 4.8px;} }
  .btn{
    padding:11.2px 19.2px; border-radius:9px; border:none; cursor:pointer;
    font-weight:600; font-family:inherit; font-size:14.72px;
  }
  .btn-primary{background:var(--petrol-900); color:#fff;}
  .btn-secondary{background:var(--paper-2); color:var(--ink);}
  .btn-ghost{background:transparent; color:var(--ink-soft); text-decoration:underline;}
  .btn-amber{background:var(--amber); color:var(--petrol-900);}
  .btn-amber:hover{background:var(--amber-deep); color:#fff;}
  .btn-small{padding:7.2px 16px; font-size:13.6px; flex-shrink:0; white-space:nowrap;}
  .note-upsell{display:flex; flex-wrap:wrap; align-items:center; gap:14.4px; justify-content:space-between;}
  .note-upsell span{flex:1; min-width:220px;}
  .admin-hint{font-size:12.8px; color:var(--ink-soft); background:var(--paper-2); padding:12.8px 16px; border-radius:9px; margin-top:16px;}
  fieldset{border:1px solid var(--line); border-radius:10px; padding:16px 19.2px; margin-bottom:16px;}
  legend{font-family:'MING Calculator Mono'; font-size:12.48px; text-transform:uppercase; letter-spacing:0.06em; color:var(--petrol-700); padding:0 6.4px;}

  .admin-info-row{margin-bottom:16px;}
  .admin-info-row label{font-size:12.8px; color:var(--petrol-700); font-weight:600; display:block; margin-bottom:4.8px;}

  .rte-toolbar{display:flex; gap:5.6px; align-items:center; margin-bottom:4.8px; flex-wrap:wrap;}
  .rte-btn{
    font-family:'MING Calculator Sans', sans-serif; font-size:12.48px; line-height:1;
    padding:5.6px 8.8px; border:1px solid var(--line); border-radius:6px;
    background:#fff; color:var(--petrol-700); cursor:pointer;
  }
  .rte-btn:hover{background:var(--paper-2);}
  .rte-btn.rte-bold{font-weight:700;}
  .rte-fontsize{
    font-family:'MING Calculator Sans', sans-serif; font-size:12.48px;
    padding:5.12px 6.4px; border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--petrol-700);
  }
  .rte-editor{
    width:100%; padding:8.8px 11.2px; border:1px solid var(--line); border-radius:7px;
    font-family:'MING Calculator Sans', sans-serif; font-size:14.08px; min-height:48px;
    background:#fff; line-height:1.4;
  }
  .rte-editor:focus{outline:2px solid var(--amber); outline-offset:1px;}
  .rte-editor a{color:var(--amber-deep); text-decoration:underline;}

  /* Formatierte Infotexte im Nutzerbereich (Tooltip-Blasen & note-boxen) */
  .info-tooltip a{color:var(--amber); text-decoration:underline;}
  .info-tooltip b, .info-tooltip strong{font-weight:700;}
  .note-box a{color:var(--amber-deep); text-decoration:underline;}
  .note-box b, .note-box strong{font-weight:700;}

  .admin-logo-row{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
  .admin-logo-item label{font-size:12.8px; color:var(--petrol-700); font-weight:600; display:block; margin-bottom:6.4px;}
  .admin-logo-preview{
    background:var(--petrol-900); border-radius:8px; padding:12.8px;
    display:flex; align-items:center; justify-content:center; min-height:70px; margin-bottom:8px;
  }
  .admin-logo-preview-light{background:var(--paper-2);}
  .admin-logo-preview img{max-width:100%; max-height:60px; display:block;}
  .admin-logo-item input[type="file"]{font-size:12.8px; width:100%;}
  @container (max-width:640px){ .admin-logo-row{grid-template-columns:1fr;} }

  /* Hinweis, das schmale Smartphone-Bildschirme im Hochformat zum Drehen anregt - eine
     physische Bildschirmdrehung kann eine normale Webseite nicht erzwingen, daher der
     freundliche Hinweis statt eines unzuverlässigen CSS-Dreh-Tricks. */
  .rotate-hint{display:none;}
  @media (max-width:640px) and (orientation:portrait){
    .rotate-hint.show{
      display:flex; align-items:center; gap:11.2px;
      background:var(--petrol-900); color:var(--paper);
      padding:11.2px 16px; font-size:13.76px;
    }
  }
  .rotate-hint svg{width:22px; height:22px; flex-shrink:0; animation:rotateHintSpin 1.8s ease-in-out infinite;}
  .rotate-hint span{flex:1;}
  .rotate-hint button{
    background:transparent; border:1px solid rgba(244,245,242,0.4); color:var(--paper);
    border-radius:6px; padding:4.8px 9.6px; font-size:12.8px; cursor:pointer; flex-shrink:0;
  }
  @keyframes rotateHintSpin{
    0%,100%{transform:rotate(0deg);}
    50%{transform:rotate(-90deg);}
  }
  @keyframes backendSyncSpin{ to{ transform:rotate(360deg); } }
  #backend-sync-overlay{
    position:fixed; inset:0; z-index:9999;
    background:rgba(244,245,242,0.92);
    display:none; align-items:center; justify-content:center;
    flex-direction:column; gap:10px;
    opacity:0; transition:opacity .2s ease;
  }
  #backend-sync-overlay.visible{ display:flex; opacity:1; }
  #backend-sync-overlay .spinner{
    width:28px; height:28px; border-radius:50%;
    border:3px solid var(--paper-2); border-top-color:var(--amber);
    animation:backendSyncSpin .7s linear infinite;
  }
  #backend-sync-overlay .label{ font-size:13px; color:var(--ink-soft); }

/* Native dialogs stay above the site header and keep keyboard focus inside. */
dialog.overlay {
  inset:0; margin:0; border:0; width:100%; height:100%;
  max-width:none; max-height:none; color:var(--ink);
  background:transparent; align-items:flex-start; padding-top:20px;
}
dialog.overlay::backdrop { background:rgba(18,35,32,0.55); }
.overlay .admin-box { max-height:calc(100dvh - 40px); }