/* ============================================================
   1. SCHRIFTART EINBINDEN (lokal im Template)
   ============================================================ */
@font-face {
    font-family: 'Sugar Pie W00 Regular';
    src: url('../fonts/SugarPieW00-Regular.woff2') format('woff2'),
         url('../fonts/SugarPieW00-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ============================================================
   2. FARB- & DESIGN-VARIABLEN
   ============================================================ */
:root {
    --dr-primary: #333644;
    --dr-text-contrast: #ffffff;
    --dr-font-family: 'Sugar Pie W00 Regular', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ============================================================
   3. BASIS-TYPOGRAFIE & RENDERING
   ============================================================ */
body {
    font-family: var(--dr-font-family);
    font-size: 1rem;
    color: var(--dr-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--dr-font-family);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   4. DAYROCKERS FARBEN & UTILITIES
   ============================================================ */
.w3-dayrockers-color {
    color: var(--dr-primary) !important;
}

.w3-dayrockers-background-color {
    background-color: var(--dr-primary) !important;
    color: var(--dr-text-contrast);
}

.w3-footer-color {
    background-color: var(--dr-primary) !important;
    color: var(--dr-text-contrast);
}

/* Abgerundete Trennlinie im DayRockers-Farbton */
hr.rounded {
    border-top: 6px solid var(--dr-primary);
    border-radius: 4px;
    opacity: 1;
}

/* ============================================================
   5. HOVER-EFFEKTE (Aus der alten page.css übernommen)
   ============================================================ */
/* Hover-Zoom für Kacheln */
.grow {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    will-change: transform;
}

.grow:hover {
    transform: scale(1.06);
    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.15) !important;
}

/* Background-Hover-Zoom für Bilder/Galerien */
.hover-zoom {
    overflow: hidden;
    position: relative;
    background-size: 120%;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #6c757d;
    transition: background-size 0.3s ease-in-out;
}

.hover-zoom:hover {
    background-size: 135%;
}

.hover-zoom p {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    color: var(--dr-text-contrast);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    background: rgba(0, 0, 0, 0.45);
    padding: 0.5rem;
    margin: 0;
    box-sizing: border-box;
}

/* Interaktiver Cursor bei OnClick */
a[onclick] {
    cursor: pointer;
}