/* ============================================================
   BASE STYLES – Cross-Device kompatibel
   iOS 14+, Android Chrome 90+, Desktop Chrome/Firefox/Safari
   ============================================================ */

/* ── Reset ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── HTML ── */
html {
  font-size: 16px;
  scroll-behavior: smooth;
  /* iOS: verhindert Zoom bei Input-Fokus */
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ── Body ── */
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--fw-normal);
  color: var(--text-primary);
  background: var(--bg-base);
  line-height: 1.5;
  /* Fallback-Kette für volle Viewport-Höhe */
  min-height: 100vh;
  min-height: -webkit-fill-available;
  min-height: 100dvh;
  overflow-x: hidden;
  transition: background var(--t-normal), color var(--t-normal);
  /* iOS: Schriftglättung */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* iOS: kein Callout bei Long-Press */
  -webkit-touch-callout: none;
  /* iOS: Momentum-Scrolling */
  -webkit-overflow-scrolling: touch;
  /* Kein Rubber-Band-Effekt auf Body */
  overscroll-behavior-y: none;
}

/* ── Scrollbar (Desktop) ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── Selektion ── */
::selection {
  background: var(--accent-light);
  color: var(--accent);
}

/* ── Focus ── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
/* iOS: kein Standard-Outline */
:focus:not(:focus-visible) { outline: none; }

/* ── Links ── */
a {
  color: var(--accent);
  text-decoration: none;
  transition: opacity var(--t-fast);
}
a:hover { opacity: .75; }

/* ── Bilder ── */
img, svg { display: block; max-width: 100%; }

/* ── Inputs – iOS: kein Standard-Styling ── */
input, textarea, select, button {
  font-family: inherit;
  font-size: inherit;
  /* iOS: kein abgerundetes Input-Styling */
  -webkit-appearance: none;
  appearance: none;
}
/* Ausnahme: Checkboxen & Radio */
input[type="checkbox"],
input[type="radio"] {
  -webkit-appearance: auto;
  appearance: auto;
}

/* ── Headings ── */
h1 { font-size: var(--text-4xl); font-weight: var(--fw-bold);   line-height: 1.1; letter-spacing: -.5px; }
h2 { font-size: var(--text-3xl); font-weight: var(--fw-bold);   line-height: 1.2; letter-spacing: -.3px; }
h3 { font-size: var(--text-2xl); font-weight: var(--fw-semi);   line-height: 1.3; letter-spacing: -.2px; }
h4 { font-size: var(--text-xl);  font-weight: var(--fw-semi);   line-height: 1.4; }
h5 { font-size: var(--text-lg);  font-weight: var(--fw-medium); line-height: 1.4; }

/* ── Utility ── */
.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;
}
.hidden          { display: none !important; }
.flex            { display: -webkit-box; display: -ms-flexbox; display: flex; }
.flex-col        { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.items-center    { -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.justify-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
.justify-center  { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.gap-1  { gap: var(--sp-1); }
.gap-2  { gap: var(--sp-2); }
.gap-3  { gap: var(--sp-3); }
.gap-4  { gap: var(--sp-4); }
.gap-6  { gap: var(--sp-6); }
.w-full { width: 100%; }
.text-center { text-align: center; }
.text-sm     { font-size: var(--text-sm); }
.text-xs     { font-size: var(--text-xs); }
.text-muted  { color: var(--text-secondary); }
.font-bold   { font-weight: var(--fw-bold); }
.font-semi   { font-weight: var(--fw-semi); }
.truncate    { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rounded     { border-radius: var(--r-lg); }
.rounded-full{ border-radius: 9999px; }

/* ── iOS: kein Tap-Highlight ── */
* { -webkit-tap-highlight-color: transparent; }

/* ── Animationen ── */
@-webkit-keyframes fadeIn {
  from { opacity: 0; -webkit-transform: translateY(6px) scale(.98); transform: translateY(6px) scale(.98); }
  to   { opacity: 1; -webkit-transform: translateY(0) scale(1); transform: translateY(0) scale(1); }
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@-webkit-keyframes slideInRight {
  from { opacity: 0; -webkit-transform: translateX(24px); transform: translateX(24px); }
  to   { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@-webkit-keyframes slideInUp {
  from { opacity: 0; -webkit-transform: translateY(24px); transform: translateY(24px); }
  to   { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
}
@keyframes slideInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@-webkit-keyframes slideInDown {
  from { opacity: 0; -webkit-transform: translateY(-16px); transform: translateY(-16px); }
  to   { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
}
@keyframes slideInDown {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@-webkit-keyframes iosSpring {
  0%   { -webkit-transform: scale(.85); transform: scale(.85); opacity: 0; }
  60%  { -webkit-transform: scale(1.03); transform: scale(1.03); opacity: 1; }
  80%  { -webkit-transform: scale(.98); transform: scale(.98); }
  100% { -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes iosSpring {
  0%   { transform: scale(.85); opacity: 0; }
  60%  { transform: scale(1.03); opacity: 1; }
  80%  { transform: scale(.98); }
  100% { transform: scale(1); }
}
@-webkit-keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .45; }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .45; }
}
@-webkit-keyframes spin {
  to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@-webkit-keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
@keyframes greenFlash {
  0%   { -webkit-box-shadow: 0 0 0 0 rgba(48,209,88,0); box-shadow: 0 0 0 0 rgba(48,209,88,0); }
  40%  { -webkit-box-shadow: 0 0 0 8px rgba(48,209,88,.35); box-shadow: 0 0 0 8px rgba(48,209,88,.35); background: rgba(48,209,88,.12); }
  100% { -webkit-box-shadow: 0 0 0 0 rgba(48,209,88,0); box-shadow: 0 0 0 0 rgba(48,209,88,0); }
}
@keyframes blobFloat {
  0%, 100% { -webkit-transform: translate(0,0) scale(1); transform: translate(0,0) scale(1); }
  33%       { -webkit-transform: translate(20px,-20px) scale(1.04); transform: translate(20px,-20px) scale(1.04); }
  66%       { -webkit-transform: translate(-15px,15px) scale(.97); transform: translate(-15px,15px) scale(.97); }
}

.animate-fade-in   { -webkit-animation: fadeIn    var(--t-normal) both; animation: fadeIn    var(--t-normal) both; }
.animate-slide-up  { -webkit-animation: slideInUp var(--t-normal) both; animation: slideInUp var(--t-normal) both; }
.animate-bounce-in { -webkit-animation: iosSpring .45s cubic-bezier(0.34,1.56,0.64,1) both; animation: iosSpring .45s cubic-bezier(0.34,1.56,0.64,1) both; }
.animate-spin      { -webkit-animation: spin .8s linear infinite; animation: spin .8s linear infinite; }
.animate-pulse     { -webkit-animation: pulse 2s ease infinite; animation: pulse 2s ease infinite; }

/* ── Scrollbare Container mit Momentum ── */
.scroll-y {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}