/* Ehrhardt Shop – ergänzende Styles zu TailwindCSS (CDN) */

:root {
    --brand: #111827;
    --accent: #4f46e5;
}

/* Sanftes Scrollverhalten & Grundlayout */
html { -webkit-text-size-adjust: 100%; }
body { text-rendering: optimizeLegibility; }

/* Material Symbols Outlined – Icon-Font */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.material-symbols-outlined.fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* Zeilenbegrenzung (Fallback falls Tailwind line-clamp nicht geladen) */
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Number-Input Pfeile ausblenden */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

/* Moderne Checkboxen & Radios */
input[type="checkbox"]:not(.sr-only):not([class*="peer"]),
input[type="radio"]:not(.sr-only):not([class*="peer"]) {
    appearance: none;
    -webkit-appearance: none;
    width: 1.2rem;
    height: 1.2rem;
    border: 2px solid #d1d5db;
    background: #fff;
    cursor: pointer;
    position: relative;
    flex: 0 0 auto;
    transition: border-color .15s, background-color .15s, box-shadow .15s;
    vertical-align: middle;
}
input[type="checkbox"]:not(.sr-only):not([class*="peer"]) { border-radius: .4rem; }
input[type="radio"]:not(.sr-only):not([class*="peer"]) { border-radius: 50%; }
input[type="checkbox"]:not(.sr-only):not([class*="peer"]):hover,
input[type="radio"]:not(.sr-only):not([class*="peer"]):hover { border-color: var(--accent); }
input[type="checkbox"]:not(.sr-only):not([class*="peer"]):focus-visible,
input[type="radio"]:not(.sr-only):not([class*="peer"]):focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
input[type="checkbox"]:not(.sr-only):not([class*="peer"]):checked,
input[type="radio"]:not(.sr-only):not([class*="peer"]):checked {
    background: var(--accent);
    border-color: var(--accent);
}
input[type="checkbox"]:not(.sr-only):not([class*="peer"]):checked::after {
    content: "";
    position: absolute;
    left: 50%; top: 46%;
    width: .3rem; height: .6rem;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -55%) rotate(45deg);
}
input[type="radio"]:not(.sr-only):not([class*="peer"]):checked::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: .5rem; height: .5rem;
    border-radius: 50%;
    background: #fff;
    transform: translate(-50%, -50%);
}

/* Flash-Nachrichten Animation */
.flash-msg { animation: flashIn .3s ease-out; }
@keyframes flashIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }

/* Off-Canvas-Panels */
#cart-drawer-panel.is-open,
#cart-drawer.is-open #cart-drawer-panel { transform: translateX(0) !important; }

/* Einfacher Prose-Fallback */
.prose :where(h1,h2,h3,h4) { font-weight: 700; line-height: 1.25; margin: 1.2em 0 .5em; }
.prose h2 { font-size: 1.4rem; }
.prose h3 { font-size: 1.15rem; }
.prose p { margin: .75em 0; line-height: 1.7; }
.prose ul { list-style: disc; padding-left: 1.4em; margin: .75em 0; }
.prose ol { list-style: decimal; padding-left: 1.4em; margin: .75em 0; }
.prose li { margin: .3em 0; }
.prose a { color: var(--brand); text-decoration: underline; }
.prose strong { font-weight: 600; }
.prose table { width: 100%; border-collapse: collapse; margin: 1em 0; }
.prose th, .prose td { border: 1px solid #e5e7eb; padding: .5rem .75rem; text-align: left; }

/* Custom Scrollbar dezent */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* --- UI-Modernisierung (#10) --- */

/* Akkordeon-Panel im Mobile-Menü (vertikal aufschiebend) */
[data-accordion-panel] { transition: grid-template-rows .3s ease-out; }

/* Floating Bottom-FAB darf Footer-Inhalte nicht verdecken */
@media (max-width: 1023px) {
    body { padding-bottom: 5.5rem; }
}

/* Slider-Track: native Touch-Swipe, Scrollbar ausgeblendet */
.scrollbar-none { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-none::-webkit-scrollbar { display: none; width: 0; height: 0; }
[data-slider-track] { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
[data-slider-track] > * { scroll-snap-align: center; }

/* Weiche, sanfte Schatten für schwebende Karten */
.shadow-soft { box-shadow: 0 10px 30px -12px rgba(17, 24, 39, .15); }

/* Reduced motion respektieren */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}