/* Intro Motion */
.will-animate{transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
.will-animate.show{opacity:1!important;transform:translateY(0)!important}
.delay-1{transition-delay:.08s}.delay-2{transition-delay:.16s}.delay-3{transition-delay:.24s}

/* Header */
header{
  background:rgba(255,255,255,.75);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:background-color .35s ease, backdrop-filter .35s ease, box-shadow .35s ease, border-color .35s ease;
}

/* Accent icon pill */
.icon-pill{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#9785FF;color:#fff}

/* Slider */
.slider{position:relative;display:block;overflow:hidden!important;background:transparent!important;padding-bottom:clamp(20px,4vw,48px)}
.slider .slides{display:flex!important;width:100%;will-change:transform;transition:transform .6s cubic-bezier(.22,.61,.36,1);backface-visibility:hidden;transform:translate3d(0,0,0)}
.slider img{flex:0 0 100%!important;width:100%!important;height:auto!important;object-fit:contain!important;display:block!important;user-select:none;-webkit-user-drag:none}
.slider .nav{display:none!important}
.slider .dots{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);display:flex;gap:8px;z-index:10}
.slider .dots button{width:28px;height:6px;border-radius:999px;border:0;cursor:pointer;background:rgba(0,0,0,.15);transition:all .18s cubic-bezier(.22,.61,.36,1)}
.slider .dots button[aria-selected="true"]{background:#9785FF;width:40px}
.slider .dots button:hover{width:40px;background:rgba(0,0,0,.25)}

/* Buttons global */
a.bg-accent,button.bg-accent{transition:transform .18s cubic-bezier(.22,.61,.36,1),box-shadow .18s,filter .18s,border-color .18s}

/* Header: CTA */
header a.bg-accent{border:1px solid #d9d9e3;background-color:#9785FF}
header a.bg-accent:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,0,0,.12);filter:brightness(1.02);border-color:#9785FF}
header a.bg-accent:active{transform:translateY(0);box-shadow:0 6px 18px rgba(0,0,0,.10);border-color:#7b69e5}
header a.bg-accent:focus-visible{outline:0;box-shadow:0 0 0 2px rgba(151,133,255,.35);border-color:#9785FF}

/* Download: App-Store Button */
#download a.bg-accent{display:inline-flex;align-items:center;justify-content:center;border:1px solid #d9d9e3;background:#9785FF;color:#fff;border-radius:12px;transition:transform .18s,box-shadow .18s,filter .18s,border-color .18s}
#download a.bg-accent:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,0,0,.12);filter:brightness(1.02);border-color:#9785FF}
#download a.bg-accent:active{transform:translateY(0);box-shadow:0 6px 18px rgba(0,0,0,.10);border-color:#7b69e5}
#download a.bg-accent:focus-visible{outline:0;box-shadow:0 0 0 2px rgba(151,133,255,.35);border-color:#9785FF}

/* Textlinks */
a.underline{transition:color .18s,text-underline-offset .18s;text-underline-offset:4px}
a.underline:hover{color:#9785FF;text-underline-offset:8px}

/* Nav links */
header nav a{transition:color .18s}
header nav a:hover{color:#9785FF}

/* Cards (allg.) */
.rounded-2xl.p-6.bg-white.border{transition:transform .18s cubic-bezier(.22,.61,.36,1),box-shadow .18s}
.rounded-2xl.p-6.bg-white.border:hover{transform:translateY(-3px);box-shadow:0 12px 34px rgba(0,0,0,.10)}

/* Footer links */
footer a{transition:color .18s,opacity .18s}
footer a:hover{color:#9785FF;opacity:.9}

/* Lang-/Theme-Toggle */
#lang-toggle,#theme-toggle{transition:transform .18s,background-color .18s,border-color .18s,color .18s,box-shadow .18s}
#lang-toggle:hover,#theme-toggle:hover{border-color:#9785FF;background:#F1EEFF;color:#2E3547}
#lang-toggle:focus-visible,#theme-toggle:focus-visible{outline:0;box-shadow:0 0 0 2px rgba(151,133,255,.35);transform:translateY(-1px)}

/* Backlink */
a[data-i18n="cl_back"]{display:inline-flex;align-items:center;gap:.4rem;font-size:.875rem;color:#6D7896;padding:.35rem .6rem;border-radius:.5rem;transition:background-color .18s,color .18s,box-shadow .18s;text-decoration:none}
a[data-i18n="cl_back"]:hover{color:#9785FF;background:#F6F7FB}
a[data-i18n="cl_back"]:focus-visible{outline:0;box-shadow:0 0 0 2px rgba(151,133,255,.35)}
a[data-i18n="cl_back"] svg{width:1rem;height:1rem;transition:transform .18s}
a[data-i18n="cl_back"]:hover svg{transform:translateX(-2px)}

/* Legacy feature rows (nicht mehr genutzt, belassen falls woanders referenziert) */
.feat{display:flex;gap:12px;align-items:flex-start;padding:12px 0}
.dot{width:10px;height:10px;border-radius:9999px;background:#9785FF;margin-top:.45rem;flex-shrink:0}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  a.bg-accent,button.bg-accent,a.underline,header nav a,.icon-pill,
  .rounded-2xl.p-6.bg-white.border,.slider .dots button,#lang-toggle,#theme-toggle{transition:none!important}
}

/* -------- DARK MODE -------- */
.dark body{background:#1b1d27;color:#E6E8F0}
.dark section.bg-white,.dark section.bg-grayA-50{background:#1f2130;border-color:#2e3140}
.dark .text-grayA-600,.dark .text-grayA-700,.dark .text-grayA-800{color:#C8CADE!important}
.dark .text-grayA-900{color:#E6E8F0!important}
.dark h1,.dark h2,.dark h3{color:#fff}
.dark .rounded-2xl.p-6.bg-white.border{background:#242638;border-color:#2e3140;box-shadow:none}
.dark .rounded-2xl.p-6.bg-white.border:hover{box-shadow:0 12px 34px rgba(0,0,0,.35)}
.dark .slider .dots button{background:rgba(255,255,255,.22)}
.dark .slider .dots button[aria-selected="true"]{background:#9785FF}
.dark a.underline:hover{color:#9785FF}
.dark .icon-pill{background:#9785FF;color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.dark header nav a:hover,.dark footer a:hover{color:#9785FF}
.dark a[data-i18n="cl_back"]:hover{color:#9785FF;background:#424C63}
.dark #lang-toggle:hover,#theme-toggle:hover{border-color:#9785FF;background:#2f3144;color:#fff}

/* Dark header look */
.dark header{
  background:rgba(34,36,51,.85);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 8px 30px rgba(0,0,0,.35);
  position:sticky;top:0;
}
.dark header::after{
  content:"";position:absolute;inset:0 0 auto 0;height:100%;pointer-events:none;
  background:radial-gradient(120% 60% at 80% -20%, rgba(151,133,255,.18), transparent 60%),
             linear-gradient(to bottom, rgba(255,255,255,.06), rgba(255,255,255,0) 28%);
}

/* Dark: Buttons Rahmen */
.dark header a.bg-accent{border-color:#2e3140}
.dark header a.bg-accent:hover{border-color:#9785FF}
.dark #download a.bg-accent{border-color:#2e3140}
.dark #download a.bg-accent:hover{border-color:#9785FF;filter:brightness(1.05);box-shadow:0 8px 30px rgba(0,0,0,.25)}
.dark .slider .dots button:hover{background:rgba(255,255,255,.32)}

/* Footer */
.dark footer{background:#1f2130;border-color:#2e3140;color:#C8CADE;transition:background-color .3s ease,border-color .3s ease}
.dark footer a{color:#C8CADE}
.dark footer a:hover{color:#9785FF;opacity:.95}

/* Hero CTA */
.btn-hero{
  --btn-bg: linear-gradient(180deg,#9785FF 0%,#7E6BFF 100%);
  --btn-ring: rgba(151,133,255,.35);
  background: var(--btn-bg);color:#fff;border:1px solid #d9d9e3;border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  transition:transform .18s cubic-bezier(.22,.61,.36,1), box-shadow .18s, filter .18s, border-color .18s;
}
.btn-hero:hover{transform:translateY(-2px);filter:brightness(1.02);box-shadow:0 12px 34px rgba(0,0,0,.14);border-color:#9785FF}
.btn-hero:active{transform:translateY(0);box-shadow:0 6px 18px rgba(0,0,0,.12);border-color:#7b69e5}
.btn-hero:focus-visible{outline:0;box-shadow:0 0 0 2px var(--btn-ring), 0 8px 24px rgba(0,0,0,.12)}
.dark .btn-hero{border-color:#2e3140;box-shadow:0 8px 30px rgba(0,0,0,.35)}
.dark .btn-hero:hover{border-color:#9785FF;filter:brightness(1.05);box-shadow:0 10px 36px rgba(0,0,0,.45)}
@media (prefers-reduced-motion:reduce){.btn-hero{transition:none}}

/* Theme button dimensions */
#theme-toggle{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;font-size:16px;padding:0}
#theme-toggle i{font-size:16px;line-height:1}
#theme-toggle:hover{border-color:#9785FF;background:#F1EEFF;color:#2E3547}
.dark #theme-toggle:hover{border-color:#9785FF;background:#2f3144;color:#fff}

/* Scrollbar fallback */
html{scrollbar-gutter:stable both-edges}
@supports not (scrollbar-gutter: stable){html{overflow-y:scroll}}

/* Changelog dark tweaks */
.dark .filter-btn{background:#26293a;border-color:#2e3140;color:#D7DAE5;transition:background .18s,border-color .18s,box-shadow .18s,color .18s}
.dark .filter-btn:hover{background:#2f3347;border-color:#3a3e57}
.dark .filter-btn:active{background:#2a2e41}
.dark .filter-btn:focus-visible{outline:0;box-shadow:0 0 0 2px rgba(151,133,255,.35)}
.dark .filter-active{background:#9785FF!important;color:#fff!important;border-color:transparent!important;box-shadow:0 0 0 2px rgba(151,133,255,.35)}

/* -------------------------
   Screens grid – rahmenlos
-------------------------- */
.screens-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.25rem;
}
@media (min-width:640px){.screens-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1024px){.screens-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}

.screen-card{background:transparent;border:none;padding:0}
.screen-btn{display:block;width:100%;background:transparent;border:0;padding:0;cursor:pointer}
.screen-img{
  width:100%;height:auto;display:block;border:none;border-radius:14px;
  transition:filter .18s ease;
}
.screen-btn:hover .screen-img{filter:brightness(1.04)}
/* Bildunterschrift */
.screen-cap{margin-top:.5rem;font-size:.85rem;color:#55607C;text-align:center}
.dark .screen-cap{color:#C8CADE}

/* -------------------------
   Lightbox – keine Pfeilbewegung
-------------------------- */
.lb{position:fixed;inset:0;z-index:60}
.lb.hidden{display:none}
.lb-bg{position:absolute;inset:0;background:rgba(10,12,20,.8);backdrop-filter:blur(3px)}
.lb-figure{position:absolute;inset:0;display:grid;place-items:center;padding:4vmin}
#lb-img{
  max-width:min(92vw,1200px);max-height:82vh;border:none;border-radius:12px;background:transparent;
}
#lb-cap{margin-top:14px;color:#E6E8F0;font-size:.9rem;text-align:center}

.lb-close,.lb-prev,.lb-next{
  position:absolute;width:44px;height:44px;display:grid;place-items:center;border-radius:12px;
  border:1px solid rgba(255,255,255,.12);background:rgba(24,26,38,.88);color:#fff;
  transition:opacity .18s,background .18s,border-color .18s;
}
.lb-close{top:16px;right:16px}
.lb-prev{top:50%;left:16px;transform:translateY(-50%)}
.lb-next{top:50%;right:16px;transform:translateY(-50%)}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{opacity:.9;background:rgba(36,38,56,.92);border-color:rgba(255,255,255,.22)}

/* -------------------------
   Besonderheiten – Kartenlayout
-------------------------- */
.feat-card{
  display:grid;
  grid-template-columns:12px 1fr;
  gap:14px;
  align-items:start;
  padding:18px 20px;
  border-radius:18px;
  background:#fff;
  border:1px solid #ECEEF3;
  box-shadow:0 6px 18px rgba(0,0,0,.04);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}
.feat-card:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(0,0,0,.08);
  border-color:#D9DDE6;
}
.feat-title{font-weight:600}
.feat-desc{margin-top:.25rem;font-size:.925rem;color:#6D7896}

/* Punkt links in den Karten */
.feat-card .dot{
  width:8px;height:8px;border-radius:9999px;background:#9785FF;margin-top:.45rem;flex-shrink:0;
}

/* Dark Mode für Besonderheiten */
.dark .feat-card{
  background:#242638;
  border-color:#2e3140;
  box-shadow:none;
}
.dark .feat-card:hover{
  border-color:#3a3e57;
  box-shadow:0 14px 36px rgba(0,0,0,.35);
}
.dark .feat-title{color:#E6E8F0}
.dark .feat-desc{color:#C8CADE}

/* Changelog: feste Tag-Spalte, damit nichts verrutscht */
.feat-row{display:grid;grid-template-columns:96px 1fr;gap:.75rem;align-items:start}
.tag-wrap{width:96px;display:flex}
.tag-wrap .tag{margin-right:auto}
@media (max-width:480px){
  .feat-row{grid-template-columns:88px 1fr}
  .tag-wrap{width:88px}
}