/* ============================================================
 * Wiegalm — Design System (consolidated)
 * Tokens + components from the Wiegalm Design System,
 * inlined for production use.
 * ============================================================ */

/* -- Fonts --------------------------------------------------- */
@font-face {
    font-family: 'Strichpunkt Sans';
    src: url('/assets/fonts/StrichpunktSans-VariableFont_wdth_wght.ttf') format('truetype-variations'),
         url('/assets/fonts/StrichpunktSans-VariableFont_wdth_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-stretch: 75% 125%;
    font-style: normal;
    font-display: swap;
}

/* -- Cormorant Garamond + Caveat (lokal selbst gehostet, DSGVO-konform) ----- */
/* cyrillic-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/google/caveat/v23/Wnz6HAc5bAfYB2Q7azYYmg8.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/google/caveat/v23/Wnz6HAc5bAfYB2Q7YjYYmg8.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/google/caveat/v23/Wnz6HAc5bAfYB2Q7aDYYmg8.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/google/caveat/v23/Wnz6HAc5bAfYB2Q7ZjYY.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/google/caveat/v23/Wnz6HAc5bAfYB2Q7azYYmg8.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/google/caveat/v23/Wnz6HAc5bAfYB2Q7YjYYmg8.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/google/caveat/v23/Wnz6HAc5bAfYB2Q7aDYYmg8.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/google/caveat/v23/Wnz6HAc5bAfYB2Q7ZjYY.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/google/caveat/v23/Wnz6HAc5bAfYB2Q7azYYmg8.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/google/caveat/v23/Wnz6HAc5bAfYB2Q7YjYYmg8.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/google/caveat/v23/Wnz6HAc5bAfYB2Q7aDYYmg8.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/google/caveat/v23/Wnz6HAc5bAfYB2Q7ZjYY.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/google/cormorantgaramond/v21/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtFmSq17w.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/google/cormorantgaramond/v21/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtMmSq17w.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/google/cormorantgaramond/v21/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtHmSq17w.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/google/cormorantgaramond/v21/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtGmSq17w.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/google/cormorantgaramond/v21/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtImSo.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/google/cormorantgaramond/v21/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtFmSq17w.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/google/cormorantgaramond/v21/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtMmSq17w.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/google/cormorantgaramond/v21/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtHmSq17w.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/google/cormorantgaramond/v21/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtGmSq17w.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/google/cormorantgaramond/v21/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtImSo.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/google/cormorantgaramond/v21/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtFmSq17w.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/google/cormorantgaramond/v21/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtMmSq17w.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/google/cormorantgaramond/v21/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtHmSq17w.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/google/cormorantgaramond/v21/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtGmSq17w.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/google/cormorantgaramond/v21/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtImSo.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/google/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYpHtKgS4.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/google/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYrXtKgS4.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/google/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYpntKgS4.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/google/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYp3tKgS4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/google/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/google/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYpHtKgS4.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/google/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYrXtKgS4.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/google/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYpntKgS4.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/google/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYp3tKgS4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/google/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/google/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYpHtKgS4.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/google/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYrXtKgS4.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/google/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYpntKgS4.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/google/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYp3tKgS4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/google/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* -- Design Tokens ------------------------------------------- */
:root {
    /* Raw palette */
    --paper:         #F4ECDB;
    --chalk:         #FBF7EE;
    --wood-dark:     #3B2A1C;
    --wood:          #7A4E2D;
    --wood-light:    #B98A5E;
    --shutter:       #8E2A2A;
    --shutter-dim:   #6E1F1F;
    --meadow:        #5A7A3E;
    --sky:           #A7C7DD;
    --stone:         #9B8E78;
    --ink:           #1F1A14;
    --headline:      #514E63;
    --headline-dim:  #3F3D4E;

    /* RGB triplets */
    --rgb-paper:     244, 236, 219;
    --rgb-chalk:     251, 247, 238;
    --rgb-wood-dark:  59,  42,  28;
    --rgb-wood:      122,  78,  45;
    --rgb-shutter:   142,  42,  42;
    --rgb-meadow:     90, 122,  62;
    --rgb-sky:       167, 199, 221;
    --rgb-stone:     155, 142, 120;
    --rgb-ink:        31,  26,  20;
    --rgb-headline:   81,  78,  99;

    /* Semantic */
    --bg-1:           var(--paper);
    --bg-2:           var(--chalk);
    --bg-inverse:     var(--wood-dark);
    --surface:        var(--chalk);
    --surface-raised: #FFFCF4;

    --fg-1:           var(--ink);
    --fg-headline:    var(--headline);
    --fg-2:           #4A3F30;
    --fg-3:           #75695A;
    --fg-on-dark:     var(--paper);
    --fg-muted-on-dark: rgba(var(--rgb-paper), .72);

    --accent:         var(--shutter);
    --accent-press:   var(--shutter-dim);
    --accent-2:       var(--meadow);
    --accent-3:       var(--sky);

    --rule:           rgba(var(--rgb-stone), .45);
    --rule-soft:      rgba(var(--rgb-wood), .20);
    --rule-strong:    var(--wood-dark);

    --success:        var(--meadow);
    --danger:         var(--shutter);
    --info:           #436A8A;
    --warning:        #C28A2C;

    /* Typography */
    --font-display:   'Cormorant Garamond', 'EB Garamond', Georgia, serif;
    --font-body:      'Strichpunkt Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-script:    'Strichpunkt Sans', sans-serif;

    --text-xs:   13px;
    --text-sm:   15px;
    --text-base: 18px;
    --text-md:   22px;
    --text-lg:   28px;
    --text-xl:   36px;
    --text-2xl:  46px;
    --text-3xl:  64px;
    --text-4xl:  88px;

    --leading-tight:  1.15;
    --leading-snug:   1.30;
    --leading-normal: 1.55;
    --leading-loose:  1.75;

    --tracking-tight:   -0.01em;
    --tracking-normal:   0;
    --tracking-wide:     0.04em;
    --tracking-wider:    0.10em;
    --tracking-display:  0.005em;

    --weight-light:    300;
    --weight-regular:  400;
    --weight-medium:   500;
    --weight-bold:     700;
    --weight-black:    900;

    /* Spacing (8px base) */
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;

    /* Radii */
    --radius-sm:   2px;
    --radius-md:   4px;
    --radius-lg:   8px;
    --radius-xl:  16px;
    --radius-pill: 999px;

    /* Shadows */
    --shadow-1: 0 1px 2px rgba(var(--rgb-wood-dark), .08);
    --shadow-2: 0 4px 12px rgba(var(--rgb-wood-dark), .10);
    --shadow-3: 0 16px 40px rgba(var(--rgb-wood-dark), .18);
    --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .5);

    /* Motion */
    --ease-out:  cubic-bezier(.4, .14, .3, 1);
    --ease-in:   cubic-bezier(.6, .04, .98, .34);
    --ease-soft: cubic-bezier(.25, .46, .45, .94);

    --dur-fast:   100ms;
    --dur-base:   240ms;
    --dur-slow:   280ms;
    --dur-zoom:   800ms;

    /* Layout */
    --container-narrow: 720px;
    --container:        1320px;
    --container-wide:   1320px;
    --gutter:           24px;
}

/* ============================================================
 * Base — applied globally
 * ============================================================ */
* { box-sizing: border-box; }

html {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--fg-1);
    background: var(--bg-1);
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
body { margin: 0; }

h1, .h1, .display-1 {
    font-family: var(--font-display);
    font-weight: var(--weight-regular);
    font-style: italic;
    font-size: var(--text-3xl);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-display);
    color: var(--fg-headline);
    margin: 0 0 var(--space-4);
}
h2, .h2 {
    font-family: var(--font-display);
    font-weight: var(--weight-regular);
    font-style: italic;
    font-size: var(--text-2xl);
    line-height: var(--leading-tight);
    color: var(--fg-headline);
    margin: 0 0 var(--space-4);
}
h3, .h3, .section-title {
    font-family: var(--font-display);
    font-weight: var(--weight-regular);
    font-style: italic;
    font-size: var(--text-xl);
    line-height: var(--leading-snug);
    color: var(--fg-headline);
    margin: 0 0 var(--space-3);
}
h4, .h4 {
    font-family: var(--font-body);
    font-weight: var(--weight-bold);
    font-size: var(--text-md);
    color: var(--fg-headline);
    margin: 0 0 var(--space-2);
}
h5, .h5, .eyebrow, .wg-eyebrow {
    font-family: var(--font-body);
    font-weight: var(--weight-bold);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--fg-3);
    margin: 0 0 var(--space-2);
}
.wg-eyebrow-on-dark { color: rgba(244,236,219,.65); }

.display-hero {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: var(--weight-regular);
    font-size: var(--text-4xl);
    line-height: 1.05;
    letter-spacing: var(--tracking-display);
    color: var(--fg-headline);
}

p, .body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--fg-2);
    margin: 0 0 var(--space-4);
}
.lead { font-size: var(--text-md); line-height: var(--leading-snug); color: var(--fg-1); }
.small, small { font-size: var(--text-sm); color: var(--fg-3); }
.metadata { font-size: var(--text-xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--fg-3); }

.script, .chalk-note, .wg-script {
    font-family: 'Caveat', 'Brush Script MT', cursive;
    font-weight: 600;
    font-size: 40px;
    color: var(--headline);
    line-height: 1.05;
    letter-spacing: 0;
}

a {
    color: var(--fg-1);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--dur-base) var(--ease-out),
                text-decoration-color var(--dur-base) var(--ease-out),
                text-decoration-style var(--dur-base) var(--ease-out);
}
a:hover { color: var(--accent); text-decoration-style: solid; }

::selection { background: rgba(var(--rgb-shutter), .22); color: var(--fg-1); }

/* ============================================================
 * Utilities
 * ============================================================ */
.paper-grain { position: relative; }
.paper-grain::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    opacity: .05; mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/></svg>");
}
.hair-rule { border: 0; border-top: 1px solid var(--rule); margin: var(--space-3) 0; }

.surface-dark {
    background: var(--bg-inverse); color: var(--fg-on-dark);
    box-shadow: var(--shadow-inset), var(--shadow-2);
}
.surface-dark a { color: var(--fg-on-dark); }
.surface-dark p { color: var(--fg-muted-on-dark); }

.capsule-on-photo {
    background: rgba(var(--rgb-paper), .94);
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
    border-radius: var(--radius-md); box-shadow: var(--shadow-2);
    padding: var(--space-5) var(--space-6);
}

.container        { max-width: var(--container);        margin: 0 auto; padding: 0 var(--gutter); }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--gutter); }
.container-wide   { max-width: var(--container-wide);   margin: 0 auto; padding: 0 var(--gutter); }

/* ============================================================
 * Icons (Lucide)
 * ============================================================ */
.wg-icon, [data-lucide] {
    display: inline-block;
    vertical-align: -2px;
    stroke-width: 1.6;
}
.wg-eyebrow [data-lucide] { vertical-align: -1px; margin-right: 4px; opacity: .8; }

/* ============================================================
 * Page chrome
 * ============================================================ */
.wg-page { min-height: 100vh; background: var(--bg-1); display: flex; flex-direction: column; }
.wg-main { flex: 1; }
.wg-section-wrap { padding: 72px 0; }

/* ============================================================
 * Header
 * ============================================================ */
.wg-header {
    position: sticky; top: 0; z-index: 30;
    background: rgba(244, 236, 219, .92);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--rule);
}
.wg-header-inner {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px var(--gutter);
    max-width: var(--container-wide); margin: 0 auto;
}
.wg-brand { text-decoration: none; display: inline-flex; align-items: center; gap: 12px; }
.wg-brand:hover { text-decoration: none; }
.wg-brand-mark {
    height: 38px;
    width: auto;
    flex-shrink: 0;
    transform-origin: center;
    animation: wg-brand-bloom 800ms var(--ease-out) both;
    transition: transform 500ms var(--ease-out);
}
.wg-brand:hover .wg-brand-mark {
    transform: rotate(14deg) scale(1.08);
}
.wg-brand:active .wg-brand-mark {
    transform: rotate(-3deg) scale(0.96);
    transition-duration: 100ms;
}
@keyframes wg-brand-bloom {
    0%   { transform: scale(0.4) rotate(-15deg); opacity: 0; }
    60%  { transform: scale(1.06) rotate(6deg);  opacity: 1; }
    100% { transform: scale(1)    rotate(0);     opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .wg-brand-mark { animation: none; }
    .wg-brand:hover .wg-brand-mark { transform: none; }
}
.wg-wordmark {
    font-family: 'Strichpunkt Sans', sans-serif;
    font-weight: 200; font-size: 30px; line-height: 1;
    letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--headline);
}
.wg-nav { display: flex; gap: 18px; align-items: center; }
.wg-nav-link {
    font-family: var(--font-body); font-size: 13px; font-weight: 700;
    letter-spacing: .04em; color: var(--ink);
    text-decoration: none;
    padding: 6px 2px;
    border-bottom: 1.5px solid transparent;
    transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.wg-nav-link:hover { color: var(--shutter); text-decoration: none; }
.wg-nav-link.is-active { color: var(--shutter); border-bottom-color: var(--shutter); }

/* Mobile menu toggle */
.wg-nav-toggle {
    display: none;
    background: transparent; border: 0; cursor: pointer;
    padding: 8px; color: var(--ink);
}
.wg-mobile-nav {
    display: none;
    flex-direction: column; gap: 0;
    background: var(--paper);
    border-top: 1px solid var(--rule);
}
.wg-mobile-nav.is-open { display: flex; }
.wg-mobile-nav a {
    padding: 14px var(--gutter);
    font-family: var(--font-body); font-size: 15px; font-weight: 700;
    letter-spacing: .04em; color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--rule);
}
.wg-mobile-nav a.is-active { color: var(--shutter); }

@media (max-width: 860px) {
    .wg-nav { display: none; }
    .wg-nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
}

/* ============================================================
 * Hero
 * ============================================================ */
.wg-hero { position: relative; height: 720px; overflow: hidden; box-shadow: var(--shadow-2); }
.wg-hero-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wg-hero-grad {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(31,26,20,.10) 0%, transparent 35%, transparent 60%, rgba(31,26,20,.50) 100%);
    pointer-events: none;
}
.wg-hero-capsule {
    position: absolute;
    right: max(calc((100% - var(--container)) / 2 + var(--gutter)), 5%);
    bottom: 56px;
    width: 360px; max-width: calc(100% - 32px);
    padding: 28px 32px;
    background: rgba(244, 236, 219, .96);
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-3);
}
.wg-display {
    font-family: var(--font-display);
    font-style: italic; font-weight: 500;
    font-size: 34px; line-height: 1.1;
    margin: 0 0 12px; color: var(--headline);
    letter-spacing: .005em;
}
.wg-display-2 {
    font-family: var(--font-display);
    font-style: italic; font-weight: 500;
    font-size: 36px; line-height: 1.12;
    margin: 0 0 14px; color: var(--headline);
}
.wg-lead { font-family: var(--font-body); font-size: 15px; line-height: 1.45; color: var(--fg-1); margin: 0; }

/* Hero badge (saison status pill on photo) */
.wg-hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-body); font-size: 12px; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    padding: 6px 12px; border-radius: var(--radius-pill);
    margin-bottom: 14px;
}
.wg-hero-badge-open    { background: rgba(90,122,62,.18); color: var(--meadow); }
.wg-hero-badge-closed  { background: rgba(142,42,42,.14); color: var(--shutter); }
.wg-hero-badge-paused  { background: rgba(194,138,44,.16); color: #8c5e1c; }
.wg-hero-badge .dot { width: 7px; height: 7px; border-radius: 999px; background: currentColor; }

/* ============================================================
 * Grid / aside layout (Start page)
 * ============================================================ */
.wg-grid {
    display: grid; grid-template-columns: 1fr 420px;
    gap: 56px;
    max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter);
}
.wg-stack { display: flex; flex-direction: column; gap: 24px; }

/* Contact aside (dark wood card) */
.wg-contact-aside {
    background: var(--wood-dark); color: var(--paper);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255,255,255,.06);
    padding: 28px 30px; align-self: start;
}
.wg-contact-aside .wg-eyebrow { color: rgba(244,236,219,.65); }
.wg-contact-name {
    font-family: var(--font-display); font-style: italic; font-weight: 500;
    font-size: 28px; line-height: 1.15; color: var(--paper); margin: 0 0 18px;
}
.wg-contact-line { margin: 6px 0; font-family: var(--font-body); font-size: 15px; display: flex; align-items: center; gap: 8px; color: var(--paper); }
.wg-contact-line a { color: var(--paper); border-bottom: 1px dotted rgba(244,236,219,.4); padding-bottom: 1px; text-decoration: none; }
.wg-contact-line a:hover { border-bottom-style: solid; color: var(--paper); }
.wg-contact-line [data-lucide] { color: rgba(244,236,219,.7); flex-shrink: 0; }
.wg-contact-note { font-family: var(--font-body); font-size: 13px; line-height: 1.55; color: rgba(244,236,219,.78); margin: 0; }
.wg-aside-rule { border: 0; border-top: 1px solid rgba(244,236,219,.18); margin: 18px 0; }

/* ============================================================
 * Opening hours card (on Start: in left column)
 * ============================================================ */
.wg-hours {
    position: relative;
    background: var(--surface-raised);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-2);
    padding: 28px 30px;
    overflow: hidden;
}
.wg-hours::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--headline);
}
.wg-hours-flag {
    position: absolute; top: 18px; right: 22px;
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-body); font-size: 11px; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    padding: 4px 10px; border-radius: var(--radius-pill);
}
.wg-hours-flag-open    { background: rgba(90,122,62,.14);  color: var(--meadow); }
.wg-hours-flag-closed  { background: rgba(142,42,42,.10);  color: var(--shutter); }
.wg-hours-flag-paused  { background: rgba(194,138,44,.14); color: #8c5e1c; }
.wg-hours-dot {
    width: 7px; height: 7px; border-radius: 999px; background: currentColor;
    box-shadow: 0 0 0 0 currentColor;
    animation: wg-pulse 2.4s var(--ease-out) infinite;
}
@keyframes wg-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(90,122,62,.5); }
    70%  { box-shadow: 0 0 0 8px rgba(90,122,62,0); }
    100% { box-shadow: 0 0 0 0 rgba(90,122,62,0); }
}
.wg-hours-days {
    font-family: var(--font-display); font-style: italic; font-weight: 500;
    font-size: 28px; line-height: 1.15; color: var(--headline);
}
.wg-hours-time {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--font-body); font-size: 22px; font-weight: 700;
    color: var(--headline); margin-top: 8px;
}
.wg-hours-time [data-lucide] { color: var(--headline); }
.wg-hours-note { font-family: var(--font-body); font-size: 14px; color: var(--fg-2); margin: 10px 0 22px; }
.wg-text-link {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-body); font-size: 13px; font-weight: 700;
    color: var(--ink); text-decoration: none;
    border-bottom: 1px dotted var(--stone); padding-bottom: 2px;
    transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.wg-text-link:hover { color: var(--headline); border-bottom-color: var(--headline); border-bottom-style: solid; }

/* Weekly hours table */
.wg-week-list { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-direction: column; }
.wg-week-row {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 10px 0;
    border-bottom: 1px solid var(--rule);
    font-family: var(--font-body); font-size: 15px; color: var(--fg-2);
}
.wg-week-row:last-child { border-bottom: 0; }
.wg-week-row.is-today { color: var(--headline); font-weight: 700; }
.wg-week-row.is-today .wg-week-day::after {
    content: "Heute"; margin-left: 10px;
    font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
    background: var(--headline); color: var(--paper);
    padding: 2px 8px; border-radius: var(--radius-pill);
}
.wg-week-row.is-closed { color: var(--fg-3); font-style: italic; }
.wg-week-row.is-exception { color: var(--shutter); }

/* ============================================================
 * About block (prose with signature)
 * ============================================================ */
.wg-about { display: block; max-width: 100%; margin: 0; padding: 0; }
.wg-about-inner { max-width: 100%; }
.wg-body { font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--fg-2); margin: 0 0 14px; }
.wg-body-lead { font-size: 18px; color: var(--fg-1); }
.wg-signature { margin-top: 18px; }

/* ============================================================
 * Teaser cards (3-column grid below Start hero)
 * ============================================================ */
.wg-teasers-wrap { background: var(--bg-2); padding: 64px 0 80px; }
.wg-teasers {
    max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter);
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
.wg-teaser {
    display: flex; flex-direction: column;
    background: var(--surface-raised);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-1);
    overflow: hidden;
    text-decoration: none; color: inherit;
    transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.wg-teaser:hover { box-shadow: var(--shadow-3); transform: translateY(-2px); text-decoration: none; }
.wg-teaser:hover .wg-teaser-img { transform: scale(1.04); }
.wg-teaser:hover .wg-teaser-icon-badge { background: var(--headline); color: var(--paper); }
.wg-teaser-img-wrap { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.wg-teaser-icon-badge {
    position: absolute; top: 16px; right: 16px;
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(244,236,219,.94);
    color: var(--headline);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-2);
    transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.wg-teaser-img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 800ms var(--ease-out);
}
.wg-teaser-body { padding: 22px 26px 26px; display: flex; flex-direction: column; gap: 8px; }
.wg-teaser-title {
    font-family: var(--font-display); font-style: italic; font-weight: 500;
    font-size: 28px; line-height: 1.15; color: var(--headline); margin: 0;
}
.wg-teaser-text { font-family: var(--font-body); font-size: 15px; line-height: 1.5; color: var(--fg-2); margin: 4px 0 8px; }
.wg-teaser-cta {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-body); font-size: 13px; font-weight: 700;
    letter-spacing: .04em; color: var(--headline);
    border-bottom: 1px dotted var(--stone); padding-bottom: 2px;
    align-self: flex-start;
    transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), gap var(--dur-base) var(--ease-out);
}
.wg-teaser:hover .wg-teaser-cta { color: var(--headline-dim); border-bottom-style: solid; border-bottom-color: var(--headline); gap: 10px; }

@media (max-width: 960px) {
    .wg-teasers { grid-template-columns: 1fr; gap: 18px; }
}

/* ============================================================
 * Buttons
 * ============================================================ */
.wg-btn {
    display: inline-block;
    font-family: var(--font-body); font-size: 14px; font-weight: 700;
    letter-spacing: .04em;
    padding: 14px 28px;
    border-radius: var(--radius-md);
    border: 0; cursor: pointer; text-decoration: none;
    transition: background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-fast);
}
.wg-btn:hover { text-decoration: none; }
.wg-btn:active { transform: translateY(1px); box-shadow: var(--shadow-inset); }
.wg-btn-with-icon { display: inline-flex; align-items: center; gap: 8px; }
.wg-btn-with-icon [data-lucide] { stroke-width: 1.8; }
.wg-btn-primary { background: var(--headline); color: var(--paper); box-shadow: var(--shadow-1); }
.wg-btn-primary:hover { background: var(--headline-dim); box-shadow: var(--shadow-2); color: var(--paper); }
.wg-btn-secondary { background: var(--wood-dark); color: var(--paper); box-shadow: var(--shadow-1); }
.wg-btn-secondary:hover { background: #2A1E14; color: var(--paper); }
.wg-btn-accent { background: var(--shutter); color: var(--paper); box-shadow: var(--shadow-1); }
.wg-btn-accent:hover { background: var(--shutter-dim); color: var(--paper); }
.wg-btn-text {
    background: transparent; color: var(--ink); padding: 8px 0;
    border-radius: 0; border-bottom: 1px dotted var(--stone);
}
.wg-btn-text:hover { color: var(--shutter); border-bottom-style: solid; border-bottom-color: var(--shutter); }
.wg-btn-ghost {
    background: rgba(81,78,99,.08); color: var(--headline);
}
.wg-btn-ghost:hover { background: rgba(81,78,99,.16); color: var(--headline); }

/* ============================================================
 * Form (reservation, etc.)
 * ============================================================ */
.wg-form {
    background: var(--surface-raised);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-2);
    padding: 36px 40px;
}
.wg-form-title {
    font-family: var(--font-display); font-style: italic; font-weight: 500;
    font-size: 32px; line-height: 1.12; color: var(--headline); margin: 0 0 24px;
}
.wg-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; }
.wg-field { display: flex; flex-direction: column; gap: 6px; }
.wg-field-full { grid-column: 1 / -1; }
.wg-field-label {
    font-family: var(--font-body); font-weight: 700; font-size: 11px;
    letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3);
}
.wg-field input, .wg-field select, .wg-field textarea {
    font-family: var(--font-body); font-size: 15px; color: var(--ink);
    padding: 8px 0;
    border: 0; border-bottom: 1.5px solid var(--wood-dark);
    background: transparent; border-radius: 0; outline: none;
    transition: border-color var(--dur-base) var(--ease-out);
}
.wg-field textarea { padding: 8px 0; resize: vertical; min-height: 80px; }
.wg-field input::placeholder, .wg-field textarea::placeholder { color: var(--fg-3); opacity: .7; }
.wg-field input:focus, .wg-field select:focus, .wg-field textarea:focus { border-bottom-color: var(--shutter); }
.wg-field input[type="checkbox"], .wg-field input[type="radio"] {
    width: 18px; height: 18px; padding: 0;
    border: 1.5px solid var(--wood-dark); border-radius: var(--radius-sm);
    background: var(--surface-raised); accent-color: var(--headline);
    flex-shrink: 0; cursor: pointer;
}
.wg-field input[type="checkbox"]:focus, .wg-field input[type="radio"]:focus {
    border-color: var(--shutter); outline: 2px solid rgba(var(--rgb-shutter), .25); outline-offset: 1px;
}
.wg-hint { font-family: var(--font-body); font-size: 11px; color: var(--fg-3); margin-top: 4px; }
.wg-fineprint { font-family: var(--font-body); font-size: 12px; color: var(--fg-3); margin: 24px 0 28px; }
.wg-form-confirm .wg-form-title { color: var(--meadow); }
.wg-form-error {
    background: rgba(142,42,42,.08); color: var(--shutter);
    border-left: 3px solid var(--shutter);
    padding: 12px 16px; margin: 0 0 18px;
    font-family: var(--font-body); font-size: 14px;
}

@media (max-width: 760px) {
    .wg-form { padding: 24px; }
    .wg-field-grid { grid-template-columns: 1fr; }
}

/* ============================================================
 * Menu (Speisekarte) — dot-leader rows
 * ============================================================ */
.wg-menu-page { max-width: 820px; margin: 0 auto; padding: 72px var(--gutter); }
.wg-menu-page-title {
    font-family: var(--font-display); font-style: italic; font-weight: 500;
    font-size: 56px; line-height: 1.05; text-align: center;
    color: var(--headline); margin: 0 0 8px;
}
.wg-menu-page-sub {
    text-align: center;
    font-family: var(--font-body); font-size: 13px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--fg-3); margin: 0 0 56px;
}

/* Filter tabs for menu groups */
.wg-tabs {
    display: flex; flex-wrap: wrap; gap: 8px;
    justify-content: center; margin: 0 auto 40px;
}
.wg-tab {
    font-family: var(--font-body); font-size: 12px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    padding: 8px 16px; border-radius: var(--radius-pill);
    background: transparent; color: var(--fg-2);
    border: 1px solid var(--rule);
    cursor: pointer;
    transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.wg-tab:hover { background: rgba(81,78,99,.06); color: var(--headline); border-color: var(--headline); }
.wg-tab.is-active { background: var(--headline); color: var(--paper); border-color: var(--headline); }

.wg-section { margin-bottom: 56px; }
.wg-section-title {
    font-family: var(--font-display); font-style: italic; font-weight: 500;
    font-size: 32px; line-height: 1.15;
    display: inline-block;
    border-bottom: 2px solid var(--wood-dark); padding-bottom: 6px;
    color: var(--headline); margin: 0 0 22px;
}
.wg-section-note {
    font-family: var(--font-body); font-size: 13px; font-style: italic;
    color: var(--fg-3); margin: -10px 0 18px;
}
.wg-section-weekend-flag {
    display: inline-flex; align-items: center; gap: 6px; margin-left: 12px;
    font-family: var(--font-body); font-size: 11px; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    padding: 3px 10px; border-radius: var(--radius-pill);
    vertical-align: middle;
}
.wg-section-weekend-flag-today  { background: rgba(90,122,62,.16); color: var(--meadow); }
.wg-section-weekend-flag-future { background: rgba(194,138,44,.16); color: #8c5e1c; }

.wg-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.wg-row {}
.wg-row-line { display: flex; align-items: baseline; gap: 8px; }
.wg-row-name { font-family: var(--font-body); font-weight: 700; font-size: 17px; color: var(--headline); }
.wg-row-dots { flex: 1; border-bottom: 1.5px dotted var(--stone); transform: translateY(-4px); }
.wg-row-price { font-family: var(--font-body); font-weight: 700; font-size: 17px; color: var(--headline); white-space: nowrap; }
.wg-row-desc { font-family: var(--font-body); font-size: 13px; color: var(--fg-3); margin-top: 2px; }
.wg-row-sub  { font-family: var(--font-body); font-size: 12px; color: var(--fg-3); font-style: italic; margin-top: 2px; }
.wg-row-menge-inline { font-family: var(--font-body); font-weight: 700; color: var(--headline); white-space: nowrap; }
.wg-row-tags { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.wg-tag {
    font-family: var(--font-body); font-size: 10px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    padding: 2px 8px; border-radius: var(--radius-pill);
}
.wg-tag-vegan       { background: rgba(90,122,62,.14); color: var(--meadow); }
.wg-tag-vegetarisch { background: rgba(90,122,62,.14); color: var(--meadow); }
.wg-tag-tirol       { background: rgba(142,42,42,.10); color: var(--shutter); }
.wg-tag-spezial     { background: var(--shutter); color: var(--paper); }
.wg-tag-wochenende  { background: rgba(194,138,44,.16); color: #8c5e1c; }

/* ============================================================
 * Tour cards
 * ============================================================ */
.wg-tour-card {
    background: var(--surface-raised);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-1);
    padding: 24px 28px;
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 22px;
    align-items: flex-start;
    transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.wg-tour-card:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); }
.wg-tour-icon {
    width: 56px; height: 56px; border-radius: var(--radius-pill);
    background: rgba(81,78,99,.10); color: var(--headline);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.wg-tour-body { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.wg-tour-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wg-tour-title { font-family: var(--font-display); font-style: italic; font-size: 26px; line-height: 1.15; margin: 0; color: var(--headline); }
.wg-tour-desc { font-family: var(--font-body); font-size: 15px; line-height: 1.55; color: var(--fg-2); margin: 0; }

.wg-tour-meta-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px dotted var(--rule);
}
.wg-tour-meta-row > div { display: flex; flex-direction: column; gap: 2px; }
.wg-tour-meta-row .wg-eyebrow { margin: 0; }
.wg-tour-meta-row strong {
    font-family: var(--font-body); font-weight: 700; font-size: 15px;
    color: var(--headline); letter-spacing: 0.01em;
}

.wg-tour-difficulty {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 12px; border-radius: var(--radius-pill);
    font-family: var(--font-body); font-size: 11px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    white-space: nowrap;
}
.wg-tour-diff-leicht { background: rgba(90,122,62,.16);  color: var(--meadow); }
.wg-tour-diff-mittel { background: rgba(194,138,44,.18); color: #8c5e1c; }
.wg-tour-diff-schwer { background: rgba(142,42,42,.14);  color: var(--shutter); }

@media (max-width: 640px) {
    .wg-tour-card { grid-template-columns: 48px 1fr; gap: 16px; padding: 20px; }
    .wg-tour-meta-row { grid-template-columns: 1fr 1fr; gap: 12px 18px; }
}

/* ============================================================
 * Lage / map
 * ============================================================ */
.wg-map-wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.wg-map {
    height: 460px; border-radius: var(--radius-md); position: relative; overflow: hidden;
    box-shadow: var(--shadow-2);
}
.wg-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.wg-map-placeholder {
    width: 100%; height: 100%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 32px var(--space-5);
    text-align: center;
    background:
        linear-gradient(135deg, rgba(81,78,99,.04) 0%, rgba(90,122,62,.06) 100%),
        var(--surface-raised);
    color: var(--fg-2);
}
.wg-map-placeholder a { color: var(--headline); }

@media (max-width: 640px) {
    .wg-map { height: 360px; }
}

/* ============================================================
 * Callouts (Info / Warning / Tipp)
 * ============================================================ */
.wg-callout {
    background: var(--surface-raised);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-1);
    padding: 18px 22px;
    display: flex; gap: 14px; align-items: flex-start;
    border-left: 4px solid var(--headline);
}
.wg-callout-icon {
    flex-shrink: 0;
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--headline);
}
.wg-callout-body { font-family: var(--font-body); font-size: 15px; line-height: 1.55; color: var(--fg-1); }
.wg-callout-body strong { color: var(--headline); }
.wg-callout-body > :first-child { margin-top: 0; }
.wg-callout-body > :last-child { margin-bottom: 0; }

.wg-callout-warning { border-left-color: var(--warning); background: rgba(194,138,44,.06); }
.wg-callout-warning .wg-callout-icon { color: var(--warning); }
.wg-callout-danger { border-left-color: var(--shutter); background: rgba(142,42,42,.06); }
.wg-callout-danger .wg-callout-icon { color: var(--shutter); }
.wg-callout-info { border-left-color: var(--info); }
.wg-callout-info .wg-callout-icon { color: var(--info); }

/* ============================================================
 * Footer
 * ============================================================ */
.wg-footer { background: var(--wood-dark); color: var(--paper); padding: 56px 0 20px; margin-top: 64px; }
.wg-footer-inner {
    max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter);
    display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 44px;
}
.wg-footer-brand .wg-footer-mark {
    font-family: 'Strichpunkt Sans', sans-serif; font-weight: 200;
    font-size: 38px; line-height: 1; letter-spacing: 0.04em; text-transform: uppercase;
    margin-bottom: 14px; color: var(--paper);
}
.wg-footer-brand .wg-footer-line { display: flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 13px; color: rgba(244,236,219,.72); margin-top: 4px; }
.wg-footer-brand .wg-footer-line [data-lucide] { opacity: .7; }
.wg-footer-col { display: flex; flex-direction: column; gap: 6px; }
.wg-footer-col a, .wg-footer-col span {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-body); font-size: 13px; color: var(--paper);
    text-decoration: none; border-bottom: 1px dotted rgba(244,236,219,.3); padding-bottom: 2px; width: max-content;
}
.wg-footer-col a [data-lucide], .wg-footer-col span [data-lucide] { opacity: .7; }
.wg-footer-col a:hover { color: var(--paper); border-bottom-style: solid; }
.wg-footer-col a:hover [data-lucide] { opacity: 1; }
.wg-footer-base {
    max-width: var(--container); margin: 40px auto 0; padding: 16px var(--gutter) 0;
    border-top: 1px solid rgba(244,236,219,.18);
    font-family: var(--font-body); font-size: 12px; color: rgba(244,236,219,.55);
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 18px;
    align-items: center;
}
.wg-footer-base-links { display: inline-flex; flex-wrap: wrap; gap: 4px 18px; align-items: center; }
.wg-footer-base-links a {
    color: rgba(244,236,219,.7);
    font-size: 12px;
    text-decoration: none;
    border-bottom: 1px dotted rgba(244,236,219,.3);
    padding-bottom: 1px;
    transition: color var(--dur-base) var(--ease-out), border-bottom-style var(--dur-base) var(--ease-out);
}
.wg-footer-base-links a:hover { color: var(--paper); border-bottom-style: solid; }

@media (max-width: 960px) {
    .wg-footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .wg-footer-inner { grid-template-columns: 1fr; gap: 28px; }
}

/* ============================================================
 * Responsive bits
 * ============================================================ */
@media (max-width: 960px) {
    .wg-grid { grid-template-columns: 1fr; }
    .wg-hero { height: 460px; }
    .wg-hero-capsule { left: 16px; right: 16px; bottom: 24px; max-width: none; width: auto; }
    .wg-display { font-size: 30px; }
    .wg-section-wrap { padding: 48px 0; }
    .wg-menu-page { padding: 48px var(--gutter); }
    .wg-menu-page-title { font-size: 42px; }
}

/* ============================================================
 * Push opt-in banner
 * ============================================================ */
.wg-push-banner {
    position: fixed;
    bottom: 16px; left: 16px; right: 16px;
    max-width: 420px;
    background: var(--surface-raised);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-3);
    padding: 20px 24px;
    z-index: 50;
    border-top: 3px solid var(--headline);
}
.wg-push-banner-title {
    font-family: var(--font-body); font-weight: 700; font-size: 15px;
    color: var(--headline); margin: 0 0 4px;
    display: flex; align-items: center; gap: 8px;
}
.wg-push-banner-text { font-family: var(--font-body); font-size: 13px; color: var(--fg-2); margin: 0 0 14px; line-height: 1.5; }
.wg-push-banner-actions { display: flex; gap: 10px; }
.wg-push-banner-actions .wg-btn { flex: 1; padding: 10px 16px; font-size: 13px; }

@media (min-width: 640px) {
    .wg-push-banner { left: auto; right: 16px; width: 420px; }
}

/* ============================================================
 * Gallery grid
 * ============================================================ */
.wg-gallery {
    display: grid; gap: 16px;
    grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) { .wg-gallery { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .wg-gallery { grid-template-columns: repeat(4, 1fr); } }

.wg-gallery-tile {
    position: relative; aspect-ratio: 1 / 1; overflow: hidden;
    border: 0; padding: 0; margin: 0;
    border-radius: var(--radius-md);
    cursor: pointer;
    background: var(--bg-2);
    box-shadow: var(--shadow-2);
    font: inherit; color: inherit;
    transition: box-shadow var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out);
}
.wg-gallery-tile:hover { box-shadow: var(--shadow-3); transform: translateY(-2px); }
.wg-gallery-tile:focus-visible {
    outline: none;
    box-shadow: var(--shadow-3), 0 0 0 3px rgba(var(--rgb-headline), .35);
}
.wg-gallery-tile:focus:not(:focus-visible) { outline: none; }
.wg-gallery-tile img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 800ms var(--ease-out);
}
.wg-gallery-tile:hover img { transform: scale(1.04); }

/* ============================================================
 * Lightbox (Galerie)
 * ============================================================ */
.lightbox {
    position: fixed; inset: 0;
    background: rgba(31,26,20,.94);
    display: none;
    align-items: center; justify-content: center;
    z-index: 9999;
    padding: 1rem;
    touch-action: pan-y;
}
.lightbox.open { display: flex; }
.lightbox-figure {
    margin: 0;
    max-width: 95vw; max-height: 95vh;
    display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
}
.lightbox-figure img {
    max-width: 95vw; max-height: calc(95vh - 3rem);
    box-shadow: var(--shadow-3);
    border-radius: var(--radius-md);
}
.lightbox-figure figcaption {
    color: var(--paper);
    font-family: var(--font-body);
    font-size: 14px; text-align: center;
    max-width: 80vw;
    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}
.lightbox-figure .counter {
    color: rgba(244,236,219,.65);
    font-family: var(--font-body);
    font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
}
.lightbox .close,
.lightbox .nav {
    position: absolute;
    background: rgba(31,26,20,.55);
    color: var(--paper);
    border: none; cursor: pointer;
    border-radius: 9999px;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.lightbox .close:hover,
.lightbox .nav:hover { background: rgba(31,26,20,.85); transform: scale(1.05); }
.lightbox .close:focus-visible,
.lightbox .nav:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.lightbox .close { top: 1rem; right: 1rem; width: 2.75rem; height: 2.75rem; font-size: 1.75rem; line-height: 1; }
.lightbox .nav { top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; }
.lightbox .nav:hover { transform: translateY(-50%) scale(1.05); }
.lightbox .nav-prev { left: 0.75rem; }
.lightbox .nav-next { right: 0.75rem; }

@media (max-width: 640px) {
    .lightbox .nav { width: 2.5rem; height: 2.5rem; }
    .lightbox .nav-prev { left: 0.25rem; }
    .lightbox .nav-next { right: 0.25rem; }
}