/* CreatorHub AI – Custom Styles */ * { -webkit-tap-highlight-color: transparent; } html { scroll-behavior: smooth; } body { overscroll-behavior-y: none; } /* Schlanke Scrollbars */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } /* Fade-In Animation */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .animate-in { animation: fadeInUp 0.35s ease both; } /* Lade-Spinner */ .spinner { width: 18px; height: 18px; border: 2.5px solid rgba(255,255,255,0.4); border-top-color: #fff; border-radius: 50%; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Pill für Plattform-Auswahl */ .platform-pill input:checked + label, .option-pill input:checked + label { border-color: #9d2235; background: #fbe4e7; color: #7b1e2b; } /* Goldener Schimmer für Premium-Akzente */ .gold-text { background: linear-gradient(135deg, #c9a227, #e0bb52, #86661a); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ============================================================ Mobile-Optimierung (iOS / Android) ============================================================ */ /* iOS Safari zoomt beim Fokus auf Inputs < 16px hinein. Auf kleinen Screens erzwingen wir daher mind. 16px Schriftgröße für alle Formular-Felder, damit kein ungewollter Zoom passiert. */ @media (max-width: 1023px) { input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: 16px !important; } } /* Bessere Touch-Targets: interaktive Elemente nicht zu klein. (Nur auf Touch-Geräten, Desktop-Klickflächen bleiben kompakt.) */ @media (hover: none) and (pointer: coarse) { button, a[href], [role="button"], label.cursor-pointer { min-height: 40px; } } /* Horizontales Überlaufen / Wackeln auf dem Phone verhindern. Wichtig: overflow-x NUR auf (nicht auf ) und als `clip`, damit kein zusätzlicher vertikaler Scroll-Kontext entsteht – sonst lässt sich die Seite auf dem Desktop nicht mehr sauber scrollen. */ html { max-width: 100%; } body { max-width: 100%; overflow-x: clip; } /* Fallback für ältere Browser ohne `clip`-Support. */ @supports not (overflow-x: clip) { body { overflow-x: hidden; } } /* Safe-Area für Geräte mit Notch (iPhone) – linker/rechter Rand. */ @supports (padding: max(0px)) { body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } } /* Lange Wörter / URLs in Texten umbrechen statt Layout zu sprengen. */ p, h1, h2, h3, span, a, li { overflow-wrap: break-word; } /* Canvas-Vorschauen nie breiter als der Viewport. */ canvas { max-width: 100%; }