/*
 * beauty-2026.de – Compiled CSS
 * Basis: Tailwind CSS CDN + Custom Variables
 *
 * Für Hostinger: Diese Datei wird direkt ausgeliefert.
 * Tailwind wird via CDN-Script geladen (in header.php ergänzt).
 * Custom Beauty-Farben als CSS Custom Properties.
 */

/* ===== CUSTOM PROPERTIES ===== */
:root {
    --beauty-50:  #fdf2f8;
    --beauty-100: #fce7f3;
    --beauty-200: #fbcfe8;
    --beauty-300: #f9a8d4;
    --beauty-400: #f472b6;
    --beauty-500: #ec4899;
    --beauty-600: #db2777;
    --beauty-700: #be185d;
    --beauty-800: #9d174d;
    --beauty-900: #831843;
}

/* ===== TAILWIND FARB-ERWEITERUNGEN ===== */
.text-beauty-50  { color: var(--beauty-50); }
.text-beauty-100 { color: var(--beauty-100); }
.text-beauty-200 { color: var(--beauty-200); }
.text-beauty-300 { color: var(--beauty-300); }
.text-beauty-400 { color: var(--beauty-400); }
.text-beauty-500 { color: var(--beauty-500); }
.text-beauty-600 { color: var(--beauty-600); }
.text-beauty-700 { color: var(--beauty-700); }
.text-beauty-800 { color: var(--beauty-800); }
.text-beauty-900 { color: var(--beauty-900); }

.bg-beauty-50  { background-color: var(--beauty-50); }
.bg-beauty-100 { background-color: var(--beauty-100); }
.bg-beauty-200 { background-color: var(--beauty-200); }
.bg-beauty-300 { background-color: var(--beauty-300); }
.bg-beauty-400 { background-color: var(--beauty-400); }
.bg-beauty-500 { background-color: var(--beauty-500); }
.bg-beauty-600 { background-color: var(--beauty-600); }
.bg-beauty-700 { background-color: var(--beauty-700); }
.bg-beauty-800 { background-color: var(--beauty-800); }
.bg-beauty-900 { background-color: var(--beauty-900); }

.border-beauty-200 { border-color: var(--beauty-200); }
.border-beauty-300 { border-color: var(--beauty-300); }
.border-beauty-400 { border-color: var(--beauty-400); }
.border-beauty-500 { border-color: var(--beauty-500); }
.border-beauty-600 { border-color: var(--beauty-600); }

.hover\:bg-beauty-50:hover  { background-color: var(--beauty-50); }
.hover\:bg-beauty-600:hover { background-color: var(--beauty-600); }
.hover\:bg-beauty-700:hover { background-color: var(--beauty-700); }
.hover\:text-beauty-400:hover { color: var(--beauty-400); }
.hover\:text-beauty-600:hover { color: var(--beauty-600); }
.hover\:text-beauty-700:hover { color: var(--beauty-700); }
.hover\:border-beauty-200:hover { border-color: var(--beauty-200); }
.hover\:border-beauty-300:hover { border-color: var(--beauty-300); }

.ring-beauty-300 { --tw-ring-color: var(--beauty-300); }
.focus\:ring-beauty-300:focus { --tw-ring-color: var(--beauty-300); }

.from-beauty-500 { --tw-gradient-from: var(--beauty-500); }
.from-beauty-600 { --tw-gradient-from: var(--beauty-600); }
.to-beauty-500   { --tw-gradient-to:   var(--beauty-500); }
.via-beauty-500  { --tw-gradient-stops: var(--tw-gradient-from), var(--beauty-500), var(--tw-gradient-to); }

/* ===== FONT FAMILY ===== */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                 'Helvetica Neue', Arial, sans-serif;
}

/* ===== CONTAINER ===== */
.container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* ===== PROSE (für Intro-Texte) ===== */
.prose p        { margin-bottom: 1em; line-height: 1.75; }
.prose h2       { font-size: 1.5rem; font-weight: 700; margin: 1.5em 0 0.5em; color: var(--beauty-800); }
.prose h3       { font-size: 1.25rem; font-weight: 600; margin: 1.25em 0 0.5em; }
.prose ul       { list-style: disc; padding-left: 1.5em; margin-bottom: 1em; }
.prose li       { margin-bottom: 0.25em; }
.prose strong   { font-weight: 700; }
.prose a        { color: var(--beauty-600); text-decoration: underline; }
.prose a:hover  { color: var(--beauty-700); }

/* ===== STAR-RATING ===== */
.stars-container { display: inline-flex; gap: 2px; }

/* ===== UTILITY OVERRIDES ===== */
.antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Smooth Scrolling */
html { scroll-behavior: smooth; }

/* Focus Visible Ring */
*:focus-visible {
    outline: 2px solid var(--beauty-500);
    outline-offset: 2px;
}

/* ===== PRINT ===== */
@media print {
    nav, footer, form, button { display: none !important; }
    .container { max-width: 100%; }
}