/* main.css — Reset + Body + Atom-Klassen + Layout-Utils
 * v0.1.0 — 2026-05-25
 * Importiert: tokens.css (separat im base.html eingebunden).
 * Hier KEINE Hex-Werte.
 */

/* ─── Reset ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; tab-size: 4; }
body {
  min-height: 100vh;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  background: var(--c-bg);
  color: var(--c-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; line-height: var(--lh-tight); }

::selection { background: var(--c-lime); color: var(--c-navy); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--c-lime-dark); outline-offset: 2px; }

/* Scrollbar */
::-webkit-scrollbar       { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--c-light); }

/* ─── A11y Helpers ─────────────────────────────────────────────── */
.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;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: var(--z-toast);
  background: var(--c-navy); color: var(--c-white); padding: var(--sp-3) var(--sp-5);
  border-radius: 0 0 var(--r-md) 0; font-weight: 700;
}
.skip-link:focus { left: 0; }

/* ─── Layout-Utils ─────────────────────────────────────────────── */
.container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--sp-6); }
.stack > * + * { margin-top: var(--sp-4); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.grid { display: grid; gap: var(--sp-4); }
.section { padding-block: var(--sp-9); }
.section--tight { padding-block: var(--sp-7); }

/* ─── Typografie ───────────────────────────────────────────────── */
.display { font-size: var(--fs-display); font-weight: 900; letter-spacing: var(--ls-tight); line-height: var(--lh-tight); }
.h1 { font-size: var(--fs-h1); font-weight: 900; letter-spacing: var(--ls-tight); }
.h2 { font-size: var(--fs-h2); font-weight: 800; }
.h3 { font-size: var(--fs-h3); font-weight: 700; }
.h4 { font-size: var(--fs-h4); font-weight: 700; }
.h5 { font-size: var(--fs-h5); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-tag); }
.body-l { font-size: var(--fs-body-l); line-height: var(--lh-loose); }
.body   { font-size: var(--fs-body); }
.body-s { font-size: var(--fs-body-s); }
.muted  { color: var(--c-muted); }
.text-center { text-align: center; }

/* ─── Button ───────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-weight: 700; font-family: var(--font);
  border-radius: var(--r-md); border: 1px solid transparent;
  padding: 10px var(--sp-5); min-height: 40px;
  font-size: var(--fs-body);
  cursor: pointer; transition: background var(--tr-fast), color var(--tr-fast), border-color var(--tr-fast), transform var(--tr-fast);
  text-decoration: none; white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn.is-disabled { opacity: 0.38; cursor: not-allowed; }

.btn--primary    { background: var(--c-lime); color: var(--c-navy); }
.btn--primary:hover    { background: var(--c-lime-dark); color: var(--c-white); }
.btn--secondary  { background: var(--c-navy); color: var(--c-white); }
.btn--secondary:hover  { background: var(--c-navy-dark); }
.btn--outline    { background: transparent; color: var(--c-navy); border-color: var(--c-navy); }
.btn--outline:hover    { background: var(--c-navy); color: var(--c-white); }
.btn--ghost      { background: transparent; color: var(--c-navy); padding-inline: var(--sp-3); }
.btn--ghost:hover      { background: var(--c-lime-light); }
.btn--destructive{ background: var(--c-error); color: var(--c-white); }
.btn--soft       { background: var(--c-lime-light); color: var(--c-lime-dark); }
.btn--soft:hover { background: var(--c-lime); color: var(--c-navy); }

.btn--size-s { padding: var(--sp-1) var(--sp-3); min-height: 28px; font-size: var(--fs-body-s); border-radius: var(--r-sm); }
.btn--size-l { padding: var(--sp-3) var(--sp-7); min-height: 48px; font-size: var(--fs-h4); border-radius: var(--r-lg); }

.btn--icon-only { padding: 0; width: 40px; height: 40px; border-radius: var(--r-full); }
.btn--icon-only.btn--size-s { width: 32px; height: 32px; }

/* ─── Tag / Chip ───────────────────────────────────────────────── */
.tag {
  display: inline-flex; align-items: center;
  padding: 4px var(--sp-3); border-radius: var(--r-pill);
  font-size: var(--fs-body-s); font-weight: 600;
  background: var(--c-bg); border: 1px solid var(--c-border); color: var(--c-muted);
  white-space: nowrap; line-height: 1.4;
}
.tag--accent { background: var(--c-lime-light); border-color: var(--c-lime-light); color: var(--c-lime-dark); }
.tag--ghost  { background: transparent; }

/* ─── Badge ───────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: 4px var(--sp-3); border-radius: var(--r-pill);
  font-size: var(--fs-tag); font-weight: 700; line-height: 1;
  text-transform: uppercase; letter-spacing: var(--ls-tag);
  white-space: nowrap;
}
.badge--category    { background: var(--c-lime-light); color: var(--c-lime-dark); }
.badge--indoor      { background: var(--c-overlay-navy-soft); color: var(--c-navy); text-transform: none; letter-spacing: 0; }
.badge--outdoor     { background: var(--c-overlay-lime-dark-soft); color: var(--c-lime-dark); text-transform: none; letter-spacing: 0; }
.badge--open        { background: var(--c-success-bg); color: var(--c-success); text-transform: none; letter-spacing: 0; }
.badge--closed      { background: var(--c-error-bg); color: var(--c-error); text-transform: none; letter-spacing: 0; }
.badge--seasonal    { background: var(--c-yellow-light); color: var(--c-warning); text-transform: none; letter-spacing: 0; }
/* Phase 28 v4/2026-06-02: Semantische Badge-Varianten — Aliase fuer
   konsistente Verwendung in Konto-Listen + Admin. */
.badge--success     { background: var(--c-success-bg); color: var(--c-success); text-transform: none; letter-spacing: 0; }
.badge--danger      { background: var(--c-error-bg);   color: var(--c-error);   text-transform: none; letter-spacing: 0; }
.badge--muted       { background: var(--c-bg-soft, #eef2f3); color: var(--c-muted, #555); text-transform: none; letter-spacing: 0; }
.badge--premium     { background: var(--c-yellow-light); color: var(--c-navy); text-transform: none; letter-spacing: 0; font-weight: 700; }
.badge--new         { background: var(--c-lime-light); color: var(--c-lime-dark); }
.badge--recommended { background: var(--c-navy); color: var(--c-white); text-transform: none; letter-spacing: 0; }
.badge--distance    { background: var(--c-overlay-backdrop); color: var(--c-white); backdrop-filter: blur(4px); text-transform: none; letter-spacing: 0; }
.badge--on-photo    { backdrop-filter: blur(4px); }
/* Phase 22.A/2026-06-01: Count-Badge fuer Sidebar (kleiner Kreis mit Zahl). */
.badge--count       { background: var(--c-lime); color: var(--c-navy);
                      min-width: 22px; height: 22px; padding: 0 6px;
                      border-radius: var(--r-pill); justify-content: center;
                      font-size: var(--fs-tag); letter-spacing: 0;
                      text-transform: none; line-height: 22px; }

/* ─── Rating Stars ─────────────────────────────────────────────── */
.rating { display: inline-flex; align-items: center; gap: 4px; }
.rating__stars { display: inline-flex; gap: 1px; color: var(--c-yellow); }
.rating__num   { font-size: var(--fs-body-s); font-weight: 700; color: var(--c-text); }
.rating__count { font-size: var(--fs-tag); color: var(--c-muted); }
.rating--lg .rating__num { font-size: var(--fs-body); }

/* ─── Info Row ─────────────────────────────────────────────────── */
.info-row {
  display: inline-flex; align-items: flex-start; gap: var(--sp-2);
  color: var(--c-muted); font-size: var(--fs-body-s);
}
.info-row__icon { flex-shrink: 0; margin-top: 1px; color: var(--c-muted); }
.info-row--accent { color: var(--c-navy); }
.info-row--accent .info-row__icon { color: var(--c-navy); }

/* ─── Form ─────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: var(--sp-1); }
.field__label {
  font-size: var(--fs-tag); font-weight: 700; color: var(--c-muted);
  text-transform: uppercase; letter-spacing: var(--ls-tag);
}
.field__wrap { position: relative; display: flex; align-items: center; }
.field__icon {
  position: absolute; left: var(--sp-3); top: 50%; transform: translateY(-50%);
  color: var(--c-muted); pointer-events: none; display: inline-flex;
}
.field__icon--accent { color: var(--c-lime-dark); }
.field__addon {
  position: absolute; right: var(--sp-2); top: 50%; transform: translateY(-50%);
  display: inline-flex;
}
.input, .textarea, .select {
  width: 100%; min-height: 44px;
  padding: 10px var(--sp-3);
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  background: var(--c-surface); color: var(--c-text);
  font-size: var(--fs-body); font-family: var(--font);
  transition: border-color var(--tr-fast), box-shadow var(--tr-fast);
}

/* Phase 19c/2026-05-31 v13: appearance:none als Fallback wenn JS-Custom-
 * Select (.cs) noch nicht initialisiert ist (z.B. noscript / vor DOM-ready).
 * Beim JS-Enhance wird das Select unsichtbar gestyled (.cs > select). */
select.input, select.select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231B3F6B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px 14px;
  cursor: pointer;
}

/* Phase 19c/2026-05-31 v16: iOS Safari zoomt automatisch beim Fokus
 * wenn font-size < 16px. Defensive: alle Form-Inputs Mobile auf 16px,
 * sonst springt der Viewport hin und her. Desktop bleibt --fs-body (15px). */
@media (max-width: 768px) {
  .input,
  .textarea,
  .select,
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input[type="password"],
  input[type="date"],
  input[type="time"],
  textarea,
  select {
    font-size: 16px;
  }
}
.input--has-icon { padding-left: 40px; }
.input--has-addon { padding-right: 40px; }
.input:focus, .textarea:focus, .select:focus { border-color: var(--c-lime-dark); box-shadow: var(--sh-focus); outline: none; }
.input.is-error { border-color: var(--c-error); background: var(--c-error-bg); }
.input.is-success { border-color: var(--c-lime); background: var(--c-lime-light); }
.field__hint { font-size: var(--fs-body-s); color: var(--c-muted); margin-top: var(--sp-1); }
.field__hint--error   { color: var(--c-error); }
.field__hint--success { color: var(--c-lime-dark); }

.checkbox, .radio { display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; font-size: var(--fs-body); }
.checkbox input, .radio input { width: 16px; height: 16px; accent-color: var(--c-lime-dark); }

/* ─── Alert ────────────────────────────────────────────────────── */
.alert {
  display: flex; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg);
  border: 1px solid; font-size: var(--fs-body-s); line-height: var(--lh-base);
}
.alert__icon { font-weight: 800; flex-shrink: 0; }
.alert--success { background: var(--c-success-bg); color: var(--c-success); border-color: color-mix(in oklch, var(--c-success) 35%, transparent); }
.alert--info    { background: var(--c-info-bg);    color: var(--c-info);    border-color: color-mix(in oklch, var(--c-info)    35%, transparent); }
.alert--warning { background: var(--c-warning-bg); color: var(--c-warning); border-color: color-mix(in oklch, var(--c-warning) 35%, transparent); }
.alert--error   { background: var(--c-error-bg);   color: var(--c-error);   border-color: color-mix(in oklch, var(--c-error)   35%, transparent); }

/* Phase 25/2026-06-02 v2: Toast-Variante — krachig, gut sichtbar.
   Voller Hintergrund, weisser Text, dicker Progress-Balken. */
.alert--toast {
  position: relative; overflow: hidden;
  min-width: 320px; max-width: 460px;
  padding: 14px 20px 18px 20px;
  border: 0; border-radius: var(--r-lg);
  font-size: 16px; font-weight: 600; line-height: 1.4;
  box-shadow: 0 14px 36px rgba(0,0,0,0.28), 0 4px 10px rgba(0,0,0,0.12);
  animation: lb-toast-in 0.22s cubic-bezier(0.2,0.9,0.3,1.1);
}
/* Brand: Lime + Navy. Success = Lime-Hintergrund, Info/Warning/Error
   variieren in Akzent — Navy bleibt Textfarbe ueberall. */
.alert--toast.alert--success { background: var(--c-lime); color: var(--c-navy); }
.alert--toast.alert--info    { background: var(--c-navy); color: var(--c-lime); }
.alert--toast.alert--warning { background: var(--c-lime); color: var(--c-navy); }
.alert--toast.alert--error   { background: var(--c-navy); color: #ff8b8b; }
.alert--toast::after {
  content: ""; position: absolute; right: 0; bottom: 0; height: 5px;
  width: 100%; background: currentColor; opacity: 0.55;
  transform-origin: right center;
  animation: lb-toast-bar 4.5s linear forwards;
}
@keyframes lb-toast-in {
  from { transform: translateY(12px) scale(0.97); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}
@keyframes lb-toast-bar {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* ─── Adress-Prüfung im Wizard (Phase 16.A.2) ─────────────────── */
.addr-check { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-2); }
.addr-check__result { margin-top: var(--sp-2); }
.addr-check__suggest { margin: var(--sp-2) 0 var(--sp-3); font-size: var(--fs-body-s); }
.addr-check__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }

/* ─── Breadcrumb ───────────────────────────────────────────────── */
.breadcrumb { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-body-s); color: var(--c-muted); }
.breadcrumb a { color: var(--c-muted); }
.breadcrumb a:hover { color: var(--c-navy); }
.breadcrumb__sep { color: var(--c-light); }
.breadcrumb__current { color: var(--c-text); font-weight: 600; }

/* ─── Skeleton ────────────────────────────────────────────────── */
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.skeleton { background: linear-gradient(90deg, var(--c-border) 25%, color-mix(in oklch, var(--c-border) 50%, var(--c-bg)) 50%, var(--c-border) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--r-pill); display: block; }

/* ─── HTMX Indicator ──────────────────────────────────────────── */
.htmx-indicator { opacity: 0; transition: opacity var(--tr-base); }
.htmx-request .htmx-indicator { opacity: 1; }

/* ─── Form-Layouts (Phase 3) ───────────────────────────────────── */
.form-stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.form-row { display: flex; gap: var(--sp-3); }
.form-row--two > * { flex: 1; min-width: 0; }
.form-row--between { justify-content: space-between; align-items: center; }
.form-row--end { justify-content: flex-end; }
/* Phase 30 / 2026-06-03: Mini-Aktions-Leiste unter Form (Resend/Remove etc.). */
.form-row--actions { margin-top: var(--sp-3); align-items: center; }
/* Inline-Form: Wrapper-Element bleibt im Fluss als Geschwister-Element (Button-Reihe). */
.form--inline { display: inline; }
@media (max-width: 640px) { .form-row--two { flex-direction: column; } }

/* Phase 21/2026-06-01: btn--block soll lange Labels umbrechen statt
   die Sidebar horizontal zu sprengen. nowrap nur fuer normale inline-btns. */
.btn--block { width: 100%; white-space: normal; min-width: 0;
              text-align: center; line-height: 1.25; }

/* ─── Link ─────────────────────────────────────────────────────── */
.link { text-decoration: none; transition: color var(--tr-fast); cursor: pointer; background: none; border: none; padding: 0; font: inherit; }
.link--underline { color: var(--c-lime-dark); font-weight: 700; border-bottom: 1.5px solid var(--c-lime); padding-bottom: 1px; }
.link--underline:hover { color: var(--c-navy); border-bottom-color: var(--c-navy); }
.link--muted { color: var(--c-muted); font-size: var(--fs-body-s); }
.link--muted:hover { color: var(--c-navy); }

/* ─── Card ─────────────────────────────────────────────────────── */
.card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-2xl); box-shadow: var(--sh-md); }
.card--padded { padding: var(--sp-5) var(--sp-6); }

/* ─── Table ────────────────────────────────────────────────────── */
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-body-s); }
.table th, .table td { padding: var(--sp-3); text-align: left; border-bottom: 1px solid var(--c-border); vertical-align: middle; }
.table th { font-weight: 700; color: var(--c-muted); text-transform: uppercase; letter-spacing: var(--ls-tag); font-size: var(--fs-tag); background: var(--c-bg); }
.table--zebra tbody tr:nth-child(even) { background: color-mix(in oklch, var(--c-bg) 50%, var(--c-surface)); }
.mono { font-family: var(--font-mono); font-size: var(--fs-mono); }

/* ─── Honeypot ─────────────────────────────────────────────────── */
.hp-trap { position: absolute; left: -9999px; top: -9999px; height: 0; width: 0; overflow: hidden; }

/* ─── Empty State ──────────────────────────────────────────────── */
.empty { text-align: center; padding: var(--sp-9) var(--sp-6); }
.empty > * + * { margin-top: var(--sp-3); }