/* -------------------------------------------------------
   Küchen-Klas Rechner Theme (Utility-Minimalsatz)
   Ziel: Tailwind/DaisyUI-ähnliche Klassen für /rechner/,
   damit Card-Boxen, Grid, Padding, Textfarben etc. wirken.
-------------------------------------------------------- */

/* Fallbacks, falls Variablen nicht gesetzt sind */
:root{
  --b1: 0 0% 100%;
  --b2: 210 40% 96%;
  --b3: 210 20% 90%;
  --bc: 215 25% 27%;
  --p: 0 72% 51%;
  --pc: 0 0% 100%;
}

/* --- Base helpers --- */
.bg-base-100{ background: hsl(var(--b1)); }
.bg-base-200{ background: hsl(var(--b2)); }
.bg-base-300{ background: hsl(var(--b3)); }

.border{ border-width:1px; border-style:solid; border-color: hsl(var(--b3)); }
.border-base-200{ border-color: hsl(var(--b2)); }
.border-base-300{ border-color: hsl(var(--b3)); }

.rounded-2xl{ border-radius: 1rem; }
.rounded-full{ border-radius: 9999px; }

.shadow-sm{ box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.shadow-2xl{ box-shadow: 0 18px 45px rgba(0,0,0,.12); }

.text-center{ text-align:center; }
.font-bold{ font-weight:700; }
.font-extrabold{ font-weight:800; }

.text-primary{ color: hsl(var(--p)); }
.text-primary-content{ color: hsl(var(--pc)); }

/* Slate text colors (für deine Texte in Cards/FAQ/SEO) */
.text-slate-900{ color:#0f172a; }
.text-slate-800{ color:#1f2937; }
.text-slate-700{ color:#334155; }
.text-slate-600{ color:#475569; }
.text-slate-500{ color:#64748b; }
.text-slate-400{ color:#94a3b8; }

/* --- Layout utilities, die dir auf /rechner fehlen --- */
.flex{ display:flex; }
.inline-flex{ display:inline-flex; }
.grid{ display:grid; }

.flex-row{ flex-direction:row; }
.flex-col{ flex-direction:column; }
.flex-wrap{ flex-wrap:wrap; }

.items-center{ align-items:center; }
.justify-center{ justify-content:center; }

.flex-1{ flex: 1 1 0%; }

.w-full{ width:100%; }
.max-w-3xl{ max-width: 48rem; }
.max-w-5xl{ max-width: 64rem; }
.max-w-6xl{ max-width: 72rem; }
.max-w-7xl{ max-width: 80rem; }
.mx-auto{ margin-left:auto; margin-right:auto; }

.gap-2{ gap:.5rem; }
.gap-3{ gap:.75rem; }
.gap-4{ gap:1rem; }
.gap-6{ gap:1.5rem; }

.p-5{ padding:1.25rem; }
.p-6{ padding:1.5rem; }
.p-7{ padding:1.75rem; }

.px-3{ padding-left:.75rem; padding-right:.75rem; }
.px-4{ padding-left:1rem; padding-right:1rem; }
.px-6{ padding-left:1.5rem; padding-right:1.5rem; }

.py-2{ padding-top:.5rem; padding-bottom:.5rem; }
.py-14{ padding-top:3.5rem; padding-bottom:3.5rem; }
.pb-6{ padding-bottom:1.5rem; }
.pb-8{ padding-bottom:2rem; }
.pt-10{ padding-top:2.5rem; }
.mt-1{ margin-top:.25rem; }
.mt-2{ margin-top:.5rem; }
.mt-3{ margin-top:.75rem; }
.mt-4{ margin-top:1rem; }
.mt-6{ margin-top:1.5rem; }
.mt-10{ margin-top:2.5rem; }
.mb-3{ margin-bottom:.75rem; }
.mb-4{ margin-bottom:1rem; }
.mb-10{ margin-bottom:2.5rem; }

/* Typo sizes */
.text-xs{ font-size:.75rem; line-height:1.2; }
.text-sm{ font-size:.875rem; line-height:1.25; }
.text-base{ font-size:1rem; line-height:1.4; }
.text-lg{ font-size:1.125rem; line-height:1.6; }
.text-xl{ font-size:1.25rem; line-height:1.6; }
.text-2xl{ font-size:1.5rem; line-height:1.25; }
.text-3xl{ font-size:1.875rem; line-height:1.2; }
.text-4xl{ font-size:2.25rem; line-height:1.15; }

/* space-y-4 für FAQ Wrapper */
.space-y-4 > * + *{ margin-top:1rem; }

/* --- Responsive: md:* und max-md:* die in deinem HTML vorkommen --- */
@media (min-width: 768px){
  .md\:grid-cols-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:text-base{ font-size:1rem; }
  .md\:text-lg{ font-size:1.125rem; }
  .md\:text-5xl{ font-size:3rem; line-height:1.05; }
  .md\:hidden{ display:none !important; }
}

@media (max-width: 767.98px){
  .max-md\:hidden{ display:none !important; }
}

/* --- Optional: Details/FAQ etwas “cleaner” --- */
details > summary{
  list-style:none;
}
details > summary::-webkit-details-marker{
  display:none;
}
details[open]{
  border-color: rgba(220,38,38,.25);
}