/*! sophia · © 2026 Rico Pinzke · Alle Rechte vorbehalten · unerlaubte Nutzung oder Vervielfältigung untersagt */
/* sophia — Seite „Methodik" (/ueber). Präsentationsseite: Hero + gestapelte Abschnitte
   (Daten · Pipeline · Mechanik · Mathematik). Akzente aus der sophia-Palette: Teal · Blau · Pink.
   Layout-Rahmen (Glass-Header/Footer) kommt global aus app.css. */
body{background:#0b1017;background-image:radial-gradient(1200px 500px at 50% -160px,rgba(29,158,117,.06),transparent 68%)}
.page{max-width:900px;margin:0 auto;padding:0 26px 30px}
.u code{background:#0b1119;border:1px solid var(--line);border-radius:5px;padding:1px 5px;font-family:ui-monospace,monospace;font-size:11.5px;color:#cbb98a}

/* Hero — moderat */
.hero{text-align:center;padding:56px 0 42px}
.eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#5fd3a6;background:rgba(29,158,117,.1);border:1px solid rgba(29,158,117,.34);border-radius:999px;padding:5px 13px}
.eyebrow svg{width:13px;height:13px}
.hero h1{margin:18px auto 14px;max-width:640px;font-size:25px;line-height:1.24;font-weight:700;letter-spacing:-.01em;color:#fff}
.hero h1 .g{color:#5fd3a6}
.hero .sub{max-width:590px;margin:0 auto;font-size:15px;color:#aeb9c4;line-height:1.65}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:26px}
.chip{font-size:12.5px;color:var(--mut);background:#0e1722;border:1px solid var(--line);border-radius:999px;padding:6px 13px;display:inline-flex;align-items:center;gap:7px}
.chip .cd{width:6px;height:6px;border-radius:50%}
.cd.t{background:#5fd3a6}.cd.b{background:#7fb2ec}.cd.p{background:#ee9ac2}
@media(max-width:640px){.hero{padding:40px 0 30px}.hero h1{font-size:21px}}

/* Abschnitt — alles LINKS-bündig, gestapelt (kein Versatz) */
.psec{padding:42px 0;border-top:1px solid var(--line)}
/* 2-Spalten-Raster für gepaarte Inhalte */
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:start}
@media(max-width:820px){.grid2{grid-template-columns:1fr;gap:24px}}
.grid2 .subh:first-child,.grid2>div>.subh:first-child{margin-top:0}
.pshead{margin-bottom:24px}
.pkick{display:flex;align-items:center;gap:13px;margin-bottom:10px;flex-wrap:wrap} .pkick h2{margin:0}
.pnum{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;background:#0e1722;border:1px solid var(--line)}
.pkick .pk{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.a-teal .pnum,.a-teal .pk,.a-teal .subh{color:#5fd3a6} .a-blue .pnum,.a-blue .pk,.a-blue .subh{color:#7fb2ec} .a-pink .pnum,.a-pink .pk,.a-pink .subh{color:#ee9ac2} .a-gold .pnum,.a-gold .pk,.a-gold .subh{color:#dcc08a} .a-amber .pnum,.a-amber .pk,.a-amber .subh{color:#e8bd63}
.pshead h2{font-size:18px;font-weight:600;letter-spacing:-.01em;color:#e7edf2;line-height:1.3}
.pshead .pss{font-size:13.5px;color:var(--mut);margin-top:8px;line-height:1.6;max-width:680px} .pshead .pss b{color:#c9d4de}
.subh{font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;margin:26px 0 12px}
.mtext{font-size:13.5px;color:var(--mut);line-height:1.7;margin:0 0 12px;max-width:680px} .mtext b{color:#c9d4de;font-weight:600}

/* Icon-Chip */
.chipi{flex:0 0 auto;width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:var(--cbg,rgba(120,140,160,.14));border:1px solid var(--cbd,rgba(120,140,160,.36))} .chipi svg{width:20px;height:20px;color:var(--cfg,#a7b6c4);stroke-width:1.7}
.c-teal{--cbg:rgba(29,158,117,.15);--cbd:rgba(29,158,117,.4);--cfg:#5fd3a6}
.c-blue{--cbg:rgba(58,123,213,.15);--cbd:rgba(58,123,213,.4);--cfg:#7fb2ec}
.c-pink{--cbg:rgba(224,106,168,.15);--cbd:rgba(224,106,168,.42);--cfg:#ee9ac2}
.c-gold{--cbg:rgba(194,162,89,.16);--cbd:rgba(194,162,89,.42);--cfg:#dcc08a}
.c-amber{--cbg:rgba(220,162,58,.15);--cbd:rgba(220,162,58,.42);--cfg:#e8bd63}
.c-slate{--cbg:rgba(120,140,160,.14);--cbd:rgba(120,140,160,.36);--cfg:#a7b6c4}

/* Schichtmodell — Diagramm mit Verbindungsschiene */
.flowzone{max-width:640px}
.flow{position:relative}
.flow:before{content:'';position:absolute;left:35px;top:34px;bottom:34px;width:2px;border-radius:2px;background:linear-gradient(180deg,#1d9e75,#3a7bd5,#e06aa8,#c2a259);opacity:.5}
.flowi{position:relative;z-index:1;display:grid;grid-template-columns:40px 1fr;align-items:center;column-gap:14px;background:#0e1722;border:1px solid var(--line);border-radius:13px;padding:13px 15px;margin-bottom:12px;transition:border-color .15s} .flowi:hover{border-color:#34526b}
.flowi .ft{font-size:14px;font-weight:700;color:#fff;letter-spacing:-.01em} .flowi .fs{font-size:11.5px;color:var(--mut);margin-top:2px;line-height:1.45}
.feeder{display:grid;grid-template-columns:40px 1fr auto;align-items:center;column-gap:14px;background:#0b1119;border:1px dashed #3a5064;border-radius:13px;padding:12px 15px;margin-top:12px;max-width:640px}
.feeder .ft{font-size:13px;font-weight:700;color:#e7edf2} .feeder .fs{font-size:11px;color:var(--mut);margin-top:2px;line-height:1.4}
.ftag{font-size:10px;color:#dcc08a;background:rgba(194,162,89,.12);border:1px solid rgba(194,162,89,.3);border-radius:20px;padding:3px 9px;white-space:nowrap}

/* Feature-Karten */
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:12px}
.fcard{background:#0e1722;border:1px solid var(--line);border-radius:13px;padding:15px;transition:border-color .15s,transform .15s} .fcard:hover{border-color:#34526b;transform:translateY(-2px)}
.fcard .chipi{width:36px;height:36px;border-radius:10px;margin-bottom:11px} .fcard .chipi svg{width:18px;height:18px}
.fcard .fct{font-size:13.5px;font-weight:700;color:#fff;margin-bottom:4px;letter-spacing:-.01em}
.fcard .fcs{font-size:12px;color:var(--mut);line-height:1.55} .fcard .fcs b{color:#c9d4de;font-weight:600}

/* Vertrauens-Kennzahlen */
.dstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:11px}
.dstat{background:#0e1722;border:1px solid var(--line);border-radius:12px;padding:14px 15px}
.dstat b{display:block;font-size:22px;font-weight:800;color:#5fd3a6;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.dstat span{display:block;font-size:11px;color:var(--mut);margin-top:3px;line-height:1.4}

/* Formel-Block, Chart, Schritte */
.fml{background:#0b1119;border:1px solid var(--line);border-left:3px solid #dca23a;border-radius:10px;padding:13px 16px;margin:12px 0;max-width:680px;font-family:ui-monospace,monospace;font-size:14px;color:#e7edf2;line-height:1.5;overflow-x:auto}
.fml sub,.fml sup{font-size:10px} .fml .fk{color:#e8bd63;font-weight:700} .fml em{color:#8aa0b2;font-family:system-ui;font-size:11.5px;font-style:normal;display:block;margin-top:6px}
.chartbox{background:#0b1119;border:1px solid var(--line);border-radius:12px;padding:14px 14px 6px;margin:10px 0;max-width:540px} .chartbox svg{width:100%;height:auto;display:block}
.figbox{background:#0b1119;border:1px solid var(--line);border-radius:12px;padding:12px 14px 4px;margin:12px 0} .figbox svg{width:100%;height:auto;display:block;max-width:440px;margin:0 auto}
.huff2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}
@media(max-width:720px){.huff2{grid-template-columns:1fr}}
.hcell{background:#0b1119;border:1px solid var(--line);border-radius:12px;padding:13px 14px;display:flex;flex-direction:column}
.hcell .hct{font-size:13px;font-weight:700;color:#fff;display:flex;align-items:center;gap:8px}
.hcell .hcn{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:6px;background:rgba(220,162,58,.14);border:1px solid rgba(220,162,58,.34);color:#e8bd63;font-size:10.5px;font-weight:800;flex:0 0 auto}
.hcell .hcs{font-size:11px;color:var(--mut);margin:5px 0 4px;line-height:1.45}
.hcell svg{width:100%;height:auto;display:block;max-width:250px;margin:2px auto 8px}
.hcell .hcf{margin-top:auto;font-family:ui-monospace,monospace;font-size:11px;color:#e8bd63;background:#0e1722;border:1px solid var(--line);border-radius:7px;padding:7px 9px;text-align:center;overflow-x:auto} .hcell .hcf sub,.hcell .hcf sup{font-size:8px}
.chartcap{font-size:11px;color:var(--mut);margin:8px 2px 6px;line-height:1.5;text-align:center}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:6px} @media(max-width:660px){.steps{grid-template-columns:1fr}}
.step{background:#0e1722;border:1px solid var(--line);border-radius:12px;padding:14px}
.step .sn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:7px;background:rgba(220,162,58,.14);border:1px solid rgba(220,162,58,.34);color:#e8bd63;font-size:11px;font-weight:800;margin-bottom:8px}
.step .st{font-size:13px;font-weight:700;color:#fff;margin-bottom:4px} .step .ss{font-size:11.5px;color:var(--mut);line-height:1.5}
.step .sf{font-family:ui-monospace,monospace;font-size:11.5px;color:#e8bd63;margin-top:8px;word-break:break-word} .step .sf sub,.step .sf sup{font-size:9px}