@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
 
  :root{
    --navy-dark: #16204A;
    --navy: #1E2E6B;
    --navy-light: #34459C;
    --orange: #E07B39;
    --orange-dark: #C4642B;
    --yellow: #F4C430;
    --paper: #EAE6E0;
    --white: #FFFFFF;
    --ink: #1B1B1B;
    --muted: #6B6F7A;
    --green: #3F9A5C;
    --red: #C94B3F;
    --border: #E2DED6;
  }
 
  *{box-sizing:border-box; margin:0; padding:0;}
 
  /* body{
    background:var(--paper);
    color:var(--ink);
    font-family:'Inter', sans-serif;
    min-height:100vh;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding:32px 16px;
  } */
 
    .elektro-check-section {
    padding: 60px 20px;
    display: flex;
    justify-content: center; /* Zentriert horizontal */
    align-items: center;     /* Zentriert vertikal (falls nötig) */
    }

  .device{
    width:100%;
    max-width:640px;
    background:var(--white);
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 2px 6px rgba(22,32,74,0.06), 0 12px 32px rgba(22,32,74,0.08);
  }
 
  /* header */
  .head{
    padding:26px 30px 20px;
  }
  .eyebrow{
    font-size:12px;
    font-weight:700;
    letter-spacing:0.08em;
    color:var(--muted);
    text-transform:uppercase;
  }
  .sub{
    color:var(--muted);
    font-size:14px;
    margin-top:10px;
    max-width:50ch;
    line-height:1.5;
  }
 
  /* progress */
  .trace{
    display:flex;
    align-items:center;
    padding:0 30px 22px;
    gap:0;
  }
  .node{
    width:10px; height:10px;
    border-radius:50%;
    background:var(--border);
    flex-shrink:0;
    transition:background .3s;
  }
  .node.done{background:var(--green);}
  .node.current{background:var(--orange); box-shadow:0 0 0 4px rgba(224,123,57,0.16);}
  .wire{
    flex:1;
    height:2px;
    background:var(--border);
    transition:background .3s;
  }
  .wire.done{background:var(--green);}
 
  .stage{
    padding:0 30px 30px;
    min-height:220px;
  }
  .stage-label{
    font-size:12px;
    font-weight:700;
    color:var(--navy-light);
    letter-spacing:0.06em;
    text-transform:uppercase;
    margin-bottom:12px;
  }
  .q{
    font-size:18px;
    font-weight:700;
    margin-bottom:18px;
    line-height:1.4;
    color:var(--navy-dark);
  }
 
  .options{
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .opt{
    background:var(--white);
    border:1.5px solid var(--navy);
    color:var(--navy);
    text-align:left;
    padding:14px 18px;
    border-radius:8px;
    font-size:15px;
    font-weight:600;
    font-family:inherit;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:space-between;
    transition:background .15s, color .15s;
  }
  .opt:hover{background:var(--navy); color:var(--white);}
  .opt:hover .arrow{color:var(--white);}
  .opt:focus-visible{outline:2px solid var(--orange); outline-offset:2px;}
  .opt .arrow{
    color:var(--navy-light);
    font-size:15px;
    transition:color .15s;
  }
 
  .back-row{margin-top:18px;}
  .back{
    background:none;
    border:none;
    color:var(--muted);
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    padding:4px 0;
  }
  .back:hover{color:var(--ink);}
 
  /* result card */
  .report{
    border:1px solid var(--border);
    border-radius:10px;
    overflow:hidden;
  }
  .report-head{
    padding:12px 18px;
    font-size:12px;
    font-weight:700;
    letter-spacing:0.06em;
    text-transform:uppercase;
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
  .report-head.safe{background:rgba(63,154,92,0.1); color:var(--green);}
  .report-head.warn{background:rgba(224,123,57,0.1); color:var(--orange-dark);}
  .report-head.danger{background:rgba(201,75,63,0.12); color:var(--red);}
 
  .report-body{
    padding:20px 20px 22px;
    background:var(--paper);
  }
  .diag-title{
    font-size:17px;
    font-weight:800;
    margin-bottom:10px;
    color:var(--navy-dark);
  }
  .diag-text{
    font-size:14.5px;
    color:#3F4250;
    line-height:1.6;
    margin-bottom:20px;
  }
  .diag-text strong{color:var(--red);}
 
  .cta-row{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
  }
  .cta{
    flex:1;
    min-width:200px;
    background:var(--orange);
    color:var(--white);
    font-weight:700;
    font-size:15px;
    padding:14px 18px;
    border:none;
    border-radius:8px;
    cursor:pointer;
    text-align:center;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    transition:background .15s;
  }
  .cta:hover{background:var(--orange-dark);}
  .cta.secondary{
    background:var(--white);
    border:1.5px solid var(--navy);
    color:var(--navy);
    flex:none;
    min-width:auto;
    padding:14px 22px;
  }
  .cta.secondary:hover{background:var(--navy); color:var(--white);}
 
  .restart{margin-top:16px; text-align:center;}
  .restart button{
    background:none; border:none; color:var(--muted);
    font-size:12.5px; font-weight:600; cursor:pointer;
  }
  .restart button:hover{color:var(--ink);}
 
  textarea{
    width:100%;
    background:var(--white);
    border:1.5px solid var(--border);
    border-radius:8px;
    color:var(--ink);
    font-family:inherit;
    font-size:14.5px;
    padding:14px 16px;
    resize:vertical;
    min-height:80px;
    margin-bottom:14px;
  }
  textarea:focus-visible{outline:2px solid var(--orange);}
 
  .note{
    padding:14px 30px 22px;
    font-size:11px;
    color:#A7ABB5;
    letter-spacing:0.02em;
    border-top:1px solid var(--border);
  }
 
  @media (prefers-reduced-motion: reduce){
    *{transition:none !important;}
  }