/* ==========================================================
   NerdBoost — style.css
   Seitenspezifisch fuer die Unterseiten (alles ausser index.html).
   Kopfzeile, Navigation, Aufklappmenue und Farben stehen in base.css
   und werden VOR dieser Datei geladen. Dort aendern, nicht hier.
   ========================================================== */

body{line-height:1.55}

code{background:var(--bg3); border:1px solid var(--line-brand); border-radius:6px; padding:2px 7px; font-size:.9em}

/* ===== Hero (Startseite) ===== */
.hero{position:relative; padding:84px 0 62px; text-align:center; overflow:hidden}
.hero .wrap{position:relative; z-index:1}
.kicker{display:inline-block; color:var(--green); font-weight:700; letter-spacing:3px;
  font-size:13px; text-transform:uppercase; margin-bottom:18px;
  border:1px solid var(--line-brand); padding:7px 16px; border-radius:30px}
h1{font-size:clamp(42px,8.5vw,104px); line-height:.98; margin:0 0 18px; font-weight:900; letter-spacing:-2px}
h1 .b{color:var(--green)}
.sub{font-size:clamp(17px,3vw,23px); color:var(--muted); max-width:660px; margin:0 auto 32px}
.hero-meta{margin-top:22px; color:var(--muted); font-size:14px; display:flex; gap:8px 20px; justify-content:center; flex-wrap:wrap}
.hero-meta b{color:var(--text); font-weight:700}

/* Seiten-Header (Unterseiten) */
.page-head{position:relative; overflow:hidden; padding:56px 0 10px; text-align:center;
  border-bottom:1px solid rgba(255,255,255,.05)}
.page-head .wrap{position:relative; z-index:1}
.page-head h1{font-size:clamp(34px,6vw,60px); letter-spacing:-1px}
.page-head p{color:var(--muted); max-width:640px; margin:0 auto; font-size:18px}
.crumb{color:var(--muted); font-size:14px; margin-bottom:14px}
.crumb a{color:var(--green); text-decoration:none}

/* ===== Buttons ===== */
.btn{display:inline-flex; align-items:center; gap:10px; padding:15px 30px; border-radius:13px;
  border:1px solid transparent;   /* damit rahmenlose und gerahmte Knoepfe gleich hoch sind */
  font-weight:800; font-size:17px; text-decoration:none; cursor:pointer; transition:.15s}
.btn-primary{background:var(--green); color:#07130b; box-shadow:0 8px 30px rgba(46,224,106,.26)}
.btn-primary:hover{background:var(--green-dark)}
.btn-ghost{background:var(--bg2); color:var(--text); border:1px solid var(--line-brand)}
.btn-ghost:hover{border-color:var(--green)}
/* Knopf-Reihe: alle Knoepfe gleich breit (richtet sich nach dem breitesten).
   Raster statt Flexbox, weil grid-auto-columns:1fr allen Spalten dieselbe Breite gibt.
   width:fit-content + margin:auto zentriert die Reihe unabhaengig vom Elternteil. */
.cta-row{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:14px;
  width:max-content; margin-inline:auto; justify-items:stretch}
.cta-row .btn{width:100%; justify-content:center}
@media (max-width:900px){
  .cta-row{grid-auto-flow:row; width:100%; max-width:340px}
}

/* ===== Sections ===== */
section{padding:58px 0; border-top:1px solid rgba(255,255,255,.04)}
section.first{border-top:0}
h2{font-size:clamp(27px,4.6vw,40px); font-weight:900; letter-spacing:-1px; margin:0 0 12px; text-align:center}
h3{font-size:21px; margin:0 0 8px}
.lead{color:var(--muted); text-align:center; max-width:620px; margin:0 auto 40px; font-size:18px}

/* ===== Karten / Grid ===== */
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px}
.card{background:var(--flaeche); border:1px solid var(--line-brand); border-radius:16px; padding:26px}
.card p{margin:0; color:var(--muted); font-size:15px}
.card .ic{font-size:30px; margin-bottom:14px; display:block}
a.card{text-decoration:none; display:block; transition:.15s}
a.card:hover{border-color:var(--green); transform:translateY(-2px)}
.card .more{color:var(--green); font-weight:700; font-size:14px; margin-top:14px; display:inline-block}

/* Kategorie-Karte (ausführlich) */
.cat{background:var(--flaeche); border:1px solid var(--line-brand); border-radius:18px; padding:28px; margin-bottom:18px}
.cat-head{display:flex; align-items:center; gap:14px; margin-bottom:8px; flex-wrap:wrap}
.cat-head .ic{font-size:32px}
.cat-head h2{margin:0; font-size:23px; font-weight:800; letter-spacing:-.4px; text-align:left}
.cat > p{color:var(--muted); margin:0 0 18px; font-size:16px}
.tool-list{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:10px}
.tool-list li{background:var(--flaeche-tief); border:1px solid rgba(255,255,255,.06); border-radius:11px; padding:13px 15px; font-size:15px}
.tool-list b{display:block; color:var(--text)}
.tool-list span{color:var(--muted); font-size:14px}

/* ===== Steps ===== */
.steps{counter-reset:s; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px}
.step{background:var(--flaeche); border:1px solid var(--line-brand); border-radius:16px; padding:26px 24px; position:relative}
.step::before{counter-increment:s; content:counter(s); position:absolute; top:-16px; left:24px;
  width:38px; height:38px; border-radius:50%; background:var(--green); color:#07130b;
  font-weight:900; display:grid; place-items:center; font-size:18px}
.step h3{margin:10px 0 6px; font-size:19px}
.schritt-titel{margin:10px 0 6px; font-size:19px; font-weight:800; letter-spacing:-.3px; text-align:left}
.step p{margin:0; color:var(--muted); font-size:15px}

/* ===== Demo-Rahmen ===== */
.demo-frame{max-width:840px; margin:0 auto; border:1px solid var(--line-brand); border-radius:18px;
  overflow:hidden; background:var(--bg3); box-shadow:0 20px 60px rgba(0,0,0,.45)}
.demo-frame .ratio{position:relative; width:100%; aspect-ratio:16/9}
.demo-frame .ratio iframe,.demo-frame .ratio img,.demo-frame .ratio svg{position:absolute; inset:0; width:100%; height:100%; border:0}
.demo-badge{display:block; text-align:center; margin-top:16px; color:var(--muted); font-size:14px}

/* ===== Status-Kennzeichnungen (GEPLANT / OPTIONAL) ===== */
.ph{display:inline-block; background:rgba(255,193,7,.12); color:#ffc94a; border:1px dashed rgba(255,193,7,.45);
  border-radius:20px; padding:3px 11px; font-size:12px; font-weight:700; letter-spacing:.5px; vertical-align:middle}

/* ===== Download ===== */
.dl-card{max-width:760px; margin:0 auto; background:linear-gradient(180deg,rgba(27,31,37,.78),rgba(23,27,33,.78));
  border:1px solid var(--line-brand); border-radius:22px; padding:34px 30px}
.dl-head{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:10px}
.dl-sub{margin:0 0 12px; font-size:17px; font-weight:800; letter-spacing:-.2px}
.dl-head h2{margin:0; font-size:25px; font-weight:800; letter-spacing:-.5px; text-align:left}
.badge{display:inline-block; background:rgba(46,224,106,.14); color:var(--green); border:1px solid var(--line-brand);
  padding:5px 12px; border-radius:20px; font-size:13px; font-weight:700}
.dl-meta{color:var(--muted); font-size:14px; margin:0 0 22px; display:flex; gap:6px 18px; flex-wrap:wrap}
.dl-meta b{color:var(--text)}
.dl-actions{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:24px}
.incl{list-style:none; padding:0; margin:0 0 20px; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:8px 18px}
.incl li{color:var(--muted); font-size:15px; padding-left:26px; position:relative}
.incl li::before{content:"✓"; position:absolute; left:0; color:var(--green); font-weight:900}
.divider{height:1px; background:var(--line-brand); margin:24px 0}
.hash{background:var(--flaeche-tief); border:1px solid var(--line-brand); border-radius:12px; padding:14px 16px; font-size:13px}
.hash-row{display:flex; align-items:center; gap:10px; justify-content:space-between;
  font-family:ui-monospace,'Cascadia Code',Consolas,monospace; word-break:break-all}
.hash-row+.hash-row{margin-top:8px; padding-top:8px; border-top:1px solid rgba(255,255,255,.05)}
.hash-row .k{color:var(--green); font-weight:700; flex:0 0 auto}
/* Wartet auf eine Funktion: Kopier-Knopf fuer die Pruefsummen auf download.html
   (Gegenstueck steht in site.js). Kommt zurueck, sobald der Stick zum Download steht. */
.copy{background:var(--bg2); border:1px solid var(--line-brand); color:var(--muted); border-radius:8px;
  padding:4px 10px; font-size:12px; cursor:pointer; flex:0 0 auto}
.copy:hover{color:var(--text); border-color:var(--green)}
.note{color:var(--muted); font-size:13px; margin-top:14px}
.req{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; max-width:840px; margin:32px auto 0}
.req div{background:var(--flaeche); border:1px solid var(--line-brand); border-radius:14px; padding:18px 20px; font-size:15px}
.req b{display:block; color:var(--green); font-size:13px; text-transform:uppercase; letter-spacing:1px; margin-bottom:4px}

/* ===== FAQ / Details ===== */
.faq{max-width:780px; margin:0 auto}
details{background:var(--flaeche); border:1px solid var(--line-brand); border-radius:13px; padding:0 20px; margin-bottom:12px}
summary{cursor:pointer; padding:18px 0; font-weight:700; font-size:17px; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:12px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; color:var(--green); font-size:24px; font-weight:400; transition:.2s}
details[open] summary::after{transform:rotate(45deg)}
details p{margin:0 0 20px; color:var(--muted); font-size:15px}
details ul{margin:0 0 20px; color:var(--muted); font-size:15px; padding-left:20px}

/* ===== Trust ===== */
.trust{max-width:820px; margin:0 auto; background:var(--flaeche); border:1px solid var(--line-brand);
  border-radius:18px; padding:30px; display:flex; gap:20px; align-items:flex-start}
.trust .shield{font-size:40px; flex:0 0 auto}
.trust p{margin:0 0 10px; color:var(--muted); font-size:15px}
.trust p:last-child{margin:0}

/* ===== Signup ===== */
.signup{max-width:660px; margin:0 auto; text-align:center}
/* Wartet auf eine Funktion: Anmeldefeld fuer den E-Mail-Verteiler (projekte.html).
   Der Verteiler ist angekuendigt, aber noch nicht eingerichtet. */
.form{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:22px}
.form input{padding:15px 18px; border-radius:12px; border:1px solid var(--line-brand);
  background:var(--bg); color:var(--text); font-size:16px; min-width:250px; flex:1}
.form input::placeholder{color:#6f7885}

/* ===== Socials ===== */
.socials-row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:26px}
.social{display:inline-flex; align-items:center; gap:8px; padding:12px 22px; border-radius:12px;
  background:var(--bg2); border:1px solid var(--line-brand); text-decoration:none; font-weight:700; color:var(--text)}
.social:hover{border-color:var(--green)}

/* ===== Fließtext (Rechtstexte) ===== */
.prose{max-width:760px; margin:0 auto; color:var(--muted); font-size:16px}
.prose h2{text-align:left; font-size:24px; margin:34px 0 10px; color:var(--text)}
.prose h3{font-size:19px; margin:24px 0 8px; color:var(--text)}
.prose p,.prose li{color:var(--muted)}
.prose ul{padding-left:20px}
.prose a{color:var(--green)}

/* ===== Footer ===== */
footer{border-top:1px solid var(--line-brand); padding:40px 0 34px; color:var(--muted); font-size:14px}
.foot-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:26px; margin-bottom:26px}
.foot-grid h2{color:var(--text); font-size:15px; margin:0 0 10px;
  font-weight:700; letter-spacing:0; text-align:left}
.foot-grid a{display:block; color:var(--muted); text-decoration:none; padding:3px 0}
.foot-grid a:hover{color:var(--green)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.06); padding-top:20px; text-align:center}
.foot-brand{font-weight:800; color:var(--text); font-size:18px; margin-bottom:8px}
.foot-bottom a{color:var(--green); text-decoration:none; margin:0 8px}