:root{
  --bg:#ffffff; --fg:#0f172a; --muted:#6b7280; --card:#f8fafc; --border:#e5e7eb; --elev: color-mix(in oklab, var(--card) 92%, transparent);
  --brand:#3152ff; --brand2:#25b7f3; --brand3:#a78bfa; --brand4:#22d3ee; --radius:16px; --shadow: 0 16px 48px rgba(2,6,23,.08);
  --acc-security:#22d3ee; --acc-text:#a78bfa; --acc-url:#60a5fa; --acc-data:#22c55e; --acc-dev:#7c3aed; --acc-media:#10b981; --acc-pdf:#f97316;
  --badge-fg:#0b1020;
}
html[data-theme="dark"]{
  --bg:#0b1020; --fg:#e6e8ee; --muted:#9aa4b2; --card:#0f182a; --border:#1e2a45; --elev: color-mix(in oklab, var(--card) 94%, transparent);
  --brand:#7da2ff; --brand2:#25b7f3; --brand3:#a78bfa; --brand4:#22d3ee; --shadow: 0 22px 56px rgba(0,0,0,.55);
  --badge-fg:#ffffff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  background: var(--bg);
  color:var(--fg)
}
.container{ max-width:1240px; margin:0 auto; padding:26px 16px }
.small{ color:var(--muted); font-size:.92rem }

header.site{
  position:sticky;
  top:0;
  z-index:60;
  backdrop-filter: blur(8px);
  background: color-mix(in oklab, var(--bg) 85%, transparent);
  border-bottom:1px solid var(--border)
}
.header-row{ display:flex; align-items:center; justify-content:space-between; gap:16px }
.brand img{ height:30px }
.logo-light-theme{ display:inline }
.logo-dark-theme{ display:none }
html[data-theme="dark"] .logo-light-theme{ display:none }
html[data-theme="dark"] .logo-dark-theme{ display:inline }
nav.main a, .nav-btn{
  text-decoration:none;
  color:inherit;
  opacity:.9;
  padding:8px 12px;
  border-radius:10px
}
nav.main a:hover, .nav-btn:hover{
  opacity:1;
  background:var(--elev)
}
.nav-group{ display:flex; align-items:center; gap:12px }
.nav-btn{
  appearance:none;
  border:1px solid var(--border);
  background:linear-gradient(160deg, var(--elev), transparent);
  padding:8px 12px;
  box-shadow:var(--shadow);
  cursor:pointer
}

.mega{
  position:absolute;
  left:0;
  right:0;
  top:100%;
  display:none;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  translate:0 -6px;
}
.mega.open{
  display:block;
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  translate:0 0
}
.mega-panel{
  margin:12px auto 0;
  max-width:1200px;
  background: color-mix(in oklab, var(--card) 85%, transparent);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  box-shadow: var(--shadow)
}
.mega-grid{ display:grid; gap:16px; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)) }
.group{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px
}
.group h4{
  display:flex;
  align-items:center;
  gap:8px;
  margin:.2rem 0 .6rem
}
.group .dot{
  width:10px;
  height:10px;
  border-radius:999px;
  display:inline-block
}
.group a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:10px;
  text-decoration:none;
  color:inherit
}
.group a:hover{ background: var(--elev) }
.group a svg{ width:18px; height:18px }

.hero.center{
  position:relative;
  isolation:isolate;
  text-align:center;
  padding:96px 16px 40px;
  overflow:visible
}
.hero-inner{
  position:relative;
  z-index:2;
  display:grid;
  place-items:center
}
.hero h1{
  margin:.2rem 0 .6rem;
  font-size: clamp(44px, 6.8vw, 86px)
}
.hero p{
  margin:0;
  color:var(--muted);
  max-width:820px
}

.ambient{
  position:absolute;
  inset:-10% -15% -30% -15%;
  z-index:0;
  pointer-events:none
}
.blob{
  position:absolute;
  width:60vmax;
  height:60vmax;
  border-radius:50%;
  filter: blur(95px);
  opacity:.34
}
.blob.b1{
  top:-10%;
  left:-12%;
  background: radial-gradient(circle at 30% 30%, color-mix(in oklab, var(--brand3) 48%, transparent), transparent 58%);
  animation: drift1 22s ease-in-out infinite alternate
}
.blob.b2{
  bottom:-22%;
  right:-10%;
  background: radial-gradient(circle at 70% 70%, color-mix(in oklab, var(--brand2) 44%, transparent), transparent 58%);
  animation: drift2 26s ease-in-out infinite alternate
}
.blob.b3{
  top:6%;
  right:22%;
  background: radial-gradient(circle at 50% 50%, color-mix(in oklab, var(--brand4) 40%, transparent), transparent 58%);
  animation: drift3 28s ease-in-out infinite alternate
}
@supports (mix-blend-mode: screen){
  .blob{ mix-blend-mode: screen }
}
@keyframes drift1{
  0%{ transform: translate3d(0,0,0) scale(1)}
  50%{ transform: translate3d(3%,-2%,0) scale(1.05)}
  100%{ transform: translate3d(0,0,0) scale(1)}
}
@keyframes drift2{
  0%{ transform: translate3d(0,0,0) scale(1)}
  50%{ transform: translate3d(-4%,3%,0) scale(1.06)}
  100%{ transform: translate3d(0,0,0) scale(1)}
}
@keyframes drift3{
  0%{ transform: translate3d(0,0,0) scale(1)}
  50%{ transform: translate3d(2%,4%,0) scale(1.04)}
  100%{ transform: translate3d(0,0,0) scale(1)}
}

.hero .grain{
  position:absolute;
  left:50%;
  top:0;
  width:100vw;
  height:100%;
  transform: translateX(-50%);
  z-index:1;
  pointer-events:none;
  background-image: radial-gradient(currentColor 1px, transparent 1px);
  background-size:3px 3px;
  opacity:.08;
  -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 0%, #000 55%, transparent 100%);
  mask-image: radial-gradient(circle at 50% 40%, #000 0%, #000 55%, transparent 100%);
}

.grid.cards{
  display:grid;
  gap:16px;
  grid-template-columns: repeat(auto-fit, minmax(290px,1fr));
  grid-auto-rows: 1fr
}
.card{
  background: var(--elev);
  border:1.5px solid var(--border);
  border-radius: var(--radius);
  padding:18px;
  box-shadow: var(--shadow);
  height:100%;
  display:grid;
  grid-template-rows:auto 1fr auto;
  transition: transform .12s ease
}
.card:hover{ transform: translateY(-2px) }
.card .top{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:6px
}
.card .top svg{ width:22px; height:22px }
.card h3{
  margin:.2rem 0 .2rem;
  font-size:1.18rem
}
.badge{
  margin-left:auto;
  font-size:.72rem;
  border:1px solid var(--border);
  background:var(--bg);
  padding:.2rem .5rem;
  border-radius:999px
}
.card p{
  margin:0;
  color:var(--muted)
}
.card .actions{
  display:flex;
  gap:10px;
  margin-top:12px
}
.card[data-cat="Security"]{
  --accent: var(--acc-security);
  border-color: color-mix(in oklab, var(--acc-security) 55%, var(--border))
}
.card[data-cat="Text & Writing"]{
  --accent: var(--acc-text);
  border-color: color-mix(in oklab, var(--acc-text) 55%, var(--border))
}
.card[data-cat="URL & SEO"]{
  --accent: var(--acc-url);
  border-color: color-mix(in oklab, var(--acc-url) 55%, var(--border))
}

.icon-badge{
  width:42px;
  height:42px;
  border-radius:12px;
  display:grid;
  place-items:center;
  position:relative;
  background:
    radial-gradient(75% 75% at 25% 20%, color-mix(in oklab, var(--accent) 70%, transparent), transparent 60%),
    radial-gradient(60% 60% at 80% 70%, color-mix(in oklab, var(--brand) 36%, transparent), transparent 65%);
  box-shadow: 0 14px 28px color-mix(in oklab, var(--accent) 28%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 40%, var(--border));
}
.icon-badge::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:14px;
  filter: blur(16px);
  opacity:.55;
  background: radial-gradient(60% 60% at 50% 50%, color-mix(in oklab, var(--accent) 26%, transparent), transparent 60%)
}
.icon-badge svg{
  width:20px;
  height:20px;
  color: var(--badge-fg)
}

.btn{
  position:relative;
  appearance:none;
  border:1px solid var(--border);
  background: linear-gradient(160deg, var(--elev), transparent);
  color:inherit;
  padding:11px 16px;
  border-radius:12px;
  cursor:pointer;
  box-shadow: var(--shadow);
  transition: transform .08s ease, filter .2s ease;
  text-decoration:none;
  display:inline-block;
  overflow:hidden;
  contain:paint;
  backface-visibility:hidden;
}
.btn:hover{ transform: translateY(-1px) }
.btn:active{ transform: translateY(0) scale(.98) }
.btn:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--accent) 45%, transparent),
    0 0 0 6px color-mix(in oklab, var(--accent) 18%, transparent)
}
.btn-primary{
  color:#fff;
  border-color: transparent;
  background:
    radial-gradient(120% 120% at -10% -10%, color-mix(in oklab, var(--brand) 92%, transparent), transparent 40%),
    linear-gradient(180deg, color-mix(in oklab, var(--brand) 88%, transparent), color-mix(in oklab, var(--brand2) 88%, transparent))
}
.btn-primary::after{
  content:"";
  position:absolute;
  inset:-1px;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%);
  transform: translateX(-60%);
  opacity:0;
  transition: transform .55s ease, opacity .18s ease;
  border-radius: inherit;
  pointer-events:none
}
.btn-primary:hover::after{
  opacity:.55;
  transform: translateX(60%)
}
@media (prefers-reduced-motion: reduce){
  .btn-primary::after{
    transform:none;
    transition: opacity .18s ease
  }
  .btn-primary:hover::after{
    opacity:.35
  }
}
.btn-ghost{
  background: var(--elev);
  border-color: var(--border)
}
.btn-small{
  padding:7px 12px;
  font-size:.86rem;
  margin-top:10px
}

input[type="text"], input[type="search"], input[type="number"], textarea{
  width:100%;
  background:var(--bg);
  color:var(--fg);
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px
}
textarea{
  min-height:160px;
  resize:vertical
}
.row{ display:grid; gap:12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) }

/* hero + tools search */
.searchwrap{
  position:relative;
  width:min(760px, 92vw);
  margin:18px auto 0;
  z-index:40
}
.searchwrap input[type="search"]{
  width:100%;
  background:var(--bg);
  color:var(--fg);
  border:1px solid var(--border);
  border-radius:999px;
  padding:18px 20px 18px 48px;
  outline:none;
  box-shadow: var(--shadow);
  font-size:1rem;
}
.searchwrap .icon{
  position:absolute;
  left:18px;
  top:50%;
  transform: translateY(-50%);
  opacity:.85;
  pointer-events:none;
}
.searchwrap .icon svg{ display:block }

.suggest{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 6px);
  display:none;
  background: var(--elev);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow: var(--shadow);
  overflow:hidden;
  z-index:50
}
.suggest.open{ display:block }
.suggest a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  text-decoration:none;
  color:inherit;
  border-top:1px solid color-mix(in oklab, var(--border) 65%, transparent)
}
.suggest a:first-child{ border-top:none }
.suggest .dot{
  width:8px;
  height:8px;
  border-radius:999px;
  display:inline-block
}

.chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:12px 0 0 0
}
.chip{
  border:1px solid var(--border);
  background:var(--elev);
  border-radius:999px;
  padding:8px 12px;
  cursor:pointer;
  user-select:none
}
.chip.active{
  border-color: color-mix(in oklab, var(--brand) 45%, var(--border))
}

.section{
  margin:46px 0
}
.section h2{
  margin:.2rem 0 .8rem;
  font-size: clamp(22px, 4.6vw, 30px)
}

/* blog cards */
.blog-grid{
  display:grid;
  gap:16px;
  grid-template-columns: repeat(auto-fit, minmax(260px,1fr))
}
.post{
  background:var(--elev);
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:260px
}
.post a{
  color:inherit;
  text-decoration:none;
  display:flex;
  flex-direction:column;
  height:100%
}
.post .ph{
  position:relative;
  aspect-ratio:16/9;
  width:100%;
  overflow:hidden;
}
.post .ph img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.post .body{
  padding:14px 16px 16px 16px;
  display:flex;
  flex-direction:column;
  gap:6px;
  flex:1
}
.post .body h3{
  margin:.2rem 0 .1rem;
  font-size:1.02rem
}
.post .date{
  color:var(--muted);
  font-size:.85rem;
  letter-spacing:.04em;
  text-transform:uppercase
}
.post .excerpt{
  flex:1;
  max-height:3.2em;
  overflow:hidden
}
.post .read{
  align-self:flex-start
}

.footer{
  border-top:1px solid var(--border);
  margin-top:38px;
  background: color-mix(in oklab, var(--bg) 92%, transparent)
}
.footer .grid{
  display:grid;
  gap:18px;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr))
}
.footer a{
  color:inherit;
  text-decoration:none;
  opacity:.9
}
.footer a:hover{
  opacity:1;
  text-decoration:underline
}
.footer .brand img{ height:26px }

@media (max-width:560px){
  nav.main a{ display:none }
}

/* === Accessibility widget & Back-to-top === */

html[data-font-scale="large"] body{
  font-size:18px;
}
html[data-font-scale="xlarge"] body{
  font-size:19px;
  line-height:1.7;
}

/* High contrast mode (zusätzlich zu den Themes, auch Darkmode-kompatibel) */
html[data-contrast="high"]{
  --bg:#000000;
  --fg:#ffffff;
  --muted:#e5e7eb;
  --card:#000000;
  --border:#fbbf24;
  --elev:#000000;
}

/* Unterstrichene Links für bessere Erkennbarkeit */
html[data-link-style="underline"] a{
  text-decoration: underline !important;
  text-underline-offset: 0.12em;
}

/* Bewegungen reduzieren */
html[data-motion="reduced"] *{
  animation: none !important;
  transition: none !important;
}
html[data-motion="reduced"] .blob,
html[data-motion="reduced"] .grain{
  animation:none !important;
}

/* Launcher-Button (♿) unten rechts */
.a11y-launcher{
  position:fixed;
  bottom:20px;
  right:20px;
  width:44px;
  height:44px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:var(--elev);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  cursor:pointer;
  z-index:80;
}
.a11y-launcher span{
  font-size:1.1rem;
}

/* Panel, das sich über dem Launcher öffnet */
.a11y-panel{
  position:fixed;
  bottom:80px;
  right:20px;
  width:260px;
  max-width:90vw;
  padding:14px;
  border-radius:16px;
  background:var(--elev);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  z-index:80;
  transform: translateY(10px);
  opacity:0;
  pointer-events:none;
  transition: opacity .16s ease, transform .16s ease;
}
.a11y-panel.open{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
}
.a11y-panel h3{
  margin:.1rem 0 .4rem;
  font-size:.98rem;
}
.a11y-panel .a11y-section{
  margin-bottom:10px;
}
.a11y-panel label{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:.88rem;
  margin-top:4px;
}
.a11y-font-buttons{
  display:flex;
  gap:8px;
  margin-top:4px;
}
.a11y-font-buttons button{
  flex:1;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--bg);
  padding:6px 0;
  cursor:pointer;
  font-size:.9rem;
  color:var(--fg);
}
.a11y-font-buttons button:hover{
  background:var(--elev);
}
.a11y-font-buttons button:focus-visible,
.a11y-panel input:focus-visible{
  outline:2px solid var(--brand4);
  outline-offset:2px;
}

/* Darkmode-Feintuning für A11y-Widget & Back-to-top */
html[data-theme="dark"] .a11y-launcher,
html[data-theme="dark"] .a11y-panel,
html[data-theme="dark"] #backToTop{
  background: color-mix(in oklab, var(--card) 94%, transparent);
  border-color: color-mix(in oklab, var(--border) 90%, transparent);
}

/* High-contrast-Feintuning für A11y-UI */
html[data-contrast="high"] .a11y-launcher,
html[data-contrast="high"] .a11y-panel,
html[data-contrast="high"] #backToTop{
  border-color:#fbbf24;
  box-shadow:none;
}

/* Back-to-top-Button – etwas über dem A11y-Icon */
#backToTop{
  position:fixed;
  bottom:82px;
  right:20px;
  width:40px;
  height:40px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--elev);
  box-shadow:var(--shadow);
  display:grid;
  place-items:center;
  font-size:1.1rem;
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transition: opacity .16s ease;
  z-index:75;
}
#backToTop.visible{
  opacity:1;
  pointer-events:auto;
}

/* Grid-Layout für Toolcards auf Start/Tools */
.grid.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

/* 2 Spalten auf Tablet, 1 Spalte auf Mobile */
@media (max-width: 900px) {
  .grid.cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .grid.cards {
    grid-template-columns: minmax(0, 1fr);
  }
}