/* GaubeTec – gemeinsames Design der neuen Seiten (ki-schulung.html, login.html)
   Quelle: Startseite index.html + DESIGN_mara.md. Farben nur hier in :root, danach nur Variablen. */
:root{
  --blue:#3b5bfc; --cyan:#00f5ff; --dark:#0a0e1f; --dark2:#0d1227; --navy:#111829; --black:#050810; --white:#fff;
  --warn:#ffa500;
  --text-soft:rgba(255,255,255,.8);
  --text-mid:rgba(255,255,255,.6);
  --line:rgba(59,91,252,.15);
  --line-strong:rgba(59,91,252,.25);
  --line-divider:rgba(255,255,255,.05);
  --card:rgba(59,91,252,.04);
  --blue-glow:rgba(59,91,252,.6);
  --blue-hero:rgba(59,91,252,.18);
  --cyan-a06:rgba(0,245,255,.06);
  --cyan-a15:rgba(0,245,255,.15);
  --dot-red:#ff5f57; --dot-yellow:#febc2e; --dot-green:#28c840;
  --scan:rgba(0,0,0,.04);
  --font-title:'GT Orbitron','Orbitron',monospace;
  --font-mono:'GT Mono','Share Tech Mono',monospace;
  --font-text:'GT Inter','Inter',-apple-system,sans-serif;
  --nav-h:56px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--dark);color:var(--white);font-family:var(--font-text);overflow-x:hidden;line-height:1.5}
body::after{content:'';position:fixed;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,var(--scan) 2px,var(--scan) 4px);pointer-events:none;z-index:9999}
a{color:inherit}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

.skip{position:absolute;left:1rem;top:-100px;z-index:200;background:var(--black);color:var(--cyan);font-family:var(--font-mono);padding:.8rem 1rem;text-decoration:none;border:1px solid var(--cyan)}
.skip:focus{top:.5rem}

/* Hero */
.hero{position:relative;text-align:center;padding:5rem 2rem;background:radial-gradient(ellipse at 50% 0,var(--blue-hero),transparent 60%),var(--dark);overflow:hidden}
.stamp{display:inline-block;margin-bottom:1.8rem;transform:rotate(-4deg);border:2px solid var(--cyan);outline:1px solid var(--cyan);outline-offset:3px;padding:.6rem 1.3rem;font-family:var(--font-title);font-weight:700;font-size:.8rem;letter-spacing:.3em;text-transform:uppercase;color:var(--cyan);background:var(--cyan-a06);box-shadow:0 0 25px var(--cyan-a15);pointer-events:none;user-select:none}
.eyebrow{font-family:var(--font-mono);font-size:.88rem;color:var(--cyan);margin-bottom:1rem;letter-spacing:.1em}
h1{font-family:var(--font-title);font-weight:900;font-size:clamp(1.4rem,5vw,2.6rem);letter-spacing:.1em;text-transform:uppercase;line-height:1.3;overflow-wrap:break-word;max-width:900px;margin:0 auto}
h1 span{color:var(--blue)}
.hero-subtitle{font-size:1rem;color:var(--text-soft);max-width:520px;margin:1.4rem auto 2rem;line-height:1.7}
.hint{font-size:.85rem;color:var(--text-mid);max-width:440px;margin:1.2rem auto 0;line-height:1.6}
.checks{list-style:none;max-width:560px;margin:2.5rem auto 0;text-align:left;display:grid;gap:.9rem}
.checks li{display:flex;gap:.8rem;align-items:flex-start;color:var(--text-soft);font-size:.95rem;line-height:1.6}
.checks svg{width:20px;height:20px;flex:none;margin-top:.2rem;stroke:var(--cyan);fill:none;stroke-width:2}

/* Knöpfe */
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;min-height:48px;padding:1rem 2.5rem;border:2px solid var(--blue);color:var(--white);font-family:var(--font-title);font-weight:400;font-size:.78rem;letter-spacing:.2em;text-decoration:none;text-transform:uppercase;position:relative;overflow:hidden;transition:all .3s ease;background:transparent;z-index:0}
.btn-primary::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:var(--blue);transition:left .3s ease;z-index:-1}
.btn-primary:hover::before{left:0}
.btn-primary:hover{box-shadow:0 0 35px var(--blue-glow)}
.btn-primary svg{width:18px;height:18px;flex:none;stroke:var(--white);fill:none;stroke-width:1.8}
.btn-quiet{border-color:var(--line-strong)}
.link-mono{display:inline-flex;align-items:center;min-height:44px;padding:0 .6rem;font-family:var(--font-mono);font-size:.85rem;letter-spacing:.1em;color:var(--cyan);text-decoration:none;overflow-wrap:anywhere}
.link-mono:hover{text-decoration:underline}

/* Sektionen */
section.block{padding:5rem 2rem}
.section-title{text-align:center;font-family:var(--font-title);font-weight:700;font-size:clamp(1rem,3vw,1.6rem);letter-spacing:.2em;margin-bottom:3rem;text-transform:uppercase;overflow-wrap:break-word;hyphens:auto}
.section-title span{color:var(--blue)}
.alt{background:var(--navy);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.prose{max-width:680px;margin:0 auto}
.prose p{font-size:.95rem;line-height:1.8;color:var(--text-mid);margin-bottom:1rem}
.prose p strong{color:var(--white);font-weight:600}
.prose .term{margin-top:1.6rem;padding-left:1rem;border-left:2px solid var(--blue)}

/* Terminal */
#faehigkeiten{background:var(--dark2);padding:4rem 2rem;position:relative}
#faehigkeiten::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--blue),transparent)}
.terminal-box{max-width:680px;margin:0 auto;background:var(--black);border:1px solid var(--line-strong);border-radius:6px;padding:1.5rem 2rem;font-family:var(--font-mono)}
.terminal-header{display:flex;gap:8px;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--line-divider)}
.dot{width:12px;height:12px;border-radius:50%}
.dot-red{background:var(--dot-red)}.dot-yellow{background:var(--dot-yellow)}.dot-green{background:var(--dot-green)}
.t-line{color:var(--cyan);font-size:.88rem;margin-bottom:1.1rem;line-height:1.5}
.t-prompt{color:var(--cyan)}
.t-white{color:var(--white);text-transform:uppercase;letter-spacing:.04em}
.t-desc{display:block;color:var(--text-mid);font-size:.82rem;padding-left:1.2rem;margin-top:.2rem;text-transform:none;letter-spacing:0}
.cursor{display:inline-block;width:8px;height:14px;background:var(--cyan);animation:blink 1s step-end infinite;vertical-align:middle;margin-left:2px}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
@keyframes appear{to{opacity:1}}
.js .terminal-box .t-line{opacity:0}
.js .terminal-box.run .t-line{animation:appear .1s ease forwards;animation-delay:calc(var(--i,0) * .5s + .2s)}

/* Karten (nicht klickbar: kein Lift, kein Zeiger) */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem;max-width:1000px;margin:0 auto}
.card{background:var(--card);border:1px solid var(--line);padding:2rem 1.5rem;text-align:center;display:flex;flex-direction:column;align-items:center}
.card svg{width:32px;height:32px;stroke:var(--cyan);fill:none;stroke-width:1.6;margin-bottom:1rem}
.card h3{font-family:var(--font-title);font-weight:400;font-size:.8rem;letter-spacing:.15em;color:var(--cyan);text-transform:uppercase;margin-bottom:.8rem}
.card .lead{font-family:var(--font-title);font-weight:700;font-size:.85rem;letter-spacing:.04em;line-height:1.5;margin-bottom:.8rem}
.card p{font-size:.82rem;line-height:1.6;color:var(--text-mid)}
.card .fits{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line);width:100%}
.after-cards{text-align:center;max-width:560px;margin:3rem auto 0}
.after-cards p{color:var(--text-soft);line-height:1.7;margin-bottom:1.5rem}

/* Wer dahintersteckt */
.who{max-width:900px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:3rem;align-items:center}
.who img{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:370/330;object-fit:cover;object-position:center top;border:1px solid var(--line-strong)}
.who h3{font-family:var(--font-title);font-weight:700;font-size:clamp(1.1rem,2.4vw,1.5rem);letter-spacing:.03em;margin-bottom:1.2rem;line-height:1.4}
.who p{font-size:.92rem;line-height:1.75;color:var(--text-mid);margin-bottom:1rem}

/* Was du brauchst */
.needs{list-style:none;max-width:680px;margin:0 auto 2rem;display:grid;gap:1rem}
.needs li{display:flex;gap:1rem;align-items:flex-start;background:var(--card);border:1px solid var(--line);padding:1.1rem 1.3rem;font-size:.92rem;line-height:1.6;color:var(--text-soft)}
.needs svg{width:22px;height:22px;flex:none;margin-top:.1rem;stroke:var(--cyan);fill:none;stroke-width:1.7}

/* Kontakt */
#kontakt{padding:6rem 2rem;text-align:center;background:var(--dark2);position:relative}
#kontakt::before,#kontakt::after{content:'';position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--blue),transparent)}
#kontakt::before{top:0}#kontakt::after{bottom:0}
.cta-title{font-family:var(--font-title);font-weight:700;font-size:clamp(1.1rem,4vw,2rem);margin-bottom:.75rem;letter-spacing:.1em;text-transform:uppercase}
.cta-subtitle{color:var(--text-mid);margin:0 auto 2.5rem;max-width:560px;font-size:.95rem;font-family:var(--font-mono);letter-spacing:.1em;line-height:1.7}
.contact-lines{margin-top:1.8rem;display:flex;flex-direction:column;align-items:center;gap:.2rem}

/* Login */
.login-box{max-width:520px;margin:2rem auto 0}
.login-actions{display:flex;flex-direction:column;align-items:center;gap:1rem;margin-top:2.2rem}
.lead-strong{font-family:var(--font-text);font-size:1.15rem;line-height:1.6;color:var(--white);max-width:520px;margin:1.6rem auto 0;font-weight:600}

/* Footer */
footer{background:var(--black);padding:2.5rem 2rem;text-align:center;border-top:1px solid var(--line)}
.footer-logo{width:55px;height:auto;margin-bottom:1rem;opacity:.6}
.footer-text{font-family:var(--font-mono);color:var(--text-mid);font-size:.7rem;letter-spacing:.35em;text-transform:uppercase;line-height:1.8}
.footer-links{margin-top:1rem;display:flex;flex-wrap:wrap;justify-content:center}
.footer-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 .6rem;font-family:var(--font-mono);font-size:.75rem;letter-spacing:.15em;color:var(--text-mid);text-decoration:none;text-transform:uppercase}
.footer-links a.strong{color:var(--cyan)}
.footer-links a:hover{color:var(--white)}
.brandnote{max-width:640px;margin:1.2rem auto 0;font-size:.75rem;line-height:1.7;color:var(--text-mid)}

/* Scroll-Einblenden: nur wenn JS läuft; Rückfall im Skript nach 1,5 s */
.js .fade-up{opacity:0;transform:translateY(25px);transition:opacity .7s ease,transform .7s ease}
.js .fade-up.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .fade-up{opacity:1;transform:none;transition:none}
  .js .terminal-box .t-line{opacity:1;animation:none}
  .cursor{animation:none}
  .btn-primary,.btn-primary::before{transition:none}
}

@media (max-width:700px){
  .hero{padding:3.5rem 1.5rem}
  .stamp{font-size:.72rem;letter-spacing:.25em;transform:rotate(-3deg)}
  .btn-primary{padding:.85rem 1.4rem;font-size:.68rem;letter-spacing:.1em;width:100%;max-width:340px}
  section.block{padding:3.5rem 1.5rem}
  .section-title{font-size:1rem;letter-spacing:.15em;margin-bottom:2rem}
  #faehigkeiten{padding:3rem 1rem}
  .terminal-box{padding:1rem 1.2rem}
  .t-line{font-size:.78rem}
  .t-desc{font-size:.78rem;padding-left:.9rem}
  .cards{grid-template-columns:1fr}
  .who{grid-template-columns:minmax(0,1fr);gap:1.8rem}
  #kontakt{padding:4rem 1.5rem}
  .cta-title{font-size:1.1rem}
  .footer-text{letter-spacing:.2em}
}

/* ---- Umbau 06.11.2026: Vor Ort buchbar ---- */
.card-top{display:flex;align-items:center;justify-content:center;min-height:3.2rem;margin-bottom:.6rem;width:100%}
.chip{display:inline-block;border:1px solid var(--cyan);padding:.45rem .9rem;font-family:var(--font-mono);font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);background:var(--cyan-a06)}
.stamp-card{display:inline-block;transform:rotate(-4deg);border:2px solid var(--cyan);outline:1px solid var(--cyan);outline-offset:3px;padding:.35rem .8rem;font-family:var(--font-title);font-weight:700;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);background:var(--cyan-a06);box-shadow:0 0 18px var(--cyan-a15);pointer-events:none;user-select:none;white-space:nowrap}
.card-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin-top:auto;padding:0 .6rem;font-family:var(--font-mono);font-size:.85rem;letter-spacing:.1em;color:var(--cyan);text-decoration:none}
.card .fits + .card-link{margin-top:.8rem}
.card-link:hover{text-decoration:underline}
.paket-grid{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.5rem;align-items:stretch}
.pk{background:var(--card);border:1px solid var(--line);padding:1.8rem 1.6rem}
.pk h3{font-family:var(--font-title);font-weight:400;font-size:.8rem;letter-spacing:.15em;text-transform:uppercase;color:var(--cyan);margin-bottom:1.2rem}
.pk ul{list-style:none;display:grid;gap:.9rem}
.pk li{display:flex;gap:.8rem;align-items:flex-start;font-size:.92rem;line-height:1.6;color:var(--text-soft)}
.pk svg{width:20px;height:20px;flex:none;margin-top:.15rem;fill:none;stroke-width:2;stroke:var(--cyan)}
.pk-no{background:transparent}
.pk-no h3{color:var(--text-mid)}
.pk-no li{color:var(--text-mid);font-size:.88rem}
.pk-no svg{stroke:var(--text-mid)}
.price-box{max-width:760px;margin:2.5rem auto 0;background:var(--black);border:1px solid var(--line-strong);border-radius:6px;padding:1.5rem 2rem;font-family:var(--font-mono)}
.price-box .terminal-header{align-items:center}
.tb-title{margin-left:.6rem;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-mid)}
.p-line{font-size:.85rem;line-height:1.7;color:var(--text-soft);margin-bottom:1.1rem;padding-left:1.2rem;text-indent:-1.2rem;overflow-wrap:break-word}
.p-line:last-child{margin-bottom:0}
.mitwirkung{max-width:760px;margin:1.5rem auto 0;font-size:.92rem;line-height:1.7;color:var(--text-mid)}
.values{max-width:1000px;margin:4rem auto 0;text-align:center}
.values-title{font-family:var(--font-title);font-weight:700;font-size:clamp(.9rem,2.4vw,1.2rem);letter-spacing:.2em;text-transform:uppercase;margin-bottom:.8rem}
.values-intro{font-size:.95rem;color:var(--text-soft);margin-bottom:2rem}
.v-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.v-tile{background:var(--card);border:1px solid var(--line);padding:1.4rem .8rem;display:flex;flex-direction:column;align-items:center;gap:.2rem}
.v-pre{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;color:var(--text-mid);min-height:1.2em}
.v-num{font-family:var(--font-title);font-weight:900;font-size:clamp(1.6rem,4vw,2.3rem);color:var(--cyan);line-height:1.2}
.v-lab{font-size:.8rem;line-height:1.5;color:var(--text-mid);margin-top:.4rem}
@media (max-width:700px){
  .paket-grid{grid-template-columns:minmax(0,1fr)}
  .pk{padding:1.4rem 1.2rem}
  .price-box{padding:1rem 1.2rem}
  .p-line{font-size:.8rem}
  .v-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v-tile{padding:1.1rem .6rem}
}
/* Abnahme mara 06.11.: Chip des anfragbaren Wegs staerker als die Stempel, Preis-Kasten mit Hierarchie, Kachelabstand wie Karten */
.chip{background:var(--cyan);color:var(--dark);border-color:var(--cyan);font-weight:700}
.price-box p.p-line:first-of-type{font-size:1rem;color:#fff}
.price-box p.p-line:not(:first-of-type){font-size:.8rem;color:var(--text-mid)}
.v-grid{gap:1.5rem}