/* ══════════════════════════════════════════════════════════════════════════
   ki-tw.css — Statisches Utility-CSS als Ersatz für cdn.tailwindcss.com
   Bildet exakt die auf KI-News genutzten Tailwind-Klassen nach,
   inkl. der tailwind.config-Overrides (Farben, Spacing, Radius, Fonts).
   Reihenfolge: Preflight → Basis-Utilities → Responsive/Variant-Overrides.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Border-Preflight (damit `border` ohne Style sichtbar ist) ── */
*,*::before,*::after{border-width:0;border-style:solid;border-color:#e5e7eb;}
/* ── Link-Preflight: keine Standard-Unterstreichung/Blau ──
   Robust gegen vererbte Unterstreichung: explizit `none` statt `inherit`.
   Gewollte Unterstreichungen (z. B. .hover\:underline:hover, .c-read-link:hover)
   gewinnen über höhere Spezifität via :hover. */
a{color:inherit;text-decoration:none;}

/* ── Custom Fonts (tailwind.config fontFamily) ── */
.font-body-sm,.font-body-lg,.font-source-tag,.font-label-bold{font-family:'Work Sans',sans-serif;}
.font-headline-xl,.font-headline-md{font-family:'Space Grotesk',sans-serif;}

/* ── Custom Font-Sizes (tailwind.config fontSize) ── */
.text-body-sm{font-size:14px;line-height:1.4;font-weight:400;}
.text-body-lg{font-size:16px;line-height:1.5;font-weight:400;}
.text-headline-xl{font-size:32px;line-height:1.2;letter-spacing:-0.02em;font-weight:700;}
.text-headline-md{font-size:20px;line-height:1.3;font-weight:600;}
.text-source-tag{font-size:13px;line-height:1;font-weight:600;}
.text-label-bold{font-size:12px;line-height:1;letter-spacing:0.05em;font-weight:700;}

/* ── Display ── */
.block{display:block;}
.flex{display:flex;}
.grid{display:grid;}
.hidden{display:none;}

/* ── Flexbox / Grid ── */
.flex-1{flex:1 1 0%;}
.flex-col{flex-direction:column;}
.flex-grow{flex-grow:1;}
.flex-shrink-0{flex-shrink:0;}
.flex-wrap{flex-wrap:wrap;}
.items-center{align-items:center;}
.justify-between{justify-content:space-between;}
.justify-center{justify-content:center;}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr));}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}

/* ── Gap (default scale + custom 'gutter') ── */
.gap-0\.5{gap:0.125rem;}
.gap-1{gap:0.25rem;}
.gap-1\.5{gap:0.375rem;}
.gap-2{gap:0.5rem;}
.gap-2\.5{gap:0.625rem;}
.gap-3{gap:0.75rem;}
.gap-4{gap:1rem;}
.gap-6{gap:1.5rem;}
.gap-8{gap:2rem;}
.gap-gutter{gap:16px;}

/* ── Padding ── */
.p-1{padding:0.25rem;}
.p-3{padding:0.75rem;}
.p-4{padding:1rem;}
.p-5{padding:1.25rem;}
.p-6{padding:1.5rem;}
.p-8{padding:2rem;}
.p-gutter{padding:16px;}
.px-1\.5{padding-left:0.375rem;padding-right:0.375rem;}
.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-1{padding-top:0.25rem;padding-bottom:0.25rem;}
.py-1\.5{padding-top:0.375rem;padding-bottom:0.375rem;}
.py-2{padding-top:0.5rem;padding-bottom:0.5rem;}
.py-2\.5{padding-top:0.625rem;padding-bottom:0.625rem;}
.py-3{padding-top:0.75rem;padding-bottom:0.75rem;}
.py-24{padding-top:6rem;padding-bottom:6rem;}
.pt-0{padding-top:0;}
.pt-3{padding-top:0.75rem;}
.pt-4{padding-top:1rem;}
.pt-6{padding-top:1.5rem;}
.pt-8{padding-top:2rem;}
.pt-14{padding-top:3.5rem;}
.pb-1{padding-bottom:0.25rem;}
.pb-3{padding-bottom:0.75rem;}
.pb-12{padding-bottom:3rem;}

/* ── Margin ── */
.mx-auto{margin-left:auto;margin-right:auto;}
.mt-auto{margin-top:auto;}
.mb-0\.5{margin-bottom:0.125rem;}
.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;}
.mb-gutter{margin-bottom:16px;}
.mb-lg{margin-bottom:40px;}
.mt-1{margin-top:0.25rem;}
.mt-2{margin-top:0.5rem;}
.mt-4{margin-top:1rem;}
.mt-5{margin-top:1.25rem;}
.mt-6{margin-top:1.5rem;}
.mt-8{margin-top:2rem;}
.mt-12{margin-top:3rem;}
.mt-gutter{margin-top:16px;}

/* ── Sizing ── */
.w-full{width:100%;}
.w-1\.5{width:0.375rem;}
.w-2{width:0.5rem;}
.w-2\/5{width:40%;}
.h-full{height:100%;}
.h-1\.5{height:0.375rem;}
.h-2{height:0.5rem;}
.h-14{height:3.5rem;}
.h-48{height:12rem;}
.h-\[calc\(100vh-3\.5rem\)\]{height:calc(100vh - 3.5rem);}
.max-w-xs{max-width:20rem;}
.max-w-\[1400px\]{max-width:1400px;}
.min-h-screen{min-height:100vh;}
.min-w-0{min-width:0;}

/* ── Position ── */
.relative{position:relative;}
.absolute{position:absolute;}
.fixed{position:fixed;}
.top-0{top:0;}
.top-14{top:3.5rem;}
.left-0{left:0;}
.right-0{right:0;}
.z-10{z-index:10;}
.z-40{z-index:40;}
.z-50{z-index:50;}

/* ── Overflow / Pointer ── */
.overflow-hidden{overflow:hidden;}
.overflow-y-auto{overflow-y:auto;}
.pointer-events-none{pointer-events:none;}
.cursor-pointer{cursor:pointer;}

/* ── Typography ── */
.text-xs{font-size:0.75rem;line-height:1rem;}
.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-3xl{font-size:1.875rem;line-height:2.25rem;}
.text-4xl{font-size:2.25rem;line-height:2.5rem;}
.text-5xl{font-size:3rem;line-height:1;}
.text-\[9px\]{font-size:9px;}
.text-\[10px\]{font-size:10px;}
.text-\[11px\]{font-size:11px;}
.text-\[12px\]{font-size:12px;}
.text-\[13px\]{font-size:13px;}
.font-medium{font-weight:500;}
.font-bold{font-weight:700;}
.font-black{font-weight:900;}
.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace;}
.text-center{text-align:center;}
.uppercase{text-transform:uppercase;}
.leading-tight{line-height:1.25;}
.leading-snug{line-height:1.375;}
.leading-relaxed{line-height:1.625;}
.tracking-tight{letter-spacing:-0.025em;}
.tracking-tighter{letter-spacing:-0.05em;}
.tracking-wider{letter-spacing:0.05em;}
.tracking-widest{letter-spacing:0.1em;}
.tracking-\[0\.2em\]{letter-spacing:0.2em;}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;}

/* ── Text Colors ── */
.text-white{color:#fff;}
.text-gray-300{color:#d1d5db;}
.text-gray-400{color:#9ca3af;}
.text-gray-500{color:#6b7280;}
.text-gray-600{color:#4b5563;}
.text-gray-700{color:#374151;}
.text-on-surface-variant{color:#bfc7d3;}
.text-\[\#1d9bf0\]{color:var(--accent);}
.text-\[\#dc2626\]{color:#dc2626;}
.text-\[var\(--accent\)\]{color:var(--accent);}

/* ── Background Colors ── */
.bg-black{background-color:#000;}
.bg-transparent{background-color:transparent;}
.bg-green-500{background-color:#22c55e;}
.bg-\[\#0d1117\]{background-color:var(--card,#0d1117);}
.bg-\[\#16181c\]{background-color:var(--card,#16181c);}
.bg-\[\#1d1f23\]{background-color:var(--field,#1d1f23);}
.bg-\[\#1d9bf0\]{background-color:var(--accent);}

/* ── Gradients ── */
.bg-gradient-to-l{background-image:linear-gradient(to left,var(--tw-grad-from,transparent),var(--tw-grad-to,transparent));}
.from-\[\#1d9bf0\]{--tw-grad-from:var(--accent);}
.to-transparent{--tw-grad-to:transparent;}

/* ── Borders (width/side) ── */
.border{border-width:1px;}
.border-t{border-top-width:1px;}
.border-r{border-right-width:1px;}
.border-b{border-bottom-width:1px;}
.border-b-2{border-bottom-width:2px;}
.border-l-2{border-left-width:2px;}
.border-none{border-style:none;}
.border-\[\#1d9bf0\]{border-color:var(--accent);}
.border-\[\#2f3336\]{border-color:#2f3336;}
.border-\[var\(--accent\)\]{border-color:var(--accent);}

/* ── Border Radius (config-Override: full=0.75rem) ── */
.rounded{border-radius:0.125rem;}
.rounded-sm{border-radius:0.125rem;}
.rounded-lg{border-radius:0.25rem;}
.rounded-xl{border-radius:0.5rem;}
.rounded-full{border-radius:0.75rem;}

/* ── Effects ── */
.opacity-10{opacity:0.1;}
.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms;}
.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms;}
.animate-pulse{animation:tw-pulse 2s cubic-bezier(0.4,0,0.6,1) infinite;}
@keyframes tw-pulse{0%,100%{opacity:1;}50%{opacity:0.5;}}

/* ── Hover / Group variants ── */
.hover\:bg-\[\#1a8cd8\]:hover{background-color:var(--accent-hover,#1a8cd8);}
.hover\:text-white:hover{color:#fff;}
.hover\:underline:hover{text-decoration-line:underline;}
.group:hover .group-hover\:text-gray-400{color:#9ca3af;}

/* ── Form-Felder (Ersatz für @tailwindcss/forms Basis) ── */
input,textarea,select{font:inherit;color:inherit;}

/* ══════════════════════════════════════════════════════════════════════════
   Responsive (müssen NACH den Basis-Utilities stehen, damit z.B.
   `hidden lg:flex` korrekt umschaltet)
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width:640px){
  .sm\:inline{display:inline;}
  .sm\:flex{display:flex;}
  .sm\:flex-row{flex-direction:row;}
  .sm\:items-end{align-items:flex-end;}
  .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (min-width:768px){
  .md\:flex{display:flex;}
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (min-width:1024px){
  .lg\:flex{display:flex;}
  .lg\:hidden{display:none;}
  .lg\:col-span-2{grid-column:span 2 / span 2;}
  .lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
  .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
  .lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
}
@media (min-width:1280px){
  .xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
}