/* ==========================================================================
   BeWo Online-Antrag – eigenständiges Stylesheet (CSP-konform, kein Tailwind-Runtime)
   Bildet exakt die im Wizard verwendeten Utility-Klassen ab. Standalone-Layout,
   daher keine Kollision mit css/style.min.css.
   ========================================================================== */

:root {
  --brand:        #7CB518;
  --brand-dark:   #5f8c12;
  --brand-light:  #F4F8EC;
  --accent:       #D81E2C;
  --ink:          #1F2A37;
  --white:        #ffffff;
  --slate-50:     #f8fafc;
  --slate-100:    #f1f5f9;
  --slate-200:    #e2e8f0;
  --slate-300:    #cbd5e1;
  --slate-400:    #94a3b8;
  --slate-500:    #64748b;
  --slate-600:    #475569;
  --red-50:       #fef2f2;
  --red-200:      #fecaca;
  --red-400:      #f87171;
  --red-500:      #ef4444;
  --red-700:      #b91c1c;
}

/* ---- Reset / Base ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* Seniorenfreundliche Basis-Schriftgröße: 18px → alle rem-Größen skalieren mit. */
html { font-size: 112.5%; }
html, body { margin: 0; padding: 0; }
.h-full { height: 100%; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  color: var(--ink);
  background: var(--slate-50);
}
.antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img { max-width: 100%; display: block; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
input, select, textarea { font: inherit; color: inherit; }
svg { display: inline-block; vertical-align: middle; }
[x-cloak] { display: none !important; }

/* ---- Layout container --------------------------------------------------- */
.max-w-6xl { max-width: 72rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-2xl { max-width: 42rem; }
.mx-auto  { margin-left: auto; margin-right: auto; }

/* ---- Display / flas / grid --------------------------------------------- */
.block         { display: block; }
.inline-block  { display: inline-block; }
.flex          { display: flex; }
.inline-flex   { display: inline-flex; }
.grid          { display: grid; }
.hidden        { display: none; }
.relative      { position: relative; }
.absolute      { position: absolute; }
.sticky        { position: sticky; }

.flex-1        { flex: 1 1 0%; }
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.justify-center{ justify-content: center; }
.justify-between{ justify-content: space-between; }

.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }

/* ---- Gaps --------------------------------------------------------------- */
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }

/* ---- Spacing between children (space-y / space-x) ----------------------- */
.space-y-6 > * + * { margin-top: 1.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-1 > * + * { margin-top: 0.25rem; }
.space-y-0\.5 > * + * { margin-top: 0.125rem; }

/* ---- Width / height ----------------------------------------------------- */
.w-full { width: 100%; }
.w-6  { width: 1.5rem; }  .h-6  { height: 1.5rem; }
.w-7  { width: 1.75rem; } .h-7  { height: 1.75rem; }
.w-9  { width: 2.25rem; } .h-9  { height: 2.25rem; }
.w-12 { width: 3rem; }    .h-12 { height: 3rem; }
.w-14 { width: 3.5rem; }  .h-14 { height: 3.5rem; }
.h-px { height: 1px; }

/* ---- Margins / paddings ------------------------------------------------- */
.mt-1 { margin-top: 0.25rem; }  .mt-2 { margin-top: 0.5rem; }
.mt-5 { margin-top: 1.25rem; }  .mt-6 { margin-top: 1.5rem; } .mt-8 { margin-top: 2rem; }
.mb-1 { margin-bottom: 0.25rem; } .mb-2 { margin-bottom: 0.5rem; } .mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }  .mb-5 { margin-bottom: 1.25rem; } .mb-6 { margin-bottom: 1.5rem; } .mb-8 { margin-bottom: 2rem; }
.mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; }
.mr-4 { margin-right: 1rem; }

.p-4 { padding: 1rem; }  .p-5 { padding: 1.25rem; } .p-6 { padding: 1.5rem; } .p-7 { padding: 1.75rem; } .p-8 { padding: 2rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.pt-2 { padding-top: 0.5rem; }

.top-4 { top: 1rem; } .right-4 { right: 1rem; }

/* ---- Typography --------------------------------------------------------- */
.text-\[10px\] { font-size: 12px; line-height: 1.4; }   /* für 70+ angehoben (10→12px) */
.text-\[11px\] { font-size: 13px; line-height: 1.4; }   /* für 70+ angehoben (11→13px) */
.text-xs   { font-size: 0.82rem;  line-height: 1.35; }  /* ~14.8px bei 18px-Basis */
.text-sm   { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem;     line-height: 1.5rem; }
.text-lg   { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl   { font-size: 1.25rem;  line-height: 1.75rem; }
.text-2xl  { font-size: 1.5rem;   line-height: 2rem; }
.text-3xl  { font-size: 1.875rem; line-height: 2.25rem; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }
.uppercase     { text-transform: uppercase; }
.tracking-wide { letter-spacing: 0.025em; }
.text-center   { text-align: center; }
.text-left     { text-align: left; }
.list-disc     { list-style: disc; }
.list-inside   { list-style-position: inside; }

/* ---- Colors ------------------------------------------------------------- */
.text-ink        { color: var(--ink); }
.text-white      { color: var(--white); }
.text-brand      { color: var(--brand); }
.text-brand-dark { color: var(--brand-dark); }
.text-accent     { color: var(--accent); }
.text-slate-400  { color: var(--slate-400); }
.text-slate-500  { color: var(--slate-500); }
.text-slate-600  { color: var(--slate-600); }
.text-red-500    { color: var(--red-500); }
.text-red-700    { color: var(--red-700); }

.bg-white       { background-color: var(--white); }
.bg-slate-50    { background-color: var(--slate-50); }
.bg-brand       { background-color: var(--brand); }
.bg-brand-light { background-color: var(--brand-light); }
.bg-slate-200   { background-color: var(--slate-200); }
.bg-slate-300   { background-color: var(--slate-300); }
.bg-red-50      { background-color: var(--red-50); }

/* ---- Borders ------------------------------------------------------------ */
.border    { border: 1px solid transparent; border-color: var(--slate-200); }
.border-2  { border-width: 2px; border-style: solid; }
.border-b  { border-bottom: 1px solid var(--slate-200); }
.border-t  { border-top: 1px solid var(--slate-200); }
.border-slate-100 { border-color: var(--slate-100); }
.border-slate-200 { border-color: var(--slate-200); }
.border-slate-300 { border-color: var(--slate-300); }
.border-brand     { border-color: var(--brand); }
.border-red-200   { border-color: var(--red-200); }
.border-red-400   { border-color: var(--red-400); }

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

/* ---- Shadows / rings ---------------------------------------------------- */
.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0,0,0,.05); }
.shadow-md { box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1); }
.ring-2 { box-shadow: 0 0 0 2px var(--tw-ring, rgba(124,181,24,.35)); }
.ring-brand\/30 { --tw-ring: rgba(124,181,24,.30); }

/* ---- Misc --------------------------------------------------------------- */
.cursor-pointer { cursor: pointer; }
.transition     { transition: all .15s ease; }
.transition-all { transition: all .15s ease; }
.touch-none     { touch-action: none; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---- Form fields -------------------------------------------------------- */
.input {
  width: 100%;
  border: 1px solid var(--slate-300);
  border-radius: 0.5rem;
  padding: 0.65rem 0.85rem;
  min-height: 2.9rem;               /* große Touch-Targets für 70+ */
  font-size: 1rem;
  line-height: 1.4;
  background: var(--white);
  outline: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.input:focus { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(124,181,24,.4); }
/* Größere, gut treffbare Auswahlkästchen für Senioren */
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand); width: 1.4rem; height: 1.4rem; flex: none; }
/* Klick-Labels großzügiger + Cursor, damit die ganze Zeile gut treffbar ist */
label { line-height: 1.5; }
/* Primär-Buttons (Weiter / Absenden) und Zurück deutlich größer */
button { min-height: 2.9rem; }
.input:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid rgba(124,181,24,.55); outline-offset: 2px; }

/* ---- Interactive states ------------------------------------------------- */
.hover\:underline:hover     { text-decoration: underline; }
.hover\:border-brand:hover  { border-color: var(--brand); }
.hover\:border-slate-300:hover { border-color: var(--slate-300); }
.hover\:shadow-md:hover     { box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1); }
.hover\:bg-brand-dark:hover { background-color: var(--brand-dark); }
.disabled\:opacity-40:disabled { opacity: .4; }

.group:hover .group-hover\:gap-2 { gap: 0.5rem; }

/* ---- Responsive: sm ≥640px --------------------------------------------- */
@media (min-width: 640px) {
  .sm\:block   { display: block; }
  .sm\:inline  { display: inline; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- Responsive: md ≥768px --------------------------------------------- */
@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Responsive: lg ≥1024px -------------------------------------------- */
@media (min-width: 1024px) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:col-span-1  { grid-column: span 1 / span 1; }
  .lg\:col-span-2  { grid-column: span 2 / span 2; }
}