/* =========================================================
   DEENSTUDY REDESIGN 2026 – Seiten-Komponenten (ds2-*)
   ---------------------------------------------------------
   Wird global über header.php geladen.
   Nutzt die Design-Tokens aus header.php:
   --ds-bg, --ds-bg2, --ds-card, --ds-card-solid, --ds-text,
   --ds-muted, --ds-muted2, --ds-accent, --ds-accent2, --ds-accent3,
   --ds-border, --ds-border2, --ds-chip, --ds-chip-border,
   --ds-shadow, --ds-shadow2, --ds-radius, --ds-radius-lg,
   --ds-font, --ds-font-arabic
   ========================================================= */

/* ---------- Layout-Primitives ---------- */
.ds2-section{ position:relative; padding:clamp(56px,9vw,120px) 20px; font-family:var(--ds-font); color:var(--ds-text); }
.ds2-section.is-tight{ padding-top:clamp(36px,5vw,64px); padding-bottom:clamp(36px,5vw,64px); }
.ds2-wrap{ max-width:1160px; margin:0 auto; }
.ds2-wrap.is-narrow{ max-width:860px; }
.ds2-center{ text-align:center; }
.ds2-grid{ display:grid; gap:clamp(16px,2.6vw,28px); }
.ds2-grid.cols-2{ grid-template-columns:repeat(2,1fr); }
.ds2-grid.cols-3{ grid-template-columns:repeat(3,1fr); }
.ds2-grid.cols-4{ grid-template-columns:repeat(4,1fr); }
@media(max-width:980px){ .ds2-grid.cols-3,.ds2-grid.cols-4{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px){ .ds2-grid.cols-2,.ds2-grid.cols-3,.ds2-grid.cols-4{ grid-template-columns:1fr; } }

/* ---------- Typografie ---------- */
.ds2-eyebrow{
  margin:0 0 14px; font-size:11px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ds-accent);
}
.ds2-h1{ margin:0 0 18px; font-size:clamp(32px,5.4vw,54px); line-height:1.12; font-weight:600; letter-spacing:-.025em; color:var(--ds-text); }
.ds2-h2{ margin:0 0 14px; font-size:clamp(24px,3.6vw,36px); line-height:1.18; font-weight:600; letter-spacing:-.02em; color:var(--ds-text); }
.ds2-h3{ margin:0 0 10px; font-size:17px; line-height:1.3; font-weight:600; color:var(--ds-text); }
.ds2-lead{ margin:0; font-size:clamp(15px,1.9vw,17.5px); line-height:1.75; font-weight:400; color:var(--ds-muted); }
.ds2-text{ margin:0; font-size:14px; line-height:1.75; font-weight:400; color:var(--ds-muted); }
.ds2-arabic{ font-family:var(--ds-font-arabic); direction:rtl; line-height:1.9; font-weight:400; }
.ds2-divider{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin:0 auto 22px; color:var(--ds-accent);
}
.ds2-divider::before,.ds2-divider::after{
  content:""; height:1px; width:clamp(40px,7vw,90px);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ds-accent) 55%,transparent));
}
.ds2-divider::after{ background:linear-gradient(90deg,color-mix(in srgb,var(--ds-accent) 55%,transparent),transparent); }

/* ---------- Buttons ---------- */
.ds2-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:46px; padding:12px 26px; border-radius:12px;
  border:1px solid var(--ds-border2); background:transparent;
  color:var(--ds-text); cursor:pointer; text-decoration:none;
  font-family:var(--ds-font); font-size:14px; font-weight:500; letter-spacing:.02em;
  transition:border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}
.ds2-btn:hover{ border-color:color-mix(in srgb,var(--ds-accent) 45%,transparent); color:var(--ds-accent); }
.ds2-btn.is-primary{ border-color:transparent; background:var(--ds-accent); color:var(--ds-bg); font-weight:600; }
.ds2-btn.is-primary:hover{ background:var(--ds-accent2); color:var(--ds-bg); transform:translateY(-1px); }
.ds2-btn.is-ghost{ border-color:transparent; color:var(--ds-muted2); padding-left:10px; padding-right:10px; }
.ds2-btn.is-ghost:hover{ color:var(--ds-accent); }
.ds2-btn:focus-visible{ outline:2px solid color-mix(in srgb,var(--ds-accent) 60%,transparent); outline-offset:2px; }

/* ---------- Karten ---------- */
.ds2-card{
  position:relative; padding:clamp(22px,3vw,32px);
  border:1px solid var(--ds-border2); border-radius:var(--ds-radius-lg);
  background:var(--ds-card);
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.ds2-card.is-hover:hover{
  border-color:color-mix(in srgb,var(--ds-accent) 35%,transparent);
  transform:translateY(-3px); box-shadow:var(--ds-shadow);
}
.ds2-card-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; margin-bottom:16px;
  border-radius:12px; border:1px solid var(--ds-border);
  background:color-mix(in srgb,var(--ds-accent) 7%,transparent);
  color:var(--ds-accent);
}
.ds2-card-icon svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- Preis-Karten ---------- */
.ds2-price-card{
  display:flex; flex-direction:column; gap:0;
  padding:clamp(26px,3.4vw,38px);
  border:1px solid var(--ds-border2); border-radius:var(--ds-radius-lg);
  background:var(--ds-card);
}
.ds2-price-card.is-featured{
  border-color:color-mix(in srgb,var(--ds-accent) 40%,transparent);
  background:color-mix(in srgb,var(--ds-accent) 4%,var(--ds-card-solid));
}
.ds2-price-badge{
  align-self:flex-start; margin-bottom:18px; padding:5px 12px;
  border-radius:999px; border:1px solid var(--ds-border);
  background:color-mix(in srgb,var(--ds-accent) 8%,transparent);
  color:var(--ds-accent); font-size:10.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
}
.ds2-price-title{ margin:0 0 6px; font-size:19px; font-weight:600; color:var(--ds-text); }
.ds2-price-value{ margin:10px 0 4px; font-size:clamp(28px,4vw,40px); font-weight:600; letter-spacing:-.02em; color:var(--ds-text); }
.ds2-price-note{ margin:0 0 20px; font-size:13px; color:var(--ds-muted); }
.ds2-price-list{ margin:0 0 26px; padding:0; list-style:none; display:grid; gap:10px; }
.ds2-price-list li{
  display:flex; align-items:flex-start; gap:10px;
  font-size:14px; line-height:1.55; color:var(--ds-muted2);
}
.ds2-price-list li::before{
  content:""; flex:0 0 auto; width:16px; height:16px; margin-top:2px;
  border-radius:999px;
  background:color-mix(in srgb,var(--ds-accent) 14%,transparent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat, linear-gradient(#000,#000);
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat;
  background-color:var(--ds-accent);
}
.ds2-price-card .ds2-btn{ margin-top:auto; }

/* ---------- Pills / Badges / Hinweise ---------- */
.ds2-pill{
  display:inline-flex; align-items:center; gap:7px; padding:5px 12px;
  border-radius:999px; border:1px solid var(--ds-border);
  background:var(--ds-chip); color:var(--ds-accent);
  font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
}
.ds2-note{
  padding:14px 18px; border-radius:var(--ds-radius);
  border:1px solid var(--ds-border2);
  background:color-mix(in srgb,var(--ds-accent) 4%,transparent);
  font-size:13.5px; line-height:1.7; color:var(--ds-muted2);
}

/* ---------- Formulare ---------- */
.ds2-input,.ds2-select,.ds2-textarea{
  width:100%; min-height:46px; padding:12px 15px;
  border:1px solid var(--ds-border2); border-radius:12px;
  background:var(--ds-card-solid); color:var(--ds-text);
  font-family:var(--ds-font); font-size:14px; font-weight:400;
  transition:border-color .16s ease;
}
.ds2-textarea{ min-height:120px; resize:vertical; }
.ds2-input:focus,.ds2-select:focus,.ds2-textarea:focus{
  outline:none; border-color:color-mix(in srgb,var(--ds-accent) 55%,transparent);
}
.ds2-label{ display:grid; gap:7px; font-size:12.5px; font-weight:500; color:var(--ds-muted2); }

/* Umschalter (z. B. Name vs. Kunya bei Registrierung) */
.ds2-segment{
  display:inline-flex; padding:4px; gap:4px;
  border:1px solid var(--ds-border2); border-radius:12px;
  background:color-mix(in srgb,var(--ds-card-solid) 70%,transparent);
}
.ds2-segment button,.ds2-segment label{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:36px; padding:0 16px; border:0; border-radius:9px;
  background:transparent; color:var(--ds-muted); cursor:pointer;
  font-family:var(--ds-font); font-size:13px; font-weight:500;
  transition:background .15s ease,color .15s ease;
}
.ds2-segment .is-on{
  background:var(--ds-accent); color:var(--ds-bg); font-weight:600;
}

/* ---------- Kalligraphie-Akzent (Hero/Sektionen) ---------- */
.ds2-callig-word{
  position:absolute; inset:auto 0 auto 0; top:50%;
  transform:translateY(-50%);
  text-align:center; pointer-events:none; user-select:none;
  font-family:var(--ds-font-arabic);
  font-size:clamp(120px,26vw,320px); line-height:1;
  color:color-mix(in srgb,var(--ds-accent) 5%,transparent);
  white-space:nowrap; overflow:hidden;
}