/* =========================================================================
   WALYSER — GEMEINSAMER APP-LOOK
   Wird von markt.html, sicherheit.html und pro-tools.html geladen und bringt
   sie auf dieselbe Sprache wie das Portfolio-Dashboard:
   klebende Bereichs-Navigation, dichtere Karten, einheitliche Abstände.
   Ergänzt base.css, ersetzt es nicht.
   ========================================================================= */

:root{
  --a-surface:#0b0e16;
  --a-hair:rgba(255,255,255,.12);
  --a-dim:#7e879b;
  --a-radius:16px;
}

/* -------------------------------------------------------------------------
   1 · KLEBENDE BEREICHS-NAVIGATION
   Zeigt auf jeder Seite alle Abschnitte und markiert den aktiven beim Scrollen.
   ------------------------------------------------------------------------- */
.sectionNav{position:sticky;top:70px;z-index:14;background:#05060aee;backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.sectionNavInner{display:flex;align-items:center;gap:6px;overflow-x:auto;padding:10px 0;scrollbar-width:none}
.sectionNavInner::-webkit-scrollbar{display:none}
.sectionNavLabel{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:#5f6779;font-weight:700;white-space:nowrap;padding-right:6px;flex:0 0 auto}
.sectionNavItem{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;border:1px solid var(--line);background:#ffffff05;color:#a4abbd;font-size:12px;font-weight:600;white-space:nowrap;flex:0 0 auto;transition:color .15s,border-color .15s,background .15s}
.sectionNavItem:hover{color:#fff;border-color:var(--a-hair)}
.sectionNavItem.active{background:linear-gradient(120deg,#7c5cff2a,#00d9ff18);border-color:#7c5cff45;color:#fff}
.sectionNavItem .sIco{font-size:12.5px}
.sectionNavSep{width:1px;height:20px;background:var(--line);flex:0 0 auto;margin:0 4px}
.sectionNavItem.toDash{margin-left:auto;background:linear-gradient(120deg,#7c5cff22,#00d9ff14);border-color:#7c5cff3d;color:#dcd2ff}
.sectionNavItem.toDash:hover{background:linear-gradient(120deg,#7c5cff33,#00d9ff20);color:#fff}
@media(max-width:900px){.sectionNavLabel,.sectionNavSep{display:none}.sectionNavItem.toDash{margin-left:0}}

/* -------------------------------------------------------------------------
   2 · DICHTERE ABSCHNITTE
   Die Seiten stammen aus einem Marketing-Layout mit sehr viel Luft. Im
   App-Kontext wirkt das zerfasert — hier deutlich kompakter.
   ------------------------------------------------------------------------- */
body.appPage section{padding:52px 0}
body.appPage section:first-of-type{padding-top:34px}
body.appPage .head{margin-bottom:22px}
body.appPage .head h2{font-size:27px;letter-spacing:-.02em;margin:6px 0 8px}
body.appPage .head p{font-size:13.5px;max-width:74ch}
body.appPage .kicker{font-size:10px;letter-spacing:.1em}

/* Karten im Dashboard-Look */
body.appPage .card,body.appPage .intelCard,body.appPage .panel{
  padding:16px 17px;border-radius:var(--a-radius);background:var(--a-surface)}
body.appPage .intelCard:after{display:none}
body.appPage .card:hover,body.appPage .intelCard:hover,body.appPage .item:hover,body.appPage .panel:hover{
  transform:none;box-shadow:none;border-color:var(--line)}
body.appPage .card h3,body.appPage .intelTitle,body.appPage .panel h3{font-size:13.5px;margin:0 0 6px;letter-spacing:-.01em}
body.appPage .card .muted,body.appPage .intelSub{font-size:11.5px;line-height:1.6}
body.appPage .card .big{font-size:22px}
body.appPage .intelIcon{font-size:17px;margin-bottom:7px}
body.appPage .item{padding:10px 12px;border-radius:11px;margin-top:7px;background:#ffffff04}
body.appPage .grid,body.appPage .intelGrid{gap:14px}

/* Zahlen einheitlich ausrichten wie im Dashboard */
body.appPage{font-variant-numeric:tabular-nums}

/* -------------------------------------------------------------------------
   3 · VERTRAUENS-LEISTE
   Auf jeder App-Seite derselbe, klar formulierte Hinweis darauf, was WALYSER
   sieht und was nicht — und was Demo ist.
   ------------------------------------------------------------------------- */
.trustStrip{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:11px 15px;margin-top:18px;
  border:1px solid var(--line);border-radius:13px;background:#ffffff04;font-size:11.5px;color:#aeb4c5}
.trustStrip b{color:#e8ebf3}
.trustStrip .tsDot{width:6px;height:6px;border-radius:50%;background:var(--green);flex:0 0 auto}
.trustStrip a{color:#8fe9ff}
.trustStrip a:hover{text-decoration:underline}
.trustStrip .tsItem{display:inline-flex;align-items:center;gap:7px}
.trustStrip .tsSep{color:#3a4152}
@media(max-width:700px){.trustStrip .tsSep{display:none}.trustStrip{flex-direction:column;align-items:flex-start;gap:7px}}

/* Demo-Kennzeichnung, damit simulierte Werte nie als echt gelesen werden */
.demoTag{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:999px;
  background:#f1cf7012;border:1px solid #f1cf7038;color:#e7d9a8;font-size:10px;font-weight:700;
  letter-spacing:.03em;white-space:nowrap;vertical-align:middle}
.liveTag{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:999px;
  background:#27e7a412;border:1px solid #27e7a43a;color:#7ff0c6;font-size:10px;font-weight:700;
  letter-spacing:.03em;white-space:nowrap;vertical-align:middle}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* =========================================================================
   PRO INTELLIGENCE LAB — Highlight-Leiste
   Zeigt die stärksten Werkzeuge ganz oben, statt sie hinter 60 Karten
   zu verstecken, und trennt Verfügbares klar von Geplantem.
   ========================================================================= */
.proHighlights{margin:24px 0 30px;padding:19px 20px;border:1px solid #7c5cff30;border-radius:18px;
  background:linear-gradient(150deg,#7c5cff0e,#0b0e16 60%)}
.phHead{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;margin-bottom:14px}
.phHead b{font-size:15px;letter-spacing:-.01em}
.phHead span{font-size:11.5px;color:#7e879b}
.phGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}
.phCard{display:flex;flex-direction:column;gap:5px;padding:14px 15px;border:1px solid var(--line);
  border-radius:14px;background:#0b0e16;transition:border-color .18s,transform .18s,background .18s}
.phCard:hover{border-color:#7c5cff4d;background:#10141f;transform:translateY(-2px)}
.phIco{font-size:19px}
.phCard b{font-size:13px;letter-spacing:-.01em;color:#f5f7fb}
.phTxt{font-size:11.5px;color:#aeb4c5;line-height:1.55}
.phState{align-self:flex-start;margin-top:4px;padding:2px 8px;border-radius:999px;font-size:9.5px;
  font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.phState.live{background:#27e7a414;border:1px solid #27e7a43a;color:#7ff0c6}
.phState.soon{background:#f1cf7012;border:1px solid #f1cf7038;color:#e7d9a8}
.phFoot{margin:14px 0 0;font-size:11.5px;color:#7e879b;line-height:1.6}
.phFoot b{color:#cbd0dc}
@media(max-width:900px){.phGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.phGrid{grid-template-columns:1fr}}

/* Verfügbarkeits-Etikett an den einzelnen Werkzeug-Karten */
.stateTag{display:inline-block;margin-left:7px;padding:2px 7px;border-radius:999px;font-size:9px;
  font-weight:800;letter-spacing:.04em;text-transform:uppercase;vertical-align:middle}
.stateTag.live{background:#27e7a414;border:1px solid #27e7a43a;color:#7ff0c6}
.stateTag.soon{background:#f1cf7012;border:1px solid #f1cf7038;color:#e7d9a8}

/* Sprungziel nicht unter der klebenden Leiste verstecken */
#time-machine,#red-team,#digital-twin,#whale-next,#rug-pull,#guardian,#bias-radar,#forensik,#luegendetektor,#nichtstun{scroll-margin-top:130px}

/* =========================================================================
   PRO LAB — Such- und Filterleiste
   ========================================================================= */
.toolBar{position:sticky;top:126px;z-index:11;margin:0 0 22px;padding:14px 16px;
  border:1px solid var(--line);border-radius:15px;background:#0a0d15f2;backdrop-filter:blur(16px)}
.tbTop{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:11px}
.tbCount{font-size:12.5px;color:#7e879b}
.tbCount b{color:#f5f7fb;font-variant-numeric:tabular-nums}
.tbCount span{margin-left:9px;color:#5f6779}
.tbSearch{display:flex;align-items:center;gap:8px;margin-left:auto;flex:1;max-width:420px;
  border:1px solid var(--line);border-radius:11px;background:#ffffff05;padding:8px 12px}
.tbSearch span{color:#5f6779;font-size:12px}
.tbSearch input{flex:1;border:0;background:none;color:#fff;font-size:13px;outline:none;min-width:0}
.tbSearch input::placeholder{color:#5f6779}
.tbFilters{display:flex;gap:7px;flex-wrap:wrap}
.tbEmpty{margin:13px 0 0;font-size:12.5px;color:#7e879b}
.toolHidden{display:none!important}
@media(max-width:900px){.toolBar{top:118px}.tbSearch{margin-left:0;max-width:none;width:100%}}

/* Interaktive Demo im Pro Lab */
.labDemo{margin-top:12px;padding:14px 15px;border:1px solid #7c5cff33;border-radius:13px;
  background:linear-gradient(160deg,#7c5cff0f,#0a0d15 65%)}
.labRow{display:flex;gap:8px;flex-wrap:wrap}
.labRow input{flex:1;min-width:180px;border:1px solid var(--line);border-radius:10px;
  background:#ffffff05;color:#fff;font-size:13px;padding:10px 12px;outline:none}
.labRow input::placeholder{color:#5f6779}
.labOut{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.labArg{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:11px;
  border:1px solid #ff5d7930;background:#ff5d7908;font-size:12.5px;color:#c3c9d6;line-height:1.55;
  animation:fadeIn .3s ease}
.labArg b{color:#ff9db0;flex:0 0 auto}
.labHint{font-size:11px;color:#7e879b;margin:10px 0 0}

/* =========================================================================
   WERKZEUG-AUSWAHL — eigenes Dashboard zusammenstellen
   ========================================================================= */
.toolActions{margin-top:12px;padding-top:11px;border-top:1px solid var(--line)}
.toolPick{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:10px;
  border:1px solid var(--line);background:#ffffff05;color:#aeb4c5;font-size:11.5px;font-weight:650;
  cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.toolPick:hover{border-color:#7c5cff4d;background:#7c5cff12;color:#fff}
.toolPick .tpIco{font-size:12px;font-weight:800}
.toolPick.picked{border-color:#27e7a44a;background:#27e7a412;color:#7ff0c6}
.toolPick.picked .tpIco{color:var(--green)}

/* Bereiche, die bereits woanders im Dashboard laufen — leicht grün eingefärbt,
   damit man sie auf einen Blick von „Automatisierung & Utility" (noch nicht
   genutzt, da ohne eigene Ansicht) unterscheidet. */
.usedGrid .card{background:#27e7a41c;border-color:#27e7a460}
.usedGrid .card:hover{border-color:#27e7a480}

.pickBar{position:fixed;left:0;right:0;bottom:0;z-index:45;background:#0a0d15f5;
  backdrop-filter:blur(18px);border-top:1px solid #7c5cff3d;box-shadow:0 -14px 40px -18px #000c;
  animation:pickIn .25s cubic-bezier(.16,1,.3,1)}
.pickBar[hidden]{display:none}
@keyframes pickIn{from{transform:translateY(100%)}to{transform:none}}
.pickBarInner{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:13px 24px}
.pbLeft{min-width:0;flex:1}
.pbCount{display:block;font-size:13px;color:#e8ebf3;font-weight:700}
.pbCount b{color:var(--green);font-variant-numeric:tabular-nums}
.pbNames{display:block;font-size:11.5px;color:#7e879b;margin-top:3px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;max-width:52ch}
.pbRight{display:flex;align-items:center;gap:9px;flex-wrap:wrap;flex:0 0 auto}
.pbRight .btn{padding:10px 15px;font-size:12.5px;white-space:nowrap}
@media(max-width:900px){
  .pickBarInner{padding:11px 16px;gap:11px}
  .pbRight{width:100%}
  .pbRight .btn{flex:1;text-align:center}
  .pbNames{max-width:100%}
}

/* =========================================================================
   FAQ-SEITE
   ========================================================================= */
.freeHero{padding:24px 28px;border:1px solid #27e7a440;border-radius:18px;
  background:linear-gradient(150deg,#27e7a412,#0b0e16 58%);text-align:center;
  box-shadow:0 20px 40px -30px #000c}
.freeQ{font-size:14px;color:#aeb4c5;font-weight:600;letter-spacing:.01em}
.freeA{font-size:48px;font-weight:800;letter-spacing:-.04em;line-height:1;margin:4px 0 10px;
  background:linear-gradient(120deg,#27e7a4,#00d9ff);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.freeTxt{max-width:62ch;margin:0 auto;font-size:13px;color:#aeb4c5;line-height:1.6}
.freeTxt b{color:#f5f7fb}
.freeGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:18px;text-align:left}
.freeItem{padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:#ffffff04;
  transition:transform .15s ease,border-color .15s ease,background .15s ease}
.freeItem:hover{transform:translateY(-1px);border-color:#27e7a440;background:#27e7a40a}
.freeItem b{display:block;font-size:10px;letter-spacing:.03em;margin-bottom:2px;color:#7ff0c6}
.freeItem b:first-letter{font-size:11px}
.freeItem span{font-size:11.5px;color:#cbd0dc}
.freeItem:nth-child(n+4) b{color:#ff8ca0}
@media(max-width:820px){.freeGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.freeA{font-size:40px}.freeHero{padding:20px 18px}}
@media(max-width:520px){.freeGrid{grid-template-columns:1fr}}

.faqList{display:flex;flex-direction:column;gap:9px}
.faqBig{border:1px solid var(--line);border-radius:14px;background:#0b0e16;overflow:hidden;
  transition:border-color .15s}
.faqBig[open]{border-color:var(--a-hair)}
.faqBig summary{cursor:pointer;list-style:none;padding:15px 18px;font-size:14px;font-weight:650;
  color:#e8ebf3;display:flex;align-items:center;gap:11px}
.faqBig summary::-webkit-details-marker{display:none}
.faqBig summary:hover{background:#ffffff05}
.faqBig summary:before{content:"+";flex:0 0 auto;width:20px;height:20px;border-radius:50%;
  background:#7c5cff1c;border:1px solid #7c5cff3d;color:#a991ff;font-weight:800;font-size:13px;
  display:flex;align-items:center;justify-content:center;line-height:1}
.faqBig[open] summary:before{content:"−";background:#27e7a41c;border-color:#27e7a43d;color:#7ff0c6}
.faqBig>div{padding:0 18px 16px 49px;animation:fadeIn .2s ease}
.faqBig p{margin:0;font-size:13.5px;color:#aeb4c5;line-height:1.75}
.faqBig p b{color:#f5f7fb}
.faqBig a{color:#8fe9ff}
.faqMore{margin:16px 0 0;font-size:13px;color:#7e879b}
.faqMore a{color:#8fe9ff}

.faqCta{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:26px;padding:22px 24px;border:1px solid #7c5cff35;border-radius:17px;
  background:linear-gradient(140deg,#7c5cff12,#0b0e16 65%)}
.faqCta b{display:block;font-size:16px;margin-bottom:5px}
.faqCta span{display:block;font-size:13px;color:#aeb4c5}
.faqCtaBtns{display:flex;gap:9px;flex-wrap:wrap}
@media(max-width:700px){.faqCta{flex-direction:column;align-items:stretch}.faqCtaBtns .btn{flex:1;text-align:center}}