/* Unsere Linie: Haus aus Grundsatz (Dach), vier Säulen und Fundament.
   Eine Komponente für /riff (Produktebene) und /faq (Zusammenarbeit).
   Nur Farben aus der bestehenden Palette: Electric Blue, Vibrant Cyan, Violett, Deep Indigo. */
.ln{
  --ln-text:var(--text,#F8FAFC);
  --ln-text2:#94A3B8;
  --ln-text3:#7C8BA1;
  --ln-line:rgba(255,255,255,.12);
  --ln-line2:rgba(255,255,255,.2);
  --ln-disp:var(--f-display,"DM Serif Display",Georgia,serif);
  --ln-mono:var(--f-mono,"JetBrains Mono","SF Mono",ui-monospace,monospace);
  max-width:1120px;margin:34px auto 0;color:var(--ln-text);text-align:left
}
.ln *{box-sizing:border-box}

/* Dach: der Grundsatz */
.ln-roof{position:relative;margin:0 0 14px;padding:clamp(46px,6vw,64px) clamp(20px,5vw,72px) clamp(22px,3vw,30px);text-align:center;
  background:linear-gradient(135deg,rgba(79,70,229,.24),rgba(37,99,235,.18) 50%,rgba(6,182,212,.18));
  clip-path:polygon(50% 0,100% 58%,100% 100%,0 100%,0 58%)}
.ln-roof::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#4F46E5 0%,#2563EB 50%,#06B6D4 100%);
  clip-path:polygon(0 58%,50% 0,100% 58%,100% calc(58% + 3px),50% 3px,0 calc(58% + 3px));opacity:.9}
.ln-roof>*{position:relative}
.ln-kicker{display:block;font-family:var(--ln-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ln-text2);margin:0 0 8px}
.ln-roof p{margin:0;font-family:var(--ln-disp);font-weight:400;font-size:clamp(1.45rem,2.7vw,2.15rem);line-height:1.15;color:var(--ln-text)}
.ln-roof p em{font-style:normal;color:#22D3EE}
.ln-roof small{display:block;margin:8px auto 0;max-width:40em;font-size:.95rem;line-height:1.5;color:var(--ln-text2)}

/* Vier Säulen */
.ln-cols{list-style:none;margin:0;padding:0 clamp(0px,1.4vw,18px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.ln-col{--c:#2563EB;--cl:#7FA6FF;position:relative;display:flex;flex-direction:column;padding:22px 20px 22px;border:1px solid var(--ln-line);border-top:0;border-radius:0 0 14px 14px;
  background:rgba(255,255,255,.03);
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 16%,transparent),rgba(255,255,255,.02) 46%)}
.ln-col::before{content:"";position:absolute;left:-1px;right:-1px;top:0;height:4px;background:var(--c)}
.ln-col.c-c{--c:#06B6D4;--cl:#22D3EE}
.ln-col.c-v{--c:#7C3AED;--cl:#A78BFA}
.ln-col.c-i{--c:#4F46E5;--cl:#818CF8}
.ln-col.c-i::before{background:linear-gradient(90deg,#4F46E5,#2563EB,#06B6D4)}
.ln-val{display:flex;align-items:baseline;gap:10px;margin:4px 0 12px;font-family:var(--ln-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cl)}
.ln-val b{font-weight:600;color:var(--ln-text3);letter-spacing:.1em}
.ln-col h3{margin:0 0 14px;font-family:var(--ln-disp);font-weight:400;font-size:clamp(1.3rem,1.75vw,1.55rem);line-height:1.18;color:var(--ln-text)}
@media (min-width:981px){.ln-col h3{min-height:3.54em}}
.ln-col ul{list-style:none;margin:0;padding:14px 0 0;border-top:1px solid var(--ln-line);display:grid;gap:10px}
.ln-col li{position:relative;padding-left:18px;font-size:.95rem;line-height:1.5;color:var(--ln-text2)}
.ln-col li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--cl)}
.ln-col li strong{color:var(--ln-text);font-weight:600}

/* Fundament: was viele mitbringen */
.ln-base{margin:14px 0 0;padding:18px clamp(16px,3vw,28px);border:1px dashed var(--ln-line2);border-radius:12px;background:rgba(255,255,255,.025);
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.ln-base .ln-kicker{margin:0 6px 0 0;flex:0 0 auto}
.ln-chip{display:inline-flex;align-items:center;min-height:34px;padding:4px 14px;border:1px solid var(--ln-line2);border-radius:999px;font-size:.9rem;color:var(--ln-text2);background:rgba(255,255,255,.03)}
.ln-base p{flex:1 1 100%;margin:4px 0 0;font-size:.88rem;line-height:1.5;color:var(--ln-text3)}

.ln-foot{margin:18px 0 0;font-size:.92rem;line-height:1.55;color:var(--ln-text3);max-width:52em}
.ln-foot a{color:#22D3EE;text-decoration:none;font-weight:600}
.ln-foot a:hover{text-decoration:underline}

@media (max-width:980px){
  .ln-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ln-col{border-top:1px solid var(--ln-line);border-radius:14px;overflow:hidden}
  .ln-roof{clip-path:polygon(50% 0,100% 40%,100% 100%,0 100%,0 40%)}
  .ln-roof::before{clip-path:polygon(50% 0,100% 40%,100% calc(40% + 3px),50% 3px,0 calc(40% + 3px),0 40%)}
}
@media (max-width:600px){
  .ln{margin-top:26px}
  .ln-cols{grid-template-columns:minmax(0,1fr);padding:0}
  .ln-roof{padding:44px 16px 20px;clip-path:polygon(50% 0,100% 26%,100% 100%,0 100%,0 26%)}
  .ln-roof::before{clip-path:polygon(50% 0,100% 26%,100% calc(26% + 3px),50% 3px,0 calc(26% + 3px),0 26%)}
  .ln-col{padding:18px 16px}
  .ln-base{padding:16px}
}

/* Einbettung auf /faq (ältere Seitenvorlage) */
.ln-faq{max-width:1120px;margin:0 auto 64px;scroll-margin-top:90px}
.ln-faq .ln-q{margin:0 auto 10px;max-width:800px;font-family:var(--f-display,"DM Serif Display",Georgia,serif);font-weight:400;font-size:clamp(1.55rem,2.6vw,2.1rem);line-height:1.2;color:var(--text1,var(--text,#F8FAFC))}
.ln-faq .ln-lead{margin:0 auto;max-width:800px;font-size:1rem;line-height:1.65;color:var(--text2,#94A3B8)}
.ln-faq .ln-cat{max-width:800px;margin:0 auto 12px;font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;color:var(--accent,#2563EB)}