/*
 * loqal Subpage Styles – Glassmorphism Shell
 * Shared by all pages except index.html
 * Load after loqal-global.css
 */

/* ═══ FONT + BASE ═══ */
:root {
  --green: #19d6dc;
  --green-dim: rgba(25,214,220,0.1);
  --bg: #030610;
  --bg1: #070b18;
  --bg2: #0c1020;
  --t1: #f0f0f0;
  --t2: #6a6a74;
  --t3: #282838;
  --border: rgba(255,255,255,0.07);
}

*,*::before,*::after { box-sizing: border-box; }
html { background: var(--bg); }
body {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
  background: var(--bg) !important;
  color: var(--t1) !important;
  overflow-x: hidden;
  cursor: none;
}
::selection { background: var(--green); color: #000; }
::-webkit-scrollbar { width: 0; }
a { color: inherit; text-decoration: none; }
@media (hover: none) { body { cursor: auto; } }

/* ═══ CURSOR ═══ */
#cur { position: fixed; width: 10px; height: 10px; border-radius: 50%; background: var(--green); pointer-events: none; z-index: 9999; transform: translate(-50%,-50%); mix-blend-mode: difference; transition: transform .15s; }
#cur-r { position: fixed; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(25,214,220,.35); pointer-events: none; z-index: 9998; transform: translate(-50%,-50%); }
@media (hover: none) { #cur, #cur-r { display: none; } }

/* ═══ NAV OVERRIDE (glass pill) ═══ */
nav {
  position: fixed !important;
  top: 1.25rem !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: calc(100% - 2.5rem) !important;
  max-width: 1100px !important;
  background: rgba(8,8,8,.7) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 1.25rem !important;
  height: 56px !important;
  z-index: 500 !important;
  transition: border-color .3s !important;
}
nav:hover { border-color: rgba(25,214,220,.12) !important; }

/* ═══ PAGE HERO – glass card style ═══ */
.pg-hero {
  min-height: 72vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 5vw 8vh;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.pg-hero::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 70% 25%, rgba(25,214,220,.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 70% at 15% 80%, rgba(99,102,241,.055) 0%, transparent 55%);
}
.pg-hero > * { position: relative; z-index: 1; }

/* Hero breadcrumb / kicker */
.pg-kicker {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .6rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--green);
  margin-bottom: 1.75rem;
}
.pg-kicker::before { content: ''; width: 20px; height: 1px; background: var(--green); }

/* Hero title */
.pg-h1 {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: clamp(2.75rem, 6vw, 6rem) !important;
  font-weight: 900 !important;
  line-height: .95 !important;
  letter-spacing: -.04em !important;
  color: var(--t1) !important;
  max-width: 900px;
}
.pg-h1 .accent { color: var(--green); }

.pg-sub {
  font-size: 1rem; line-height: 1.75; color: var(--t2);
  max-width: 520px; margin-top: 1.5rem;
}

/* Hero CTA */
.pg-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2.5rem; }

/* ═══ BUTTONS ═══ */
.btn-primary {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--green); color: #000; font-weight: 700; font-size: .9rem;
  padding: .875rem 2rem; border-radius: .625rem; border: none; cursor: pointer;
  transition: box-shadow .25s, transform .15s;
}
.btn-primary:hover { box-shadow: 0 0 40px rgba(25,214,220,.5); transform: translateY(-2px); }
.btn-ghost {
  display: inline-flex; align-items: center; gap: .5rem;
  background: transparent; color: var(--t2); font-size: .9rem;
  padding: .875rem 1.75rem; border-radius: .625rem; border: 1px solid var(--border); cursor: pointer;
  transition: border-color .2s, color .2s;
}
.btn-ghost:hover { border-color: rgba(255,255,255,.18); color: var(--t1); }

/* ═══ SECTION BASE ═══ */
.s { padding: 7rem 5vw; }
.s-alt { background: var(--bg1); }
.s-inner { max-width: 1200px; margin: 0 auto; }
.s-kicker { display: inline-flex; align-items: center; gap: .6rem; font-size: .6rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--green); margin-bottom: 1.75rem; }
.s-kicker::before { content: ''; width: 20px; height: 1px; background: var(--green); }
.s-h2 { font-family: 'Space Grotesk', sans-serif; font-size: clamp(2rem, 4.5vw, 4rem); font-weight: 900; line-height: 1.05; letter-spacing: -.04em; color: var(--t1); }
.s-lead { font-size: 1rem; line-height: 1.75; color: var(--t2); max-width: 520px; margin-top: 1.25rem; }

/* ═══ GLASS CARDS ═══ */
.gc {
  background: rgba(13,13,18,.72);
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 24px 64px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.055);
  border-radius: 1.25rem;
  transition: border-color .3s;
}
.gc:hover { border-color: rgba(25,214,220,.18); }

/* ═══ FEATURE BENTO GRID ═══ */
.bento {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-top: 4rem;
}
@media (max-width: 768px) { .bento { grid-template-columns: 1fr; } }
.bento-card { padding: 2.5rem; border-radius: 1.25rem; }
.bento-card.span2 { grid-column: span 2; }
@media (max-width: 768px) { .bento-card.span2 { grid-column: auto; } }

.bc-icon { width: 44px; height: 44px; border-radius: .625rem; background: rgba(25,214,220,.09); border: 1px solid rgba(25,214,220,.2); display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; }
.bc-icon iconify-icon { color: var(--green); font-size: 1.2rem; }
.bc-h { font-family: 'Space Grotesk', sans-serif; font-size: clamp(1.1rem, 2.5vw, 1.6rem); font-weight: 800; color: var(--t1); line-height: 1.15; letter-spacing: -.03em; margin-bottom: .75rem; }
.bc-p { font-size: .875rem; line-height: 1.75; color: var(--t2); }
.bc-stat { font-family: 'Space Grotesk', sans-serif; font-size: 2.75rem; font-weight: 900; color: var(--green); letter-spacing: -.04em; margin-top: 1.5rem; }
.bc-stat-l { font-size: .72rem; color: var(--t2); margin-top: .3rem; }

/* ═══ STATS ROW ═══ */
.stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 640px) { .stats-row { grid-template-columns: 1fr; } }
.stat-gc { padding: 2.25rem 2rem; border-radius: 1.25rem; background: rgba(13,13,18,.72); border: 1px solid rgba(255,255,255,.07); box-shadow: 0 24px 64px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.055); display: flex; flex-direction: column; gap: .5rem; transition: border-color .3s; }
.stat-gc:hover { border-color: rgba(25,214,220,.18); }
.stat-num { font-family: 'Space Grotesk', sans-serif; font-size: clamp(2.25rem, 4.5vw, 3.75rem); font-weight: 900; line-height: 1; letter-spacing: -.04em; color: var(--t1); }
.stat-num.green { color: var(--green); }
.stat-label { font-size: .8rem; color: var(--t2); line-height: 1.5; }

/* ═══ PROCESS LIST ═══ */
.process-list { margin-top: 4rem; }
.proc-item { display: grid; grid-template-columns: 4.5rem 1fr; gap: 2rem; align-items: start; padding: 2rem 0; border-top: 1px solid var(--border); transition: border-top-color .2s; }
.proc-item:last-child { border-bottom: 1px solid var(--border); }
.proc-item:hover { border-top-color: rgba(25,214,220,.2); padding-left: .625rem; }
.proc-n { font-family: 'Space Grotesk', sans-serif; font-size: .68rem; font-weight: 700; letter-spacing: .08em; color: var(--green); padding-top: .2rem; }
.proc-t { font-family: 'Space Grotesk', sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--t1); margin-bottom: .4rem; }
.proc-d { font-size: .85rem; line-height: 1.75; color: var(--t2); }

/* ═══ USE-CASE LIST ═══ */
.use-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 3rem; }
@media (max-width: 600px) { .use-list { grid-template-columns: 1fr; } }
.use-item { display: flex; align-items: flex-start; gap: .75rem; padding: 1.25rem; border-radius: .875rem; background: rgba(13,13,18,.72); border: 1px solid rgba(255,255,255,.07); font-size: .85rem; color: var(--t2); line-height: 1.6; }
.use-item iconify-icon { color: var(--green); font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }

/* ═══ CTA SECTION ═══ */
.pg-cta {
  padding: 8rem 5vw; text-align: center; position: relative; overflow: hidden;
  background: var(--bg); border-top: 1px solid var(--border);
}
.pg-cta::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(25,214,220,.055) 0%, transparent 65%);
}
.pg-cta > * { position: relative; z-index: 1; }
.pg-cta h2 { font-family: 'Space Grotesk', sans-serif; font-size: clamp(2rem, 5vw, 4rem); font-weight: 900; line-height: 1.05; letter-spacing: -.04em; color: var(--t1); margin-bottom: 1.25rem; }
.pg-cta p { font-size: 1rem; color: var(--t2); max-width: 420px; margin: 0 auto 2.5rem; line-height: 1.75; }

/* ═══ LIVE DOT ═══ */
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); display: inline-block; box-shadow: 0 0 6px rgba(25,214,220,.7); animation: blink-sp 1.8s step-end infinite; }
@keyframes blink-sp { 0%,100%{opacity:1} 50%{opacity:.25} }

/* ═══ URGENCY BAR ═══ */
.urgency-banner { display: flex; align-items: center; justify-content: center; gap: .75rem; padding: .55rem 1.5rem; font-size: .72rem; font-weight: 600; color: var(--t2); background: linear-gradient(90deg, transparent, rgba(25,214,220,.04), transparent); border-bottom: 1px solid rgba(25,214,220,.1); }
.urgency-banner a { color: var(--green); }

/* ═══ FOOTER ═══ */
footer { background: var(--bg1); border-top: 1px solid var(--border); }
.footer-inner { max-width: 1200px; margin: 0 auto; padding: 5rem 5vw 2.5rem; }
.footer-top { display: grid; grid-template-columns: 1fr 2fr; gap: 4rem; margin-bottom: 3.5rem; }
@media (max-width: 768px) { .footer-top { grid-template-columns: 1fr; gap: 2.5rem; } }
.footer-brand p { font-size: .82rem; color: var(--t2); line-height: 1.8; margin-top: 1.25rem; }
.footer-links { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
@media (max-width: 640px) { .footer-links { grid-template-columns: 1fr 1fr; } }
.footer-col h4 { font-family: 'Space Grotesk', sans-serif; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--t3); margin-bottom: 1.25rem; }
.footer-col a { display: block; font-size: .82rem; color: var(--t2); margin-bottom: .6rem; transition: color .2s; }
.footer-col a:hover { color: var(--green); }
.footer-bottom { border-top: 1px solid var(--border); padding-top: 1.5rem; display: flex; justify-content: space-between; align-items: center; font-size: .72rem; color: var(--t3); flex-wrap: wrap; gap: .75rem; }

/* ═══ MOBILE MENU ═══ */
#mob { display: none; position: fixed; inset: 0; background: rgba(8,8,8,.97); backdrop-filter: blur(20px); z-index: 490; padding: 5.5rem 2rem 2rem; overflow-y: auto; }
#mob.open { display: block; }
#mob a, .mob-group-title { display: block; padding: .75rem 0; font-size: 1.05rem; color: var(--t2); border-bottom: 1px solid var(--border); }
.mob-group-title { font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--t3); margin-top: 1.5rem; border: none; padding-bottom: .5rem; }
#mob a:hover { color: var(--green); }
#mob-close { position: absolute; top: 1.25rem; right: 1.5rem; background: none; border: none; color: var(--t1); cursor: pointer; font-size: 1.5rem; }
.mob-btn { display: none !important; background: none !important; border: none !important; cursor: pointer !important; color: var(--t1) !important; }
@media (max-width: 900px) { .nav-links { display: none !important; } .mob-btn { display: flex !important; } }

/* ═══ AOS OVERRIDES ═══ */
[data-aos] { opacity: 0; transform: translateY(28px); transition: opacity .65s cubic-bezier(0.32,0.72,0,1), transform .65s cubic-bezier(0.32,0.72,0,1); }
[data-aos].aos-animate { opacity: 1; transform: translateY(0); }

/* ═══ FAQ ═══ */
.faq-list { max-width: 760px; margin: 3.5rem auto 0; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item[open] { border-bottom-color: rgba(25,214,220,.2); }
.faq-item summary { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 0; cursor: pointer; list-style: none; -webkit-appearance: none; font-size: .9rem; font-weight: 600; color: var(--t1); gap: 1rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item[open] summary { color: var(--green); }
.faq-toggle { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; transition: background .2s; }
.faq-item[open] .faq-toggle { background: rgba(25,214,220,.1); border-color: rgba(25,214,220,.3); }
.faq-answer { padding-bottom: 1.25rem; font-size: .85rem; line-height: 1.75; color: var(--t2); }

/* ═══ GLOBAL GLASS OVERRIDES (alle Unterseiten) ═══ */

/* Feature cards → Glass */
.feat-card {
  background: rgba(13,13,18,.75) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.055) !important;
  transition: border-color .3s, box-shadow .3s, transform .3s !important;
}
.feat-card:hover {
  border-color: rgba(25,214,220,.18) !important;
  box-shadow: 0 32px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(25,214,220,.09), inset 0 1px 0 rgba(255,255,255,.07) !important;
  transform: translateY(-4px) !important;
}

/* Stats strip → Glass cells */
.stat-cell, .stats-strip > div {
  background: rgba(13,13,18,.72) !important;
}

/* Step cards → Glass */
.step {
  background: rgba(13,13,18,.72) !important;
  border-right: 1px solid rgba(255,255,255,.06) !important;
  transition: background .3s !important;
}
.step:hover { background: rgba(13,13,18,.92) !important; }

/* Steps container → Glass border */
.steps {
  border: 1px solid rgba(255,255,255,.07) !important;
  background: transparent !important;
}

/* Use-case grid → Glass cells */
.use-cell {
  background: rgba(13,13,18,.72) !important;
  transition: background .3s !important;
}
.use-cell:hover { background: rgba(13,13,18,.92) !important; }
.use-grid {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
}

/* Bento-card → Glass */
.bento-card {
  background: rgba(13,13,18,.72) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.055) !important;
  transition: border-color .3s !important;
}
.bento-card:hover { border-color: rgba(25,214,220,.18) !important; }

/* Auto-card → Glass */
.auto-card {
  background: rgba(13,13,18,.72) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.45) !important;
  transition: border-color .25s, transform .2s, box-shadow .25s !important;
}
.auto-card:hover {
  border-color: rgba(25,214,220,.2) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.55) !important;
}

/* CTA section atmosphere */
.cta-s::before {
  background: radial-gradient(ellipse 65% 70% at 50% 50%, rgba(25,214,220,.055) 0%, transparent 65%) !important;
}

/* Solution cards / Branchen cards → Glass */
.sol-card, .branche-card, .card-glass {
  background: rgba(13,13,18,.72) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.055) !important;
  transition: border-color .3s, transform .3s !important;
}
.sol-card:hover, .branche-card:hover, .card-glass:hover {
  border-color: rgba(25,214,220,.18) !important;
  transform: translateY(-4px) !important;
}

/* Price cards → Glass */
.price-card {
  background: rgba(13,13,18,.72) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.055) !important;
}

/* Testimonial cards → Glass */
.testi-card, .testimonial-card {
  background: rgba(13,13,18,.72) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.055) !important;
  transition: border-color .3s, transform .3s !important;
}
.testi-card:hover, .testimonial-card:hover {
  border-color: rgba(25,214,220,.18) !important;
  transform: translateY(-4px) !important;
}

/* Tool cards → Glass */
.tool-card {
  background: rgba(13,13,18,.72) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.45) !important;
}
.tool-card:hover { border-color: rgba(25,214,220,.18) !important; }

/* ═══ LEGACY FOOTER CLASSES (automations/loesungen pages) ═══ */
footer { background: var(--bg1) !important; border-top: 1px solid var(--border) !important; }
.foot-top { display: grid !important; grid-template-columns: 1fr 1fr 1fr 1fr !important; gap: 3rem !important; padding: 4.5rem 5vw 2.5rem !important; max-width: 1200px !important; margin: 0 auto !important; }
@media (max-width: 768px) { .foot-top { grid-template-columns: 1fr 1fr !important; padding: 3rem 5vw !important; } }
.foot-brand p, .foot-brand a { font-size: .82rem !important; color: var(--t2) !important; line-height: 1.8 !important; }
.foot-brand a:hover { color: var(--green) !important; }
.foot-col h4 { font-family: 'Space Grotesk', sans-serif !important; font-size: .72rem !important; font-weight: 700 !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: var(--t3) !important; margin-bottom: 1.25rem !important; }
.foot-col a { display: block !important; font-size: .82rem !important; color: var(--t2) !important; margin-bottom: .6rem !important; transition: color .2s !important; }
.foot-col a:hover { color: var(--green) !important; }
.foot-bottom { border-top: 1px solid var(--border) !important; padding: 1.5rem 5vw !important; display: flex !important; justify-content: space-between !important; font-size: .72rem !important; color: var(--t3) !important; max-width: 1200px !important; margin: 0 auto !important; flex-wrap: wrap !important; gap: .75rem !important; }

/* ═══ STADTSEITEN / WEBDESIGN HERO override ═══ */
.city-hero, .wd-hero, .lp-hero {
  background: var(--bg) !important;
  position: relative !important;
  overflow: hidden !important;
}
.city-hero::before, .wd-hero::before, .lp-hero::before {
  content: '' !important;
  position: absolute !important; inset: 0 !important; pointer-events: none !important;
  background:
    radial-gradient(ellipse 75% 55% at 70% 25%, rgba(25,214,220,.06) 0%, transparent 60%),
    radial-gradient(ellipse 55% 65% at 15% 80%, rgba(99,102,241,.055) 0%, transparent 55%) !important;
}

/* ═══ NAV-CTA BUTTON ═══ */
.nav-cta, button.nav-cta {
  background: var(--green) !important;
  color: #000 !important;
  font-weight: 700 !important;
  font-size: .78rem !important;
  padding: .5rem 1.25rem !important;
  border-radius: .5rem !important;
  border: none !important;
  cursor: pointer !important;
  transition: box-shadow .25s, transform .15s !important;
}
.nav-cta:hover { box-shadow: 0 0 28px rgba(25,214,220,.5) !important; transform: translateY(-1px) !important; }

/* ═══ TOOL PAGES (ROI, SEO, etc.) ═══ */
.tool-section, .calc-section {
  background: var(--bg1) !important;
  border-radius: 1.25rem !important;
}
.input-field, input[type="range"], input[type="number"], select {
  background: rgba(13,13,18,.72) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  color: var(--t1) !important;
  border-radius: .5rem !important;
  padding: .625rem 1rem !important;
}
input[type="range"] { padding: 0 !important; }
input:focus, select:focus { border-color: rgba(25,214,220,.3) !important; outline: none !important; }