/* VILINGO Kommunikationskarte v1.6.4 · CD 2026 v1.3 · vollständig gekapselte Stile */
.vlg-clarity{--vlg-cyan:#009CE0;--vlg-petrol:#2C4448;--vlg-petrol-black:#0B2024;--vlg-olive:#C7C919;--vlg-mist:#F4F8FA;--vlg-ink:#182026;--vlg-line:#D5E0E4;box-sizing:border-box;max-width:1340px;margin:0 auto;padding:72px clamp(16px,5vw,64px);font-family:Verdana,Geneva,Arial,sans-serif;font-size:16px;line-height:1.6;color:var(--vlg-ink);background:#fff;}
.vlg-clarity *{box-sizing:border-box}
.vlg-clarity__intro{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(240px,.75fr);align-items:end;gap:42px;margin-bottom:35px}
.vlg-clarity__eyebrow{color:#0071A3;font-weight:700;font-size:11px;letter-spacing:.15em;text-transform:uppercase;margin:0 0 14px}
.vlg-clarity__title{font-family:'Fira Sans Condensed','Arial Narrow',Arial,sans-serif;font-size:clamp(36px,4.2vw,58px);line-height:1.03;letter-spacing:-.025em;font-weight:800;color:var(--vlg-petrol);margin:0;max-width:760px}
.vlg-clarity__lead{font-size:16px;line-height:1.65;color:#526268;max-width:490px;margin:0}
.vlg-clarity__shell{background:var(--vlg-petrol-black);color:white;padding:22px clamp(12px,2.5vw,30px) 24px;}
.vlg-clarity__stage{height:420px;position:relative;isolation:isolate;overflow:hidden;background-image:linear-gradient(to right,rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.045) 1px,transparent 1px);background-size:42px 42px}
.vlg-clarity__wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.vlg-clarity__node{position:absolute;z-index:2;width:clamp(104px,10.5vw,132px);min-height:56px;padding:9px 11px;background:#29464b;border:1px solid #738c93;color:white;transform:translate(-50%,-50%);left:var(--x);top:var(--y);transition:border-color .22s ease-out,background-color .22s ease-out;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;}
.vlg-clarity__node strong{font:700 clamp(13px,1.1vw,16px)/1.15 'Fira Sans Condensed','Arial Narrow',Arial,sans-serif;min-width:0;max-width:100%;overflow-wrap:anywhere;hyphens:auto}
.vlg-clarity__node small{color:#cbd9dc;font:400 10px/1.2 Verdana,Geneva,Arial,sans-serif;margin-top:4px}
.vlg-clarity__node.is-ordered{background:#37585f;border-color:#94b3bb}
.vlg-clarity__node:nth-of-type(2){--x:18%;--y:18%}
.vlg-clarity__node:nth-of-type(3){--x:44%;--y:10%}
.vlg-clarity__node:nth-of-type(4){--x:12%;--y:70%}
.vlg-clarity__node:nth-of-type(5){--x:78%;--y:16%}
.vlg-clarity__node:nth-of-type(6){--x:86%;--y:44%}
.vlg-clarity__node:nth-of-type(7){--x:63%;--y:82%}
.vlg-clarity__node:nth-of-type(8){--x:28%;--y:84%}
.vlg-clarity__node:nth-of-type(9){--x:90%;--y:74%}
.vlg-clarity__node:nth-of-type(10){--x:14%;--y:38%}
.vlg-clarity__node:nth-of-type(11){--x:50%;--y:90%}
.vlg-clarity__core{position:absolute;left:50%;top:50%;z-index:3;transform:translate(-50%,-50%);background:var(--vlg-cyan);color:var(--vlg-ink);width:clamp(135px,17vw,205px);min-height:85px;padding:12px 18px;display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;text-align:center}
.vlg-clarity__core small{font-size:10px;letter-spacing:.11em;text-transform:uppercase;font-weight:700}
.vlg-clarity__core strong{font:800 clamp(21px,2.3vw,30px)/1 'Fira Sans Condensed','Arial Narrow',Arial,sans-serif}
.vlg-clarity__axis{color:#bdd0d5;display:none;gap:16px;align-items:center;border-top:1px solid rgba(255,255,255,.22);padding-top:19px;margin-top:2px}
.vlg-clarity__axis label{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.vlg-clarity__axis input{accent-color:var(--vlg-cyan);min-width:45px;flex:1;cursor:pointer;height:32px}
.vlg-clarity__axis output{color:white;font-size:14px;min-width:48px;text-align:right;font-variant-numeric:tabular-nums;font-weight:bold}
.vlg-clarity__buttons{display:none;flex-wrap:wrap;gap:9px;margin:13px 0 0}
.vlg-clarity__buttons button{background:transparent;border:1px solid #9ab0b5;color:white;border-radius:4px;min-height:44px;cursor:pointer;font-size:12px;font-weight:700;padding:9px 14px;transition:none}
.vlg-clarity__buttons button[aria-pressed="true"],.vlg-clarity__buttons button:hover{border-color:var(--vlg-cyan);background:var(--vlg-cyan);color:var(--vlg-ink)}
.vlg-clarity__axis input:focus-visible,.vlg-clarity__buttons button:focus-visible{outline:3px solid var(--vlg-olive);outline-offset:3px}
.vlg-clarity.is-enhanced .vlg-clarity__axis,.vlg-clarity.is-enhanced .vlg-clarity__buttons{display:flex}
.vlg-clarity__status{font-size:13px;line-height:1.55;color:#e5eef1;margin:16px 0 0;min-height:1.6em}
.vlg-clarity__messages{display:none!important}
.vlg-clarity__context{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:32px}
.vlg-clarity__context>div{border-top:2px solid var(--vlg-petrol);padding-top:12px}
.vlg-clarity__context small{display:block;color:#0071A3;font-size:11px;font-weight:700;letter-spacing:.08em;margin-bottom:8px}
.vlg-clarity__context strong{display:block;font:700 26px/1.12 'Fira Sans Condensed','Arial Narrow',Arial,sans-serif;color:var(--vlg-petrol);margin-bottom:8px}
.vlg-clarity__context p{font-size:14px;color:#526268;line-height:1.6;margin:0}
@media(max-width:950px){.vlg-clarity__intro{grid-template-columns:1fr;gap:18px}.vlg-clarity__title{font-size:clamp(35px,7vw,50px)}}
/* Kompakter Container: sichtbare dreistufige Anordnung – Mindmap, gruppierte Ketten, geordnetes Raster. */
.vlg-clarity.is-compact .vlg-clarity__stage{height:800px;min-height:800px;background-size:34px 34px}
.vlg-clarity.is-compact .vlg-clarity__node{width:min(168px,calc(42% - 10px));min-height:58px;padding:8px 9px;z-index:2}
.vlg-clarity.is-compact .vlg-clarity__node strong{font-size:clamp(13px,2.5vw,16px)}
.vlg-clarity.is-compact .vlg-clarity__node small{font-size:10px}
.vlg-clarity.is-compact .vlg-clarity__core{top:8%;width:min(252px,calc(100% - 44px));min-height:75px;z-index:4}
.vlg-clarity.is-compact .vlg-clarity__wires{display:block!important}
@media(max-width:650px){
 .vlg-clarity{padding:52px 16px}.vlg-clarity__shell{padding:18px 13px}
 .vlg-clarity__axis{gap:8px;flex-wrap:wrap}.vlg-clarity__axis label{font-size:9px}
 .vlg-clarity__axis input{flex-basis:100%;order:3;margin-top:3px}
 .vlg-clarity__axis output{min-width:36px}
 .vlg-clarity__buttons button{flex:1;min-width:98px;font-size:11px;padding:7px}
 .vlg-clarity__context{grid-template-columns:1fr;gap:20px}
 .vlg-clarity.is-compact .vlg-clarity__stage{height:820px;min-height:820px}
 .vlg-clarity.is-compact .vlg-clarity__node{width:calc(50% - 12px);min-height:58px;padding:8px}
 .vlg-clarity.is-compact .vlg-clarity__node strong{font-size:14px}
 .vlg-clarity.is-compact .vlg-clarity__node small{font-size:9px}
 .vlg-clarity.is-compact .vlg-clarity__core{top:8%;min-height:74px}
}
@media(max-width:850px){
 .vlg-clarity:not(.is-enhanced) .vlg-clarity__stage{height:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding-top:95px;background:none}
 .vlg-clarity:not(.is-enhanced) .vlg-clarity__core{top:0;left:0;transform:none;width:100%;min-height:77px}
 .vlg-clarity:not(.is-enhanced) .vlg-clarity__node{position:static;transform:none;width:auto;min-height:60px}
 .vlg-clarity:not(.is-enhanced) .vlg-clarity__wires{display:none}
}
@media(prefers-reduced-motion:reduce){.vlg-clarity *{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

@media(max-width:350px){.vlg-clarity.is-compact .vlg-clarity__node strong{font-size:13px;letter-spacing:-.015em}}

/* V1.6.1: Statische, vollständig lesbare Darstellung, wenn JS fehlt/blockiert ist. */
.vlg-clarity:not(.is-enhanced) .vlg-clarity__stage{height:auto;min-height:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;padding:105px 4px 10px;background:none;overflow:visible}
.vlg-clarity:not(.is-enhanced) .vlg-clarity__core{top:0;left:0;transform:none;width:100%;min-height:83px}
.vlg-clarity:not(.is-enhanced) .vlg-clarity__node{position:static;transform:none;width:auto;min-width:0;min-height:60px}
.vlg-clarity:not(.is-enhanced) .vlg-clarity__wires{display:none}
@media(max-width:900px){.vlg-clarity:not(.is-enhanced) .vlg-clarity__stage{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Anpassung v1.6.2 – Range-Regler auf Desktop optisch an Beschriftungen ausrichten. */
@media (min-width: 651px) {
  .vlg-clarity__axis input[type="range"] {
    transform: translateY(4px);
  }
}

/* v1.6.3 – mobile Navigation: volle Beschriftung, ohne Überlauf. */
@media (max-width: 650px) {
  .vlg-clarity.is-enhanced .vlg-clarity__buttons {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1.50fr) minmax(0, .95fr);
    gap: 6px;
  }
  .vlg-clarity__buttons button {
    flex: none;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 9px 5px;
    font-family: Verdana, Geneva, Arial, sans-serif;
    font-size: 11px;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
  }
}
@media (max-width: 370px) {
  .vlg-clarity.is-enhanced .vlg-clarity__buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .vlg-clarity__buttons button:nth-child(3) {
    grid-column: 1 / -1;
  }
}

/* v1.6.4 – Mobil: kompakte Darstellung und korrekt zugeordnete Regler-Endpunkte.
   Die Bühne wurde bei 320–650px auf Kollisionen für 0–100% getestet. */
@media (max-width: 650px) {
  .vlg-clarity { padding-top: 30px; padding-bottom: 32px; }
  .vlg-clarity__intro { margin-bottom: 20px; }
  .vlg-clarity__shell { padding: 12px 11px 16px; }
  .vlg-clarity.is-compact .vlg-clarity__stage {
    height: 610px;
    min-height: 610px;
  }
  .vlg-clarity.is-compact .vlg-clarity__node {
    min-height: 50px;
    padding: 6px 7px;
  }
  .vlg-clarity.is-enhanced .vlg-clarity__axis {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    column-gap: 8px;
    row-gap: 4px;
    padding-top: 12px;
    margin-top: 0;
  }
  .vlg-clarity__axis label { font-size: 9px; line-height: 1.35; }
  .vlg-clarity__axis label:first-of-type {
    grid-column: 1; grid-row: 1; justify-self: start;
  }
  .vlg-clarity__axis .vlg-clarity__percent {
    grid-column: 2; grid-row: 1;
    justify-self: center;
    min-width: 36px;
    text-align: center;
  }
  .vlg-clarity__axis label:last-of-type {
    grid-column: 3; grid-row: 1; justify-self: end;
    text-align: right;
  }
  .vlg-clarity__axis input[type="range"] {
    grid-column: 1 / -1; grid-row: 2;
    order: initial;
    min-width: 0;
    width: 100%;
    margin: 0;
    height: 30px;
    flex: none;
  }
  .vlg-clarity__buttons { margin-top: 8px; }
  .vlg-clarity__status { margin-top: 9px; }
}