/* assets/styles.css */
:root{--primary:#156082;--accent:#00796B;--bg:#ffffff;--fg:#0f172a;--muted:#475569;--card:#ffffff;--border:#e2e8f0;--ring:0 10px 40px rgba(2,6,23,.07);--net:rgba(21,96,130,.55);--pulse:rgba(0,179,164,.55)}
:root.dark{--primary:#1E90B4;--accent:#00B3A4;--bg:#0b1020;--fg:#e5e7eb;--muted:#94a3b8;--card:#0f1529;--border:#1e293b;--ring:0 10px 40px rgba(0,0,0,.35);--net:rgba(155,230,245,.6);--pulse:rgba(0,243,220,.65)}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
a{color:inherit;text-decoration:none;outline-offset:2px}
.fa-solid,.fa-regular,.fa-brands{color:var(--primary)}
.container{max-width:1180px;margin:0 auto;padding:0 20px}
header{position:fixed;top:0;width:100%;z-index:50;background:color-mix(in oklab,var(--bg),transparent 10%);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;padding:14px 0;gap:20px}
#nav-menu{display:flex;align-items:center;gap:20px;margin-left:auto}
#nav-toggle{display:none;margin-left:auto;z-index:110}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:24px}
.brand .logo{height:45px;width:auto}
.links{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.links a{display:inline-flex;align-items:center;padding:8px 14px;min-height:44px}
.links a.active{color:var(--primary);font-weight:700}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:14px;padding:10px 16px;border:1px solid var(--border);box-shadow:var(--ring);outline-offset:2px;min-width:44px;min-height:44px;transition:all .2s ease}
.btn.primary{background:var(--primary);color:#fff;border-color:transparent}
.btn.ghost{background:transparent}
.toggle{width:44px;height:44px;border-radius:12px;border:1px solid var(--border);display:grid;place-items:center;outline-offset:2px}
.toggle img{width:24px;height:auto;}
/* Interactive states */
a:hover,a:focus-visible{outline:2px solid var(--accent);background:color-mix(in oklab,var(--accent),var(--bg) 85%);text-decoration:underline;border-radius:4px}
.btn:hover,.btn:focus-visible,.toggle:hover,.toggle:focus-visible{outline:2px solid var(--accent);background:color-mix(in oklab,var(--accent),var(--bg) 85%)}
.btn.primary:hover,.btn.primary:focus-visible{background:color-mix(in oklab,var(--primary),var(--fg) 20%)}
section{padding:72px 0}
.hero{position:relative;overflow:hidden}
.hero .kicker{display:inline-flex;gap:8px;align-items:center;border:1px solid var(--border);border-radius:999px;padding:6px 10px;background:color-mix(in oklab,var(--bg),#fff 6%);color:var(--muted);font-size:14px}
.h1{font-size:clamp(34px,4.6vw,60px);line-height:1.05;font-weight:800;margin:10px 0}
.lead{color:var(--muted);font-size:18px;max-width:760px}
.grid{display:grid;gap:28px}
.two{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.cards{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.card{background:var(--card);border:1px solid var(--border);border-radius:22px;padding:22px;box-shadow:var(--ring);transition:all .2s ease}
.cards .card .app-icon{
  display:block;
  margin:0 auto 10px;
  text-align:center;
  font-size:32px;
}
.tabs .tab>label .app-icon{
  font-size:20px;
}
.cards .card .service-icon{
  display:block;
  margin:0 auto 10px;
  text-align:center;
  font-size:32px;
}
.cards .card h3{text-align:center}
#anwendungen .cards{grid-auto-rows:1fr;}
#anwendungen .card{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
#anwendungen .card .app-btn{
  align-self:center;
  margin-top:auto;
}
.muted{color:var(--muted)}
footer{border-top:1px solid var(--border)}
.badges{display:flex;gap:8px;flex-wrap:wrap}
.badge{border:1px solid var(--border);border-radius:999px;padding:6px 10px;font-size:13px;background:var(--card)}
.marquee{overflow:hidden;user-select:none;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:color-mix(in oklab,var(--bg),#fff 6%)}
.marquee-track{display:flex;gap:36px;white-space:nowrap;animation:scroll 28s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:999px;padding:16px 20px;background:#f5f5f5;box-shadow:var(--ring)}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease, transform .6s ease}
.reveal.show{opacity:1;transform:none}
#neuro{position:fixed;inset:0;z-index:-1;pointer-events:none}
@media (max-width:780px){
  #nav-toggle{display:grid}
  #nav-menu{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);flex-direction:column;justify-content:center;align-items:center;gap:16px;z-index:100;margin-left:0;overflow:hidden;height:100vh;color:#fff}
  #nav-menu.open{display:flex}
  #nav-menu .links{flex-direction:column;align-items:center;gap:8px}
  #nav-menu .links a{padding:8px 14px;color:#fff}
  .lang-switch{flex-direction:row;flex-wrap:wrap;gap:8px}
}
/* Dark‑Mode form placeholders */
html.dark input.card, html.dark textarea.card { color: #e5e7eb; }
html.dark input.card::placeholder, html.dark textarea.card::placeholder { color: rgba(229,231,235,0.82); opacity:1; }
html.dark input.card::-webkit-input-placeholder, html.dark textarea.card::-webkit-input-placeholder { color: rgba(229,231,235,0.82); opacity:1; }
html.dark input.card::-moz-placeholder, html.dark textarea.card::-moz-placeholder { color: rgba(229,231,235,0.82); }
html.dark input.card:-ms-input-placeholder, html.dark textarea.card:-ms-input-placeholder { color: rgba(229,231,235,0.82); }
/* About-spezifisch */
.ph{display:grid;place-items:center;aspect-ratio:4/3;border:1px dashed var(--border);border-radius:18px;background:color-mix(in oklab,var(--bg),#fff 6%)}
html.dark .ph span{color:#e5e7eb}

.founder-img{max-width:70%;display:block;margin:auto}

.marquee .chip .tech-icon{
  height:48px;
  width:auto;
  margin-right:8px;
  vertical-align:middle;
}
.icon-top {
  display:block;
  margin:0 auto 10px;
  text-align:center;
  font-size:32px;
}

.text-center {
  text-align:center;
}

.v-center {
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.justify {
  text-align:justify;
}

.checklist {
  list-style:none;
  padding-left:0;
}
.checklist li::before {
  content:"✔";
  color:var(--accent);
  margin-right:8px;
}

/* GDPR checkbox styling */
#contact-form .gdpr {
  display:flex;
  align-items:center;
  gap:8px;
}
#contact-form .gdpr input[type="checkbox"] {
  width:18px;
  height:18px;
}
#contact-form .gdpr a {
  text-decoration:underline;
}
/* Tabs for applications page */
.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:20px}
.tabs .tab{display:contents}
.tabs .tab>input{display:none}
.tabs label{order:1;grid-column:span 1;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--border);border-bottom:none;border-radius:6px 6px 0 0;cursor:pointer;background:var(--bg-soft);transition:all .2s ease}
.tabs label:hover,
.tabs label:focus-visible{outline:2px solid var(--accent);background:color-mix(in oklab,var(--accent),var(--bg) 85%)}
.tabs .tab-content{order:2;grid-column:1/-1;border:1px solid var(--border);padding:16px;display:none;transition:all .2s ease}
.tabs input:checked+label+.tab-content,
.tabs .tab.active .tab-content{display:block}
.tabs .tab-content img{max-width:100%;height:auto;display:block;margin:0 auto 8px;border-radius:4px}
.tab-body{display:flex;gap:20px;align-items:flex-start}
.tab-body img{max-width:200px;margin-left:auto}
/* Tab fade animation */
.tabs .tab-content.fade{animation:tab-fade .2s ease}
@keyframes tab-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (max-width:600px){
  .tabs{grid-template-columns:1fr}
  .tabs label,
  .tabs .tab-content{order:initial}
}
@media (prefers-reduced-motion:reduce){
  .btn,.card,.tabs label,.tabs .tab-content{transition:none}
  .tabs .tab-content.fade{animation:none}
  .reveal{opacity:1 !important;transform:none !important;transition:none}
}