/* Seitenweites Design im Stil der Startseite.
   Wird nach style.css und public.css geladen und überschreibt nur das Aussehen
   (Typografie, Kacheln, Tabellen, Fußleiste ...), nicht das Layout der Seiten.
   Die Suchleisten bleiben bewusst in ihrer kompakten Form. */

/* Kopfleiste über dem Inhalt */
body.public .topbar{
    margin-bottom:8px;
}
body.public .topbar a.brand{
    color: var(--color-text);
    text-decoration:none;
}
body.public .topbar a.brand:hover{
    color: var(--color-primary);
}

/* Überschriften */
body.public .main-title{
    margin: 12px 0 28px;
    font-size: clamp(28px, 3.6vw, 40px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--color-text);
}
body.public h2,
body.public h3{
    font-weight: 750;
    letter-spacing: -0.015em;
    color: var(--color-text);
}

/* Kacheln & Boxen */
body.public .table-section,
body.public .request-item-card,
body.public .request-card,
body.public .day-agenda{
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}
body.public .request-item-card{
    padding: 18px;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
body.public .request-item-card:hover{
    transform: translateY(-2px);
    border-color: rgba(37,99,235,.35);
    box-shadow: 0 2px 4px rgba(15,23,42,.05), 0 18px 40px -12px rgba(37,99,235,.25);
}
body.public .request-item-info strong{
    font-weight: 650;
}
body.public .request-item-grid{
    gap: 16px;
}
body.public .custom-item-box{
    padding: 18px;
    background:
        radial-gradient(420px 200px at 100% 0%, rgba(37,99,235,.07), transparent 70%),
        var(--color-surface);
    border: 1px dashed rgba(37,99,235,.35);
    border-radius: var(--radius-lg);
}
body.public .empty-cart-box,
body.public .checkout-box{
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}
body.public .checkout-box{
    margin-top: 8px;
}
body.public .request-card.has-conflict{
    border-color: #f87171;
}

/* Tabellen */
body.public th{
    background: #f8fafc;
    color: var(--color-text-muted);
}

/* Formulare */
body.public form input:focus,
body.public form textarea:focus,
body.public form select:focus{
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(37,99,235,.12);
}
body.public form button,
body.public form a,
body.public table a,
body.public .btn-link{
    border-radius: var(--radius-sm);
    font-weight: 650;
}
body.public .btn-sm{
    border-radius: 8px;
}

/* Mengenauswahl */
body.public .qty-stepper{
    border-color: var(--color-border-strong);
    border-radius: 11px;
    background: var(--color-surface);
}
body.public .qty-btn{
    background: transparent;
    color: var(--color-text);
}
body.public .qty-btn:hover{
    background: var(--color-primary-light);
    color: var(--color-primary);
}
body.public .qty-minus{
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
body.public .qty-plus{
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

/* Meldungen */
body.public .flash,
body.public .flash-error{
    border-radius: var(--radius-md);
}

/* Kalender */
body.public .calendar-day-cell{
    border-radius: 8px;
}

/* Warenkorb-Button oben rechts */
body.public .cart-fab{
    position: absolute;
    top: 76px;
    background: var(--color-text);
    color: #fff;
    border: 1px solid var(--color-text);
    box-shadow: 0 10px 24px -10px rgba(15,23,42,.6);
}
body.public .cart-fab.cart-fab-sticky{
    position: fixed;
    top: 12px;
}
body.public .cart-fab:hover{
    background: #1e293b;
    color: #fff;
    box-shadow: 0 14px 28px -10px rgba(15,23,42,.6);
}

/* Fußleiste */
body.public .footer-links{
    background: rgba(255,255,255,.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--color-border);
    box-shadow: none;
}
body.public .footer-links a{
    color: var(--color-text);
}
body.public .footer-links a:hover{
    color: var(--color-primary);
}

@media (prefers-reduced-motion: reduce){
    body.public .request-item-card{ transition: none; }
    body.public .request-item-card:hover{ transform: none; }
}