/*
  AIYARO Theme Layer
  -------------------
  Diese Datei überschreibt Tailwind-Klassen und globale Farben, um das alte AIYARO-Design zu behalten.
  Du kannst hier einfach deine bestehende CSS einkopieren. Sie wird NACH main.css geladen.
*/
.site-logo img{ max-height:56px; height:auto; width:auto }
img{ max-width:100%; height:auto }
a:focus-visible, button:focus-visible { outline: 2px solid #0ea5e9; outline-offset: 2px; }

:root {
  --aiyaro-bg: #0b1220;          /* Seitenhintergrund */
  --aiyaro-fg: #e5e7eb;          /* Standardtext */
  --aiyaro-muted: rgba(255,255,255,0.65);
  --aiyaro-card: rgba(255,255,255,0.04);
  --aiyaro-border: rgba(255,255,255,0.10);
  --aiyaro-accent: #0EA5E9;      /* Primär-Akzent (Logo-Blau) */
  --aiyaro-cta: #10B981;         /* CTA-Grün */
  --aiyaro-cta-fg: #0b1220;      /* Textfarbe auf CTA-Buttons */
}

body { background: var(--aiyaro-bg) !important; color: var(--aiyaro-fg) !important; }

/* Cards / Rahmen */
.card {
  background: var(--aiyaro-card) !important;
  border-color: var(--aiyaro-border) !important;
}

/* Links */
a { color: var(--aiyaro-accent); }
a:hover { opacity: .9; }

/* Header/Nav */
header.sticky { background: rgba(11,18,32,0.85) !important; }
header a:hover { color: #fff !important; }

/* Buttons (Tailwind-Override via Utility-Klassen) */
.bg-emerald-500 { background-color: var(--aiyaro-cta) !important; }
.text-slate-900  { color: var(--aiyaro-cta-fg) !important; }
.border-white\/20 { border-color: var(--aiyaro-border) !important; }
.border-white\/40 { border-color: rgba(255,255,255,0.4) !important; }

/* Form Felder */
input, textarea, select {
  background: #fff;
  color: #0b1220;
}

/* Footer Feinheiten */
footer a { color: #0F172A; }
footer a:hover { color: #0F172A; }

/* Cookie Banner */
#cookie-consent, #cookie-modal .bg-white { border: 1px solid var(--aiyaro-border); }

/* === HIER deine alte CSS einkopieren, falls du 1:1 übernehmen willst === */
/*
... alte aiayaro.css hier einfügen ...
*/


/* === Eingefügte Benutzer-CSS (main.css) === */
/* Minimal extras next to Tailwind */
:root { color-scheme: dark; }
a { text-underline-offset: 2px; }
input, select, textarea { color: #0f172a; }
.required::after { content: " *"; color: #ef4444; }
.success { background: #052e16; color: #a7f3d0; }
.error { background: #450a0a; color: #fecaca; }
.card { border: 1px solid rgba(255,255,255,0.08); border-radius: 1rem; padding: 1rem; }

/* === v5: Light AIYARO Look === */
:root { color-scheme: light !important; }
body { background: #f7fbff !important; color: #0f172a !important; }
.hero-bg {
  background: radial-gradient(1200px 400px at 20% -10%, rgba(16,185,129,0.15), transparent),
              radial-gradient(1200px 400px at 80% -10%, rgba(59,130,246,0.15), transparent);
}
.hero-title {
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.1;
  font-weight: 800;
  color: #0f172a;
}
.hero-sub {
  max-width: 52rem;
  margin-inline: auto;
  color: #334155;
  font-size: 1.05rem;
}
.hero-footnote {
  font-size: .8rem;
  color: #64748b;
  margin-top: .75rem;
}

/* CTA panel (glass card) */
.cta-panel {
  max-width: 740px;
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.9));
  border: 1px solid rgba(2,6,23,.06);
  box-shadow: 0 10px 30px rgba(2,6,23,.08);
  border-radius: 16px;
  padding: 16px;
}
.cta-buttons { display: flex; gap: 10px; justify-content: center; }
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 16px; border-radius: 9999px;
  background: #10B981; color: #0b1220; font-weight: 600;
  border: 1px solid rgba(2,6,23,.06);
}
.btn-primary:hover { filter: brightness(1.02); }
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 16px; border-radius: 9999px;
  background: #ffffff; color: #0f172a; font-weight: 500;
  border: 1px solid rgba(2,6,23,.12);
}
.btn-ghost:hover { background: #f8fafc; }
.cta-badges {
  margin-top: 10px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.cta-badges span {
  font-size: .85rem; color: #0f172a; background: #eafaf3;
  border: 1px solid rgba(16,185,129,.25); border-radius: 9999px; padding: 6px 10px;
}

/* Benefit band */
.benefit-card {
  background: linear-gradient(180deg, #e8f7ff, #eef4ff);
  border: 1px solid rgba(2,6,23,.06);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 10px 25px rgba(2,6,23,.05);
}
.benefit-head { font-weight: 700; color:#0f172a; font-size:1.15rem; }
.benefit-tabs { margin-top: 6px; display:flex; gap:8px; flex-wrap:wrap; }
/* Container der Chips mittig ausrichten */
.benefit-tabs{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;     /* <-- zentriert die Chips in der Reihe */
  margin-inline: auto;         /* optional: zentriert den Container selbst */
}

/* Chip-Inhalt zentrieren */
.chip{
  display: inline-flex;         /* statt inline → flex für zentrierten Inhalt */
  align-items: center;
  justify-content: center;      /* Text im Chip zentriert */
  text-align: center;
  white-space: nowrap;          /* optional: kein Zeilenumbruch im Chip */
  font-size: .85rem;
  padding: 6px 10px;
  border-radius: 9999px;
  background: #fff;
  border: 1px solid rgba(2,6,23,.08);
  color: #0f172a;
}

.benefit-grid {
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; margin-top:12px;
}
@media (max-width: 640px){ .benefit-grid { grid-template-columns: 1fr; } }
.benefit-item {
  background:#ffffff; border:1px solid rgba(2,6,23,.06); border-radius:12px; padding:10px 12px; color:#334155;
}
.check { color:#10B981; font-weight:700; margin-right:8px; }

/* Sections */
.section-title { font-size:1.75rem; font-weight:700; color:#0f172a; }
.section-sub { color:#475569; margin-top:6px; }
.card {
  background:#ffffff !important; border-color: rgba(2,6,23,.08) !important; color:#0f172a;
  box-shadow: 0 2px 10px rgba(2,6,23,.04);
}
.link { color:#0ea5e9; text-decoration: underline; text-underline-offset: 2px; }

/* Upload/Contact forms (light) */
.upload-form { background:#ffffff; border:1px solid rgba(2,6,23,.08); border-radius:16px; padding:16px; box-shadow: 0 2px 10px rgba(2,6,23,.04); }
.input { width:100%; margin-top:6px; border-radius:12px; border:1px solid rgba(2,6,23,.12); padding:12px; background:#ffffff; color:#0f172a; }
.input.file { background:#ffffff; }
.agree { display:flex; align-items:center; gap:10px; margin-top:8px; }
.required::after { content:" *"; color:#ef4444; }

/* Header fine-tuning on light */
header a { color:#334155; }
header a:hover { color:#0f172a; }
/* === Einheitlicher Button-Gradient (alle Buttons) === */
:root{
  --btn-from:#22c55e;   /* Grün */
  --btn-to:#3b82f6;     /* Blau */
  --btn-shadow: 0 8px 20px rgba(59,130,246,.18);
}

/* trifft wirklich ALLE Buttons + unsere CTA-Klassen */
button,
input[type="submit"],
input[type="button"],
a.btn-primary,
a.btn-ghost,
a[class*="btn-"],
.bg-emerald-500,
.btn-primary,
.btn-ghost {
  background-image: linear-gradient(90deg,var(--btn-from),var(--btn-to)) !important;
  background-color: transparent !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 9999px !important;
  padding: 10px 16px !important;
  font-weight: 600 !important;
  box-shadow: var(--btn-shadow);
  transition: transform .06s ease, filter .12s ease;
}

/* Hover/Active/Focus */
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
a.btn-primary:hover,
a.btn-ghost:hover,
.bg-emerald-500:hover,
.btn-primary:hover,
.btn-ghost:hover {
  filter: brightness(1.03) saturate(1.05);
}

button:active,
input[type="submit"]:active,
input[type="button"]:active,
a.btn-primary:active,
a.btn-ghost:active,
.bg-emerald-500:active,
.btn-primary:active,
.btn-ghost:active {
  transform: translateY(1px);
  filter: brightness(.98);
}

button:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
a.btn-primary:focus-visible,
a.btn-ghost:focus-visible,
.bg-emerald-500:focus-visible,
.btn-primary:focus-visible,
.btn-ghost:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(59,130,246,.28);
}

/* Disabled */
button[disabled],
input[type="submit"][disabled],
input[type="button"][disabled]{
  opacity:.6; cursor:not-allowed; box-shadow:none;
}

/* ===== SECTION-PANELS (Band-Optik wie Bild 2) ============================ */
.section-panel{
  position:relative;
  padding:24px;
  border-radius:24px;
  border:1px solid rgba(2,6,23,.10);
  background: linear-gradient(180deg,#eefbf6,#eef3ff); /* leicht grün -> blau */
  box-shadow:
    0 12px 28px rgba(2,6,23,.08),           /* Außen-Schatten */
    inset 0 1px 0 rgba(255,255,255,.75);    /* zarter Innen-Glanz */
}

/* Farbvarianten je nach Abschnitt (optional) */
.section-panel--blue   { background: linear-gradient(180deg,#e8f7ff,#eef4ff); }
.section-panel--green  { background: linear-gradient(180deg,#eafaf3,#ecfcf6); }
.section-panel--neutral{ background: linear-gradient(180deg,#ffffff,#f7fbff); }

/* Sanfter „Glow“ um das Panel herum (wie weiche Ränder im Screenshot) */
.section-panel::before{
  content:"";
  position:absolute; inset:-48px;
  background:
    radial-gradient(700px 240px at 18% -10%, rgba(16,185,129,.16), transparent),
    radial-gradient(700px 240px at 88% 120%, rgba(59,130,246,.16), transparent);
  filter: blur(10px);
  z-index:-1;
}

/* Dünner zusätzlicher Ring für mehr Tiefe */
.section-panel::after{
  content:"";
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.65), 0 0 0 1px rgba(2,6,23,.04);
}

/* Großzügige Abschnittsabstände */
.section-wrap{ margin-top: 2.5rem; }

/* === Footer-Farben =================================== */
:root{
  --footer-bg: #0b1220;         /* Hintergrund */
  --footer-fg: #e5e7eb;         /* Text/Links */
  --footer-border: rgba(2,6,23,.15);
}

footer{
  background: var(--footer-bg) !important;
  color: var(--footer-fg) !important;
}
footer a{ color: var(--footer-fg) !important; }
footer a:hover{ color:#ffffff !important; }
footer .border-t{ border-color: var(--footer-border) !important; }
header nav a { color:#fff !important; }
header nav a:hover { color: rgba(255,255,255,.8) !important; }

/* === FAQ Akkordeon im Light-Style ====================================== */
.faq details{
  border:1px solid rgba(2,6,23,.08);
  border-radius:14px;
  background:#fff;
  margin-bottom:10px;
  box-shadow:0 1px 6px rgba(2,6,23,.04);
}
.faq summary{
  list-style:none; cursor:pointer;
  padding:14px 16px; font-weight:600; color:#0f172a;
  display:flex; align-items:center; gap:10px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq details > div{
  padding:0 16px 16px 16px; color:#334155;
}
.faq details[open]{ box-shadow:0 4px 16px rgba(2,6,23,.06); }
.faq summary span{
  position:relative; padding-left:28px;
}
.faq summary span::before{
  content:"+"; position:absolute; left:0; top:0; width:20px; text-align:center;
  color:#0ea5e9; font-weight:800;
}
.faq details[open] summary span::before{ content:"–"; }

/* Abstand zum Panel-Rand */
.section-panel .faq{ margin-top: 12px; }

/* === Headings (H2 / H3) ================================================ */
h2, .h2 {
  font-size: clamp(1.6rem, 2.2vw, 2rem);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: #0f172a;           /* Slate-900 */
  margin: 0 0 .5rem 0;
}

h3, .h3 {
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  line-height: 1.25;
  font-weight: 700;
  color: #0f172a;
  margin: 1rem 0 .25rem 0;
}

/* Optionale Akzent-Unterstreichung (wie im Hero-CTA-Gradient) */
.h-underline {
  position: relative;
  padding-bottom: .4rem;
}
.h-underline::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 84px; height: 3px; border-radius: 9999px;
  background: linear-gradient(90deg, var(--btn-from,#22c55e), var(--btn-to,#3b82f6));
  box-shadow: 0 4px 10px rgba(59,130,246,.18);
}

/* Subline unter Überschriften */
.h-sub {
  margin-top: .35rem;
  color: #475569;           /* Slate-600 */
  font-size: 0.95rem;
}

/* Falls eine Sektion dunklen Hintergrund hat */
.on-dark h2, .on-dark .h2,
.on-dark h3, .on-dark .h3 { color: #fff; }
.on-dark .h-sub { color: rgba(255,255,255,.85); }