/* =========================
   Design Tokens (CSS Vars)
   ========================= */
   :root{
    /* Fonts */
    --font-sans: 'Montserrat', system-ui, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  
    /* Page / Layout */
    --bg-page: #f5f5f5;
    --container-max: 1400px;
    --pad-wrapper: 50px;
    --pad-wrapper-sm: 25px;
    --grid-gap: 25px;
  
    /* Radii */
    --r-8: 8px;
    --r-10: 10px;
    --r-12: 12px;
    --r-16: 16px;
  
    /* Colors */
    --txt: #111;
    --txt-muted: #333;
    --txt-strong: #111827;
    --txt-hint: #475569;
    --txt-muted-2: #667085;
    --link: #4b6cf7;
    --nav-text: #0b0b16;
  
    --border-neutral: #e4e7ec;
    --track: #e5e7eb;
    --sidebar-bg: #eff0fb;
    --sidebar-hover: #e6e8fa;
    --sidebar-active: #d5d9f6;
    --tile-top-bottom: #aeb8fd;
    --tile-head-bg: #fbfbfe;
  
    --accent: #4b6cf7;
    --score-green: #63d49c;
  
    /* Gauge */
    --tick-base: #eff0fb;
  
    /* Nav Tabs */
    --nav-bg: #b8c1ff;
    --nav-hover: #aab4ff;
    --nav-active: #8ea0ff;
  
    /* Glass / Frosted */
    --glass-bg-1: rgba(255,255,255,.92);
    --glass-bg-2: rgba(255,255,255,.82);
    --glass-bd-1: rgba(255,255,255,.9);
    --glass-bd-2: rgba(0,0,0,.06);
    --glass-sat: 160%;
    --glass-blur: 8px;
  
    /* Shadows */
    --shadow-card: 0 12px 30px rgba(0,0,0,.06);
  
    /* Dev Console */
    --console-bg: #0b1020;
    --console-fg: #e6edf3;
    --console-border: rgba(255,255,255,.06);
  
    /* Reusable composite values */
    --glass-fill:
      linear-gradient(180deg, var(--glass-bg-1), var(--glass-bg-2)) padding-box,
      linear-gradient(180deg, var(--glass-bd-1), var(--glass-bd-2)) border-box;
  
    --icon-size: 3rem; /* für .gauge__label .icon-svg */
  }
  

#lmoUrl{ border: none !important; }
  /* =========================
     Base
     ========================= */
  *{ font-family: var(--font-sans); }
  pre{ font-family: var(--font-sans); }
  html{ padding:0; background: none !important; }
  body{
    background: none !important;
    margin:0;
    padding:0;
    display:block !important;
  }
  

  /* =========================
     Wrapper
     ========================= */
  .wrapper{
    margin:0 auto;
    max-width: var(--container-max);
    padding: var(--pad-wrapper);
  }
  .wrapper-alt{
    padding: var(--pad-wrapper-sm);
    max-width: var(--container-max);
  }
  
  /* =========================
     Grid
     ========================= */
  .grid-container{
    display:grid;
    text-align:left;
    grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--grid-gap);
    width:100%;
    margin:0 auto;
  }
  .grid-wrapper{}
  
  /* =========================
     Cards
     ========================= */
  .card{
    position:relative;
    overflow:hidden;
    width:100%;
    margin:0;
    padding:20px;
    border-radius: var(--r-8);
    box-sizing:border-box;
    background: var(--glass-fill);
    border:1px solid transparent;
    backdrop-filter:saturate(var(--glass-sat)) blur(var(--glass-blur));
    -webkit-backdrop-filter:saturate(var(--glass-sat)) blur(var(--glass-blur));
    text-align:center;
    display:flex;
    flex-direction:column;
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .card::before{
    content:"";
    position:absolute; inset:0;
    background:
      radial-gradient(120% 60% at 50% -20%, rgba(255,255,255,.9), rgba(255,255,255,0) 60%),
      linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,0) 40%);
    pointer-events:none;
    border-radius: var(--r-8);
    z-index:1;
  }
  .card::after{
    content:"";
    position:absolute;
    top:-35%; left:-20%;
    width:140%; height:70%;
    background:linear-gradient(to bottom, rgba(255,255,255,.65), rgba(255,255,255,.05));
    transform:rotate(-12deg);
    filter:blur(8px);
    opacity:.8;
    pointer-events:none;
    z-index:1;
  }
  .card:hover{}
  
  .card-header{ display:flex; align-items:center; margin-bottom:1rem; }
  .card-icon{ width:28px; height:28px; margin-right:.5rem; fill:var(--accent); }
  .card-title{ font-size:1rem; font-weight:500; color:var(--txt); }
  
  .card-text{
    line-height:1.3;
    margin-top:.5rem;
    font-size:12px;
    color:var(--txt);
    font-weight:300;
  }
  
  /* =========================
     Gauge
     ========================= */
  .gauge{
    position:relative;
    width:200px;
    height:60px;
    margin:1rem auto;
    margin-top:36px;
    --tick-active: var(--tick-base); /* Start neutral */
  }
  .gauge .tick{
    position:absolute;
    top:50%; left:50%;
    width:8px; height:24px;
    background: var(--tick-base);
    transform-origin:bottom center;
    border-radius:3px;
    transition:background .3s, opacity .18s;
  }
  .gauge .tick.active{ background: var(--tick-active); }
  .gauge .tick:nth-child(1)  { transform: rotate(-90deg) translateY(-60px); }
  .gauge .tick:nth-child(2)  { transform: rotate(-78.75deg) translateY(-60px); }
  .gauge .tick:nth-child(3)  { transform: rotate(-67.5deg) translateY(-60px); }
  .gauge .tick:nth-child(4)  { transform: rotate(-56.25deg) translateY(-60px); }
  .gauge .tick:nth-child(5)  { transform: rotate(-45deg) translateY(-60px); }
  .gauge .tick:nth-child(6)  { transform: rotate(-33.75deg) translateY(-60px); }
  .gauge .tick:nth-child(7)  { transform: rotate(-22.5deg) translateY(-60px); }
  .gauge .tick:nth-child(8)  { transform: rotate(-11.25deg) translateY(-60px); }
  .gauge .tick:nth-child(9)  { transform: rotate(0deg) translateY(-60px); }
  .gauge .tick:nth-child(10) { transform: rotate(11.25deg) translateY(-60px); }
  .gauge .tick:nth-child(11) { transform: rotate(22.5deg) translateY(-60px); }
  .gauge .tick:nth-child(12) { transform: rotate(33.75deg) translateY(-60px); }
  .gauge .tick:nth-child(13) { transform: rotate(45deg) translateY(-60px); }
  .gauge .tick:nth-child(14) { transform: rotate(56.25deg) translateY(-60px); }
  .gauge .tick:nth-child(15) { transform: rotate(67.5deg) translateY(-60px); }
  .gauge .tick:nth-child(16) { transform: rotate(78.75deg) translateY(-60px); }
  .gauge .tick:nth-child(17) { transform: rotate(90deg) translateY(-60px); }
  
  .gauge__label{
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%, -50%);
    display:inline-flex;
    align-items:center;
    pointer-events:none;
  }
  .gauge__label .number{
    font-size:1.5rem;
    font-weight:500;
    color: var(--tick-active, #333);
    z-index:2;
    transition:color .25s ease;
  }
  .gauge__label .icon{ position:absolute; margin-left:-.5rem; }
  .gauge__label .icon-svg{ display:block; width:var(--icon-size); height:var(--icon-size); }
  
  .gauge__label .number::after{ content:'%'; margin-left:2px; }
  
  .gauge__hint{
    font-size:14px;
    line-height:1.35;
    color: var(--txt-hint);
    opacity:0;
    max-height:0;
    transform:translateY(-2px);
    transition:opacity .25s ease, max-height .25s ease, transform .25s ease;
    position:absolute;
    top:155px; left:0; right:0;
    width:100%;
    text-align:center;
    margin:0; padding:0;
  }
  .card.is-done .gauge__hint{ opacity:1; transform:translateY(0); }
  .gauge.is-loading .tick.active{ background: var(--tick-base); }
  
  /* =========================
     Scan Log (Wrapper)
     ========================= */
  .scan-log{
    display:grid;
    gap:50px;
    grid-template-columns:repeat(auto-fit, minmax(100%, 1fr));
    border-top:10px solid var(--tile-top-bottom);
    border-bottom:10px solid var(--tile-top-bottom);
    border-radius: var(--r-8);
    margin-top:24px;
  }
  #tile-log{ display:block; }
  .tile-log-item{ display:block; }
  .tile-log-item h3{
    margin:0;
    font-size:14px;
    font-weight:700;
    display:block;
    background: var(--tile-head-bg);
    padding:40px;
  }
  .tile-log-item pre{
    margin:0;
    white-space:pre-wrap;
    font:12px;
    line-height:1.5em;
    color: var(--txt-muted);
  }
  #tile-log-clear{ margin-top:10px; }
  
  /* =========================
     Toolbar
     ========================= */
  .lmo-toolbar{ width:100%; margin:0 0 18px 0; }
  .lmo-toolbar__form{ display:flex; flex-direction:column; gap:8px; }
  .lmo-inputgroup{
    display:grid;
    grid-template-columns:1fr max-content max-content;
    gap:8px;
    align-items:center;
  }
  .lmo-input{
    width:100%;
    padding:12px 14px;
    border:1px solid var(--border-neutral);
    border-radius: var(--r-12);
    background:#fff;
    font:inherit;
    outline:none;
    box-sizing:border-box;
  }
  .lmo-input:focus{ border-color:#94a3b8; box-shadow:0 0 0 2px rgba(148,163,184,.2); }
  .lmo-select{
    padding:12px 12px;
    border:1px solid var(--border-neutral);
    border-radius: var(--r-12);
    background:#fff;
    font:inherit;
  }
  .lmo-btn{
    padding:12px 16px !important;
    border:0 !important;
    border-radius: var(--r-12);
    background: var(--txt-strong) !important;
	  background-color: var(--txt-strong) !important;
    color:#fff !important;
    font-weight:600 !important;
    cursor:pointer !important;
    transition:transform .03s ease !important;
  }
  .lmo-btn:active{ transform:translateY(1px); }
  .lmo-btn[disabled]{ opacity:.6; cursor:not-allowed; }
  .lmo-toolbar__hints{ min-height:18px; color:#64748b; font-size:13px; padding-left:2px; }
  
  /* =========================
     Overlay (Hover)
     ========================= */
  .card-overlay{
    position:absolute;
    inset:0;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding:12px;
    background: rgba(255,255,255,.33);
    backdrop-filter:saturate(140%) blur(6px);
    -webkit-backdrop-filter:saturate(140%) blur(6px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:none;
    transition:opacity .35s ease, visibility .35s ease;
    z-index:3;
  }
  .card:hover .card-overlay,
  .card:focus-within .card-overlay{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    box-sizing:border-box;
    border:8px solid #92a0ff;
  }
  .card-overlay__content{
    max-width:60ch;
    width:100%;
    font-size:14px;
    line-height:1.45;
    overflow:auto;
    text-align:justify;
    color:#777;
  }
  .card-overlay__content p{ margin:0 0 10px; }
  .card-overlay .card-header{}
  .card-overlay .card-header svg{}
  .card-overlay .absolute-svg svg{
    position:absolute;
    bottom:-50px; right:-50px;
    width:200px;
    z-index:1;
    opacity:.4;
  }
  .card-overlay p{
    z-index:2;
    position:relative;
    color: var(--txt) !important;
    text-align:left !important;
    font-size:12px !important;
    text-shadow:1px 1px 4px var(--bg-page) !important;
  }
  
  /* =========================
     Analyzing State
     ========================= */
  .wrapper-grid{ display:block; position:relative; overflow:hidden; }
  
  .grid-container.analyzing .card{
    opacity:.35;
    transition:opacity .25s ease, transform .2s ease;
    filter:grayscale(10%);
  }
  .grid-container.analyzing .card.is-active,
  .grid-container.analyzing .card.is-done{
    opacity:1; filter:none;
  }
  .grid-container.analyzing .card.is-active{ transform:translateY(-1px); }
  
  /* =========================
     Top area over cards
     ========================= */
  .top-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap: var(--grid-gap);
    align-items:start;
    max-width: var(--container-max);
    margin:0 auto 12px;
  }
  .top-grid__left{ grid-column:span 3; }
  .top-grid__right{ grid-column:span 1; }
  .stack{ display:flex; flex-direction:column; gap:8px; }
  .go-row{
    display:grid;
    grid-template-columns:1fr 180px;
    gap:8px;
  }
 
  @media (max-width:900px){
    .top-grid{ grid-template-columns:1fr; padding:0 25px; }
    .top-grid__left, .top-grid__right{ grid-column:1 / -1; }
  }
  
  /* =========================
     Log grid & responsive
     ========================= */
  #tile-log{
    display:grid;
    grid-template-columns:repeat(1, 1fr);
    gap: var(--grid-gap);
  }
  @media (max-width:900px){
    #tile-log{ grid-template-columns:1fr; }
  }
  
  /* =========================
     Log Shell (Sidebar + Content)
     ========================= */
  .log-shell{
    display:grid;
    grid-template-columns:300px 1fr;
    gap:0;
    background: var(--glass-fill);
    overflow:hidden;
  }
  .log-sidebar{ background: var(--sidebar-bg); padding:0; }
  .log-nav{ display:flex; flex-direction:column; }
  
  .log-nav-item{
    display:flex;
    align-items:center;
    gap:10px;
    padding:0 16px;
    height:50px;
    cursor:pointer;
    user-select:none;
    transition:background .15s ease;
    color: var(--txt);
    text-decoration:none;
  }
  .log-nav-item:hover{ background: var(--sidebar-hover); }
  .log-nav-item.active{ background: var(--sidebar-active); }
  
  .log-nav-item .nav-icon{ width:22px; height:22px; display:grid; place-items:center; }
  .log-nav-item .nav-icon svg{ width:22px; height:22px; }
  .log-nav-item .nav-title{ flex:1; font-size:13px; font-weight:600; letter-spacing:.1px; }
  
  /* Circle score in nav */
  .log-nav-item .nav-score{
    --size:36px;
    position:relative;
    width:var(--size); height:var(--size);
    display:grid; place-items:center;
    font-size:12px; font-weight:700; opacity:.7;
  }
  .log-nav-item .nav-score svg{
    width:100%; height:100%;
    transform:rotate(-90deg);
  }
  .log-nav-item .nav-score .ring-bg{
    fill:none; stroke: var(--track); stroke-width:6; opacity:.95;
  }
  .log-nav-item .nav-score .ring-fg{
    fill:none; stroke: var(--score-color, var(--score-green));
    stroke-width:6; stroke-linecap:round;
    stroke-dasharray:113.097; stroke-dashoffset:113.097;
    transition:stroke-dashoffset .5s ease, stroke .25s ease;
  }
  .log-nav-item .nav-score__label{
    position:absolute; font-weight:700; font-size:11px; line-height:1;
    color: var(--txt); transform:rotate(0deg);
  }
  
  /* Content area: middle logs + right doc */
  .log-content{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap: var(--grid-gap);
    padding:0;
    overflow:visible;
  }
  
  /* Middle column */
  .log-main .log-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap: var(--grid-gap);
  }
  @media (max-width:1100px){
    .log-main .log-grid{ grid-template-columns:1fr; }
  }
  
  /* Right doc column */
  .log-doc{ background: var(--tile-head-bg); }
  .doc-sticky{
    position:sticky;
    top:12px;
    max-height:calc(100vh - 24px);
    max-height: none;
    overflow:auto;
  }
  
  /* Doc panel */
  .doc-panel{
    padding:12px 14px;
    font-size:12px;
    line-height:1.45;
    overflow-wrap: break-word;
    word-break: break-word;
    word-wrap: break-word; /* alte Browser, schadet nix */
    white-space: normal;
  }
  .doc-panel h3, .doc-panel h4, .doc-panel h5{ margin:0; }
  .doc-panel h4{
    font-size:12px;
    font-weight:700;
    color: var(--txt);
    letter-spacing:.2px;
    margin:0 0 8px;
  }
  .doc-panel ul{ margin:6px 0 10px; padding-left:18px; }
  .doc-panel li{ margin:4px 0; }
  .doc-panel a{ color: var(--link); text-decoration:none; 
    overflow-wrap: break-word;
    word-break: break-word;
    word-wrap: break-word; /* alte Browser, schadet nix */
    white-space: normal;
  }
  .doc-panel a:hover{ text-decoration:underline; }
  .doc-panel .muted{ color:#6b7280; }
  .doc-panel .doc-code{
    background:#0b10201a;
    border:1px solid #0b102022;
    border-radius: var(--r-8);
    padding:10px;
    overflow:auto;
    font-size:12px;
  }
  
  /* #docPanel variants */
  #docPanel h3{ font-size:16px; font-weight:800; margin:0; }
  #docPanel h4{ font-size:14px; font-weight:800; margin:12px 0 6px; }
  #docPanel h5{ font-size:13px; font-weight:700; margin:10px 0 6px; }
  #docPanel p { margin:8px 0; color: var(--txt); line-height:1.55;
    overflow-wrap: break-word;
    word-break: break-word;
    word-wrap: break-word; /* alte Browser, schadet nix */
    white-space: normal;
  }
  #docPanel ul{ margin:8px 0 8px 18px; }
  #docPanel li{ margin:4px 0; }
  #docPanel a { color: var(--link); text-decoration:none; }
  #docPanel a:hover{ text-decoration:underline; }
  
  .doc-code{
    background: var(--console-bg);
    color: var(--console-fg);
    border-radius: var(--r-10);
    padding:10px 12px;
    box-shadow: inset 0 0 0 1px var(--console-border);
    overflow:auto;
    font:12px/1.5 var(--font-mono);
  }
  .doc-quote{
    margin:8px 0; padding:8px 10px; border-left:3px solid #cbd5e1;
    background:#f8fafc; color:#334155; border-radius:6px;
  }
  #docPanel kbd{
    display:inline-block; padding:2px 6px; border-radius:6px; border:1px solid #e2e8f0;
    background:#f8fafc; box-shadow:0 1px 0 #fff inset;
    font:11px/1.2 var(--font-mono);
  }
  #docPanel mark{ background:#fff2a8; padding:0 .2em; border-radius:3px; }
  .doc-hr{ border:0; border-top:1px solid #e5e7eb; margin:10px 0; }
  
  /* Only current log item visible on the right */
  #tile-log .tile-log-item{ display:none; }
  #tile-log .tile-log-item.is-current{ display:block; }
  
  /* Log item inner columns */
  .tile-log-item .log-columns{
    display:grid;
    grid-template-columns:1fr 320px;
    gap:18px;
  }
  @media (max-width:900px){
    .log-shell{ grid-template-columns:1fr; }
    .log-grid{ grid-template-columns:1fr; }
    .log-content{ grid-template-columns:1fr; }
    .tile-log-item .log-columns{ grid-template-columns:1fr; }
  }
  
  /* =========================
     Best practise banner
     ========================= */
  .best-practise{
    background: var(--score-green);
    height:auto;
    width:100%;
    box-sizing: border-box;
    padding:12px 14px;
    font-size:12px;
    line-height:1.45;
  }

  .best-practise h3, .best-practise h4, .best-practise h5{ margin:0; color: #fefefe; }
  .best-practise h4{
      font-size:12px;
      font-weight:700;
      color: #fefefe;
      letter-spacing:.2px;
      margin:0 0 8px;
    }
    .best-practise ul{ margin:6px 0 10px; padding-left:18px; }
    .best-practise li{ margin:4px 0; }
    .best-practise a{ color: var(--link); text-decoration:none; }
    .best-practise a:hover{ text-decoration:underline; }
    .best-practise .muted{ color:#6b7280; }
    .best-practise .doc-code{
      background:#0b10201a;
      border:1px solid #0b102022;
      border-radius: var(--r-8);
      padding:10px;
      overflow:auto;
      font-size:12px;
    }


  /* =========================
     Console panel (Dev)
     ========================= */
  .console-panel{
    grid-column:1 / -1;
    background: var(--console-bg);
    color: var(--console-fg);
    border-radius:0;
    box-shadow: inset 0 0 0 1px var(--console-border);
    padding:10px 12px;
    display:flex;
    flex-direction:column;
    min-height:220px;
    max-height:420px;
    overflow:auto;
    font:12px/1.5 var(--font-mono);
  }
  .console-toolbar{
    display:flex; align-items:center; gap:8px;
    padding-bottom:8px; margin-bottom:8px;
    border-bottom:1px solid rgba(255,255,255,.08);
    position:sticky; top:0; background: var(--console-bg); z-index:1;
  }
  .console-title{ font-weight:700; font-size:12px; letter-spacing:.3px; opacity:.9; }
  .console-spacer{ flex:1; }
  .console-btn{
    appearance:none; border:1px solid rgba(255,255,255,.14);
    background:#111a2b; color: var(--console-fg); border-radius: var(--r-8);
    font:600 11px/1 var(--font-mono);
    padding:6px 10px; cursor:pointer;
  }
  .console-btn:hover{ background:#152138; }
  .console-btn:active{ transform: translateY(1px); }
  .console-lines{ white-space:pre-wrap; word-break:break-word; }
  .console-line{ padding:3px 0; }
  .console-time{ color:#8b949e; margin-right:.5em; }
  .console-src{ color:#7ee787; }
  .console-line.log{ color: var(--console-fg); }
  .console-line.info{ color:#a5d6ff; }
  .console-line.warn{ color:#ffd580; }
  .console-line.error{ color:#ffb4ab; }
  .console-line.success{ color:#7ee787; }
  .console-panel::-webkit-scrollbar{ height:10px; width:10px; }
  .console-panel::-webkit-scrollbar-thumb{ background:#22304b; border-radius: var(--r-8); }
  .console-panel::-webkit-scrollbar-track{ background:transparent; }
  @media (max-width:900px){
    .console-panel{ grid-column:1 / -1; }
  }
  
  
  /* =========================
     Timeline (vertical)
     ========================= */
  .timeline{
    position:relative;
    margin:8px 0 0;
    padding-left:44px;
    list-style:none;
  }
  .timeline::before{
    content:"";
    position:absolute;
    left:34px; top:0; bottom:0;
    width:4px; background: var(--track); border-radius:2px;
  }
  .timeline-item{
    position:relative;
    margin:14px 0 40px;
  }
  .timeline-item .dot{
    position:absolute;
    left:-30px; top:0;
    width:36px; height:36px; border-radius:50%;
    background:#fff; border:4px solid var(--dot-color, #e8a72e);
    display:grid; place-items:center;
    font-weight:800; font-size:13px; line-height:1;
    color: var(--txt);
    box-shadow:0 1px 0 rgba(0,0,0,.03);
  }
  .timeline-item .text{
    font-size:14px; line-height:1.6; color: var(--txt);
    padding-left:40px;
  }
  


  /* === LMO Console HTML Highlighter === */
pre.hlhtml { 
  margin: 6px 0 0; 
  white-space: pre;           /* echte Einrückung behalten */
  overflow: auto; 
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12.5px;
  line-height: 1.45;
}
.hl .punct   { color: #b2b9c5; }             /* < > / = */
.hl .doctype { color: #8ab4f8; font-weight:600; }
.hl .tag     { color: #7dd3fc; }             /* Tag-Namen */
.hl .attr    { color: #fca5a5; }             /* Attribut-Namen */
.hl .value   { color: #a7f3d0; }             /* Werte in "" */
.hl .url     { color: #93c5fd; text-decoration: underline dotted; }
.hl .text    { color: #e5e7eb; }             /* Textknoten (selten) */

.hl .cmt         { color:#9ca3af; font-style:italic; 

  display: block;
  background: #4d65ff;
  padding: 4px;
  margin-top: 10px;
  margin-bottom: 0px;
  color: white;
  border-radius: 12px;

}   /* <!-- ... --> */
.hl .cmt.info    { color:#a5b4fc; }
.hl .cmt.ok      { color:#86efac; }
.hl .cmt.tip     { color:#fde68a; }
.hl .cmt.warn    { color:#fca5a5; font-weight:600; }

/* Semantische Werte */
.hl .kwd         { color:#60a5fa; }           /* rel/as/type keywords */
.hl .flag-ok     { color:#22c55e; font-weight:600; }      /* async, defer, lazy, module */
.hl .flag-warn   { color:#f97316; font-weight:600; }      /* sync script etc. */











/* ===== Tokens / Root ===== */
:root{
  --seg-height: 40px;
  --seg-radius: 9999px;
  --seg-bg: #ffffff;
  --seg-fg: #6b7280;
  --seg-fg-hover: #374151;
  --seg-active: #5b6cff;
}
:root{ --seg-gap:16px; } /* falls noch nicht gesetzt */

/* ===== Top-Bar ===== */
.seg-tabs__nav{
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: var(--seg-height);
  flex-wrap: nowrap;
}

.seg-tabs__spacer{ flex: 1 1 auto; text-align: center; }

/* ===== Linke Tab-Gruppe ===== */
.seg-tabs__group{
  position: relative;
  display: inline-flex;
  align-items: center;
  height: var(--seg-height);
  background: var(--seg-bg);
  border-radius: var(--seg-radius);
  overflow: hidden;
  flex: 0 0 auto;
  flex-shrink: 0;
  min-width: max-content;
  /* Padding entfernt → Thumb sitzt bündig */
  gap: 16px;
  gap: var(--seg-gap);
  padding-inline: calc(var(--seg-gap) / 2); /* halber Gap an den Außenkanten */
}

/* Buttons */
.seg-tabs__btn{
  appearance: none;
  border: none;
  background: transparent !important;
  color: var(--seg-fg) !important;
  font-weight: 400;
  font-size: 14px;
  text-transform: uppercase;
  border-radius: var(--seg-radius);
  position: relative;
  z-index: 2;
  cursor: pointer;
  height: 100%;
  padding: 0 20px;              /* Abstand innerhalb des Buttons */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color .2s ease;
}
.seg-tabs__btn:hover{ color: var(--seg-fg-hover); }
.seg-tabs__btn.is-active{ color: #fff !important; outline: none !important; border: none !important; }
.seg-tabs__btn:focus-visible{
  outline: 2px solid rgba(59,130,246,.9);
  outline-offset: 2px;
}

/* Aktiver Thumb exakt bündig */
.seg-tabs__thumb{
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 0; /* JS setzt Breite per activeBtn.offsetWidth */
  border-radius: var(--seg-radius);
  background: var(--seg-active);
  transform: translateX(0);
  transition: transform .35s cubic-bezier(.22,.7,.23,1), width .25s ease;
  z-index: 1;
  box-shadow: none;
}

/* ===== Rechte Seite: Sprache + Score ===== */
.seg-tabs__actions{
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.seg-tabs__actions > *{ flex: 0 0 auto; }

/* Sprachwähler */
.lmo-select{
  padding: 0 10px;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  background: #fff;
  cursor: pointer;
  border: none;
  border-radius: 9999px;
  outline: none;
  height: 36px;
  border: none;
  font-weight: 400;
  font-size: 14px;
  text-transform: uppercase;
  color: #6b7280;
}

/* Score */
.score-card{
  background: white;
  height: 40px;
  border-radius: 9999px;
  display: inline-block;
  padding-left: 20px;
  padding-right: 20px;
  margin: 0 auto;
  line-height: 40px;
}
.score-card__label{
  font-size: 12px;
  color: #6b7280;
  font-weight: 500;
  display: inline-block;
  position: relative;
  top: -2px;
  font-weight: 400;
  font-size: 14px;
  text-transform: uppercase;
  color: #6b7280;
}
.score-card__value{
  font-size: 18px;
  font-weight: 700;
  color: #111827;
  display: inline-block;
}
.score-card .score-total{ color: var(--seg-active); }

/* ===== Panels ===== */
.seg-tabs__panels{
  position: relative;
  margin-top: 16px;
  transition: height .35s ease;
}
.seg-tabs__panel{
  position: absolute;
  inset: 0;
  padding: 18px 6px 6px;
  opacity: 0;
  transform: translateY(6px) scale(.995);
  pointer-events: none;
}
.seg-tabs__panel.is-active{
  position: relative;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce){
  .seg-tabs__btn,
  .seg-tabs__thumb,
  .seg-tabs__panels{ transition: none !important; }
}

/* ===== Responsive ===== */
@media (max-width: 820px){
  :root{ --seg-height: 36px; }
  .seg-tabs__btn{ font-size: 13px; padding: 0 14px; }
  .lmo-select{ font-size: 12px; }
  .score-card__value{ font-size: 16px; }
}
@media (max-width: 560px){
  .seg-tabs__nav{ flex-wrap: wrap; gap: 12px; }
  .seg-tabs__spacer{ flex-basis: 100%; }
  .seg-tabs__actions{
    order: 3;
    width: 100%;
    justify-content: flex-end;
    white-space: normal;
  }
  
}
.seg-tabs__group { position: relative; padding: 0; } /* Referenz für offsetParent, kein Innenabstand */
.seg-tabs__btn   { box-sizing: border-box; }        /* Breite = inkl. Padding */
.seg-tabs__thumb { left: 0; }                        /* Startpunkt = Gruppen-Left */

/* ==== FINAL OVERRIDES FOR TABS ==== */
:root { --seg-gap: 16px; } /* deine Lücke zwischen Tabs */

.seg-tabs__group{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--seg-gap);
  /* WICHTIG: halber Gap außen, damit der aktive blaue Pill an den Kanten stimmt */
  padding-left:  calc(var(--seg-gap) / 2) !important;
  padding-right: calc(var(--seg-gap) / 2) !important;
  /* keine weiteren padding-Regeln mehr hier drunter überschreiben lassen */
}

.seg-tabs__btn{ box-sizing: border-box; } /* Breite inkl. Padding */
.seg-tabs__thumb{ left: 0; }              /* Bezugspunkt = Gruppen-Left */











/* =========================================================
   Suchfeld + Action-Button (final responsive)
   ========================================================= */

/* Formular/Zeile immer volle Breite */
.lmo-toolbar__form{ width:100%; display:block; max-width:none; }

/* Weiße Pille */
.lmo-searchbar{
  position: relative;             /* für das Icon auf Mobile */
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border-radius: 9999px;
  padding: 10px 14px 10px 18px;
  box-shadow: 0 6px 18px rgba(27,46,94,.06);
  box-sizing:border-box;
}

/* Linkes Icon (Globus) */
.lmo-searchbar__icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #7d8cff;
  opacity: .9;
}
.lmo-searchbar__icon .bckemn{
  animation-duration: 8s !important; /* schneller drehen */
}

/* Input */
.lmo-input{
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  font-size: 18px;
  line-height: 1.4;
  color: #243052;
}
.lmo-input::placeholder{ color:#8796ff; opacity:.9; }
.lmo-input:focus,
.lmo-input:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

/* Button rechts – plan (kein Hover-Lift) */
.lmo-btn{
  margin-left: auto;                    /* schiebt an den rechten Rand */
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 0;
  cursor: pointer;
  padding: 12px 22px;
  border-radius: 9999px;
  background: #4f5af7 !important;
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  box-shadow: 0 6px 18px rgba(79,90,247,.30);
  transform: none !important;
  transition: background .2s ease, box-shadow .2s ease;
}
.lmo-btn:hover,
.lmo-btn:active{
  transform: none !important;
  box-shadow: 0 6px 18px rgba(79,90,247,.30);
}
.lmo-btn:disabled{ opacity:.6; cursor:not-allowed; box-shadow:none; }

.lmo-btn__label{ white-space:nowrap; }

/* Blitz-Icon – ohne Hintergrund, horizontaler Flip */
.lmo-btn__icon{
  display:inline-flex;
  width:24px; height:24px;
  border-radius:9999px;
  background:transparent;
  align-items:center; justify-content:center;
  color:#fff;
}
.lmo-btn__icon svg{
  transform-origin:50% 50%;
  animation:lmo-flip-x 1.8s linear infinite;
}
@keyframes lmo-flip-x{
  0%,100%{ transform:scaleX(1); }
  50%    { transform:scaleX(-1); }
}

/* ===================== Responsive ===================== */

/* Tablet: etwas mehr Luft rechts beim Button, wenn Platz knapp */
@media (max-width: 900px){
  .lmo-btn{ padding: 12px 18px; font-size: 15px; }
}


@media (max-width: 749px){
  .lmo-toolbar__form .lmo-btn__label{
    display: none;
  }
}





.lmo-form{
  background: #d9ddf7f0;
  border-radius: 8px;
  margin: 50px;
  padding: 50px;
  margin-top: 150px;
  padding-bottom: 70px;
}

.lmo-form-alt{
  margin-top: 0 !important;
}
.lmo-form h3{
  color: #4f5af7;
  font-size: 23px;
  text-transform: uppercase;
  font-weight: 600;
}
.lmo-form h3 span{
  color: #222;
}
.lmo-form > p{
  display: block;
      margin-bottom: 40px;
      color: #434343;
      line-height: 1.5em;
      font-size: 16px;
}
.lmo-form > div{
  position: relative;
}
.lmo-form > div label{
  display: block;
  background: #0a0f1d;
  border-radius: 9999px;
  border: none;
  outline: none;
  font-size: 12px;
  line-height: 1.4;
  color: #fff;
  padding: 12px 14px;
  margin-bottom: 20px;
  position: absolute;
  left: 0;
  top: 0;
  width: 117px;
  text-transform: uppercase;
  box-sizing: border-box;
  height: 50px;
  line-height: 50px;
  padding-top: 0;
  padding-bottom: 0;
  text-align: center;
}



.lmo-form input{
  display: block;
  background: white;
  border-radius: 9999px;
  border: none;
  outline: none;
  font-size: 18px;
  line-height: 1.4;
  color: #243052;
  padding: 12px 14px;
  margin-bottom: 20px;
  text-indent: 120px;
}
@media (max-width: 650px){
  .lmo-form input{
  text-indent: 10px;
  }
}
.lmo-form button{
  display: block;
  background: #4f5af7 !important;
  border-radius: 9999px;
  border: none;
  outline: none;
  font-size: 18px;
  line-height: 1.4;
  color: #fff;
  padding: 12px 14px;
  margin-bottom: 20px;
  float: right;
  font-weight: 600;
  font-size: 16px;
}

.scanlogoverlayblurr{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.1);
  z-index: 5999;
  border-radius: 8px;
}

  /* Analyse-Tab zunächst gesperrt/unsichtbar */
  .seg-tabs__btn.is-locked { pointer-events:none; opacity:.35; }
  .seg-tabs__btn.is-hidden  { display:none; }

  /* hübsches Einfaden, wenn er „neu auftaucht“ */
  .seg-tabs__btn.appear {
    animation: lmo-fade-in 320ms ease-out both;
  }
  @keyframes lmo-fade-in {
    from { opacity:0; transform:translateY(-4px); }
    to   { opacity:1; transform:translateY(0); }
  }




  @media (max-width: 1000px){
    .doc-sticky{
      max-height: none; 
    }
  }

  @media (max-width: 650px){
    .lmo-form{
      margin: 0;
      margin-top: 40px;
      padding: 20px;
      padding-bottom: 60px;
    }
    .lmo-form > div label{
    display: none;
    }
    .wrapper{
      padding-left: 0;
      padding-right: 0;
      max-width: none;
      min-width: none;
      width: auto;
    }
    .console-panel{
      height: auto; 
      max-height: none;
      min-height: none;
    }
    .doc-sticky{
      max-height: none; 
    }
  }
  @media (min-width: 651px){
    .lmo-form > div label{
    display: inline-block;
    }
  }



  @media (max-width: 660px) {
   .seg-tabs__group{ flex: 100; min-width: 100%; box-sizing: border-box; }
    .seg-tabs__btn{ width: 33.33333333333333%; }
    .seg-tabs__thumb{ width: 33.3333333333333%; }
    .seg-tabs__spacer{
      flex: none;
      display: inline-block;
    }
  
    .seg-tabs__actions{
      display: inline-block;
      flex: none;
      width: auto;
      margin-left: auto;
    }
    .seg-tabs__group button.is-hidden{ display: block; }
  }




  /* =========================================================
   Sticky Top-Navigation (Tabs)
   Klasse: .seg-tabs__nav--sticky
   ========================================================= */

.seg-tabs__nav--sticky{
  position: sticky;
  top: 0;
  z-index: 5000;





  /* verhindert seitliches "Zucken" bei Sticky */
  left: 0;
  right: 0;
}

/* dezente Trennlinie nach unten */
.seg-tabs__nav--sticky::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(0,0,0,.06);
  pointer-events: none;
}

/* Mobile etwas kompakter */
@media (max-width: 556px){
  .seg-tabs__nav--sticky{
    padding-top: 8px;
    padding-bottom: 8px;
    /* eigener Hintergrund, damit Content nicht durchscheint */
    background: rgba(245,245,245,.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}