/* Selbst gehostete Schriften — bewusst NICHT von Google geladen.
   Beim Laden von fonts.googleapis.com wird die IP-Adresse jeder Besucherin
   an Google in die USA übertragen; das ist ohne Einwilligung unzulässig
   (LG München I, 3 O 17493/20). Erzeugt aus der damaligen Einbindung,
   Zeichensätze auf latin/latin-ext beschränkt.
   Schriften stehen unter der SIL Open Font License bzw. Apache 2.0. */

@font-face {
  font-family: 'Bodoni Moda';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('/schriften/bodoni-moda-italic-400_700-latin-ext.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;
}

@font-face {
  font-family: 'Bodoni Moda';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('/schriften/bodoni-moda-italic-400_700-latin.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;
}

@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/schriften/bodoni-moda-normal-400_700-latin-ext.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;
}

@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/schriften/bodoni-moda-normal-400_700-latin.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;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/schriften/cormorant-garamond-italic-400-latin-ext.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;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/schriften/cormorant-garamond-italic-400-latin.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;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('/schriften/cormorant-garamond-italic-500-latin-ext.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;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('/schriften/cormorant-garamond-italic-500-latin.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;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('/schriften/cormorant-garamond-italic-600-latin-ext.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;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('/schriften/cormorant-garamond-italic-600-latin.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;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/schriften/cormorant-garamond-normal-400-latin-ext.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;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/schriften/cormorant-garamond-normal-400-latin.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;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/schriften/cormorant-garamond-normal-500-latin-ext.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;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/schriften/cormorant-garamond-normal-500-latin.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;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/schriften/cormorant-garamond-normal-600-latin-ext.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;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/schriften/cormorant-garamond-normal-600-latin.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;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/schriften/cormorant-garamond-normal-700-latin-ext.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;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/schriften/cormorant-garamond-normal-700-latin.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;
}

@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/schriften/fraunces-italic-400-latin-ext.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;
}

@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/schriften/fraunces-italic-400-latin.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;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/schriften/fraunces-normal-400-latin-ext.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;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/schriften/fraunces-normal-400-latin.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;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/schriften/fraunces-normal-600-latin-ext.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;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/schriften/fraunces-normal-600-latin.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;
}

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/schriften/hanken-grotesk-normal-400-latin-ext.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;
}

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/schriften/hanken-grotesk-normal-400-latin.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;
}

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/schriften/hanken-grotesk-normal-500-latin-ext.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;
}

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/schriften/hanken-grotesk-normal-500-latin.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;
}

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/schriften/hanken-grotesk-normal-600-latin-ext.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;
}

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/schriften/hanken-grotesk-normal-600-latin.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;
}

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/schriften/hanken-grotesk-normal-700-latin-ext.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;
}

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/schriften/hanken-grotesk-normal-700-latin.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;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/schriften/jetbrains-mono-normal-400-latin-ext.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;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/schriften/jetbrains-mono-normal-400-latin.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;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/schriften/jetbrains-mono-normal-500-latin-ext.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;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/schriften/jetbrains-mono-normal-500-latin.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;
}

@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/schriften/lora-italic-400-latin-ext.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;
}

@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/schriften/lora-italic-400-latin.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;
}

@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/schriften/lora-normal-400-latin-ext.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;
}

@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/schriften/lora-normal-400-latin.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;
}

@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/schriften/lora-normal-500-latin-ext.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;
}

@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/schriften/lora-normal-500-latin.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;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/schriften/manrope-normal-400-latin-ext.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;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/schriften/manrope-normal-400-latin.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;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/schriften/manrope-normal-500-latin-ext.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;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/schriften/manrope-normal-500-latin.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;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/schriften/manrope-normal-600-latin-ext.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;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/schriften/manrope-normal-600-latin.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;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/schriften/playfair-display-italic-400-latin-ext.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;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/schriften/playfair-display-italic-400-latin.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;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/schriften/playfair-display-normal-400-latin-ext.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;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/schriften/playfair-display-normal-400-latin.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;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/schriften/playfair-display-normal-700-latin-ext.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;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/schriften/playfair-display-normal-700-latin.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;
}


/* ── Nachtrag 06.08.2026: Schriften für die neuen Schrift-Paarungen ──
   Cinzel (römische Versalien), Jost (geometrische Grotesk) und Parisienne
   (Schreibschrift, ausschließlich für Namen und Monogramm). Alle drei stehen
   unter der SIL Open Font License. Heruntergeladen wird pro Besucherin nur,
   was das jeweils gewählte Schrift-Thema tatsächlich benutzt. */

@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/schriften/cinzel-normal-400-latin-ext.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;
}

@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/schriften/cinzel-normal-400-latin.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;
}

@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/schriften/cinzel-normal-600-latin-ext.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;
}

@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/schriften/cinzel-normal-600-latin.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;
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/schriften/jost-normal-400-latin-ext.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;
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/schriften/jost-normal-400-latin.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;
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/schriften/jost-normal-500-latin-ext.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;
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/schriften/jost-normal-500-latin.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;
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/schriften/jost-normal-600-latin-ext.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;
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/schriften/jost-normal-600-latin.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;
}

@font-face {
  font-family: 'Parisienne';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/schriften/parisienne-normal-400-latin-ext.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;
}

@font-face {
  font-family: 'Parisienne';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/schriften/parisienne-normal-400-latin.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;
}

/* Schriften kommen vom eigenen Server, nicht von Google — sonst würde die
   IP-Adresse jeder Besucherin an Google in die USA übertragen, ohne dass
   dafür eine Einwilligung vorliegt (abgemahnt, LG München I 3 O 17493/20).
   Die Dateien liegen in public/schriften/, siehe styles/schriften.css. */

*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/* ! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com */

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: "JetBrains Mono", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
/* Formularfarben folgen der Farbwelt der Gästeseite. Vorher waren sie fest
     verdrahtet (dunkelgraue Beschriftung, weißes Feld) — auf den dunklen
     Farbwelten war die Beschriftung dadurch dunkel auf dunkel und praktisch
     unlesbar, das Eingabefeld stach als weißer Block heraus.
     Dashboard und Anmeldung setzen keine Theme-Variablen, dort greifen die
     bisherigen Werte weiterhin als Rückfallebene. */
.field-label {
    font-family: "JetBrains Mono", monospace;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-ink-soft, #6B5F52);
    display: block;
    margin-bottom: 0.4rem;
  }
.field-input {
    width: 100%;
    background: var(--color-paper, #FFFFFF);
    border: 1px solid var(--color-line, #E3DACD);
    border-radius: 10px;
    padding: 0.72rem 1rem;
    font-family: "Hanken Grotesk", sans-serif;
    font-size: 0.94rem;
    color: var(--color-ink, #2B2420);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
  }
.field-input:focus {
    outline: none;
    border-color: var(--color-gold, #B8433E);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-gold, #B8433E) 18%, transparent);
  }
/* Platzhalter gegen die FELDFARBE mischen statt gegen transparent:
     Halbtransparenter Text war auf dunklem Grund kaum noch zu erkennen.
     So bleibt der Kontrast in hellen wie dunklen Farbwelten gleich gut. */
.field-input::-moz-placeholder {
    color: color-mix(in srgb, var(--color-ink, #2B2420) 62%, var(--color-paper, #FFFFFF));
    opacity: 1; /* Firefox dimmt Platzhalter sonst zusätzlich ab */
  }
.field-input::placeholder {
    color: color-mix(in srgb, var(--color-ink, #2B2420) 62%, var(--color-paper, #FFFFFF));
    opacity: 1; /* Firefox dimmt Platzhalter sonst zusätzlich ab */
  }
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: #B8433E;
    color: #FBF7F2;
    font-family: "Hanken Grotesk", sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.85rem 1.9rem;
    border-radius: 100px;
    box-shadow: 0 10px 24px -8px rgba(184, 67, 62, 0.5);
    transition: transform 0.3s var(--ease), box-shadow 0.3s ease, background 0.3s ease;
  }
.btn-primary:hover { transform: translateY(-2px); background: #8A322D; box-shadow: 0 14px 30px -8px rgba(184, 67, 62, 0.6); }
.btn-primary:disabled { opacity: 0.5; transform: none; cursor: not-allowed; }
.pointer-events-none{
  pointer-events: none;
}
.visible{
  visibility: visible;
}
.static{
  position: static;
}
.fixed{
  position: fixed;
}
.absolute{
  position: absolute;
}
.relative{
  position: relative;
}
.sticky{
  position: sticky;
}
.-inset-2{
  inset: -0.5rem;
}
.-inset-8{
  inset: -2rem;
}
.inset-0{
  inset: 0px;
}
.inset-1{
  inset: 0.25rem;
}
.inset-\[-14\%\]{
  inset: -14%;
}
.inset-\[-16\%\]{
  inset: -16%;
}
.inset-\[6px\]{
  inset: 6px;
}
.inset-x-0{
  left: 0px;
  right: 0px;
}
.-top-7{
  top: -1.75rem;
}
.bottom-0{
  bottom: 0px;
}
.bottom-1{
  bottom: 0.25rem;
}
.bottom-10{
  bottom: 2.5rem;
}
.bottom-2{
  bottom: 0.5rem;
}
.bottom-3{
  bottom: 0.75rem;
}
.bottom-4{
  bottom: 1rem;
}
.bottom-5{
  bottom: 1.25rem;
}
.left-0{
  left: 0px;
}
.left-1\/2{
  left: 50%;
}
.left-2{
  left: 0.5rem;
}
.left-3{
  left: 0.75rem;
}
.left-4{
  left: 1rem;
}
.right-0{
  right: 0px;
}
.right-1{
  right: 0.25rem;
}
.right-1\.5{
  right: 0.375rem;
}
.right-2{
  right: 0.5rem;
}
.right-3{
  right: 0.75rem;
}
.right-4{
  right: 1rem;
}
.right-5{
  right: 1.25rem;
}
.top-0{
  top: 0px;
}
.top-0\.5{
  top: 0.125rem;
}
.top-1{
  top: 0.25rem;
}
.top-1\.5{
  top: 0.375rem;
}
.top-2{
  top: 0.5rem;
}
.top-3{
  top: 0.75rem;
}
.top-4{
  top: 1rem;
}
.top-full{
  top: 100%;
}
.isolate{
  isolation: isolate;
}
.z-10{
  z-index: 10;
}
.z-20{
  z-index: 20;
}
.z-30{
  z-index: 30;
}
.z-40{
  z-index: 40;
}
.z-50{
  z-index: 50;
}
.z-\[70\]{
  z-index: 70;
}
.order-1{
  order: 1;
}
.order-2{
  order: 2;
}
.-mx-6{
  margin-left: -1.5rem;
  margin-right: -1.5rem;
}
.mx-0\.5{
  margin-left: 0.125rem;
  margin-right: 0.125rem;
}
.mx-1{
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.mx-8{
  margin-left: 2rem;
  margin-right: 2rem;
}
.mx-\[0\.08em\]{
  margin-left: 0.08em;
  margin-right: 0.08em;
}
.mx-auto{
  margin-left: auto;
  margin-right: auto;
}
.\!mb-1{
  margin-bottom: 0.25rem !important;
}
.\!mb-3{
  margin-bottom: 0.75rem !important;
}
.-mt-1{
  margin-top: -0.25rem;
}
.-mt-14{
  margin-top: -3.5rem;
}
.-mt-2{
  margin-top: -0.5rem;
}
.-mt-3{
  margin-top: -0.75rem;
}
.-mt-4{
  margin-top: -1rem;
}
.-mt-6{
  margin-top: -1.5rem;
}
.mb-0\.5{
  margin-bottom: 0.125rem;
}
.mb-1{
  margin-bottom: 0.25rem;
}
.mb-1\.5{
  margin-bottom: 0.375rem;
}
.mb-10{
  margin-bottom: 2.5rem;
}
.mb-11{
  margin-bottom: 2.75rem;
}
.mb-12{
  margin-bottom: 3rem;
}
.mb-14{
  margin-bottom: 3.5rem;
}
.mb-16{
  margin-bottom: 4rem;
}
.mb-2{
  margin-bottom: 0.5rem;
}
.mb-2\.5{
  margin-bottom: 0.625rem;
}
.mb-3{
  margin-bottom: 0.75rem;
}
.mb-4{
  margin-bottom: 1rem;
}
.mb-5{
  margin-bottom: 1.25rem;
}
.mb-6{
  margin-bottom: 1.5rem;
}
.mb-7{
  margin-bottom: 1.75rem;
}
.mb-8{
  margin-bottom: 2rem;
}
.mb-9{
  margin-bottom: 2.25rem;
}
.ml-1\.5{
  margin-left: 0.375rem;
}
.ml-2{
  margin-left: 0.5rem;
}
.ml-3{
  margin-left: 0.75rem;
}
.ml-auto{
  margin-left: auto;
}
.mt-0\.5{
  margin-top: 0.125rem;
}
.mt-1{
  margin-top: 0.25rem;
}
.mt-1\.5{
  margin-top: 0.375rem;
}
.mt-10{
  margin-top: 2.5rem;
}
.mt-11{
  margin-top: 2.75rem;
}
.mt-12{
  margin-top: 3rem;
}
.mt-14{
  margin-top: 3.5rem;
}
.mt-16{
  margin-top: 4rem;
}
.mt-2{
  margin-top: 0.5rem;
}
.mt-2\.5{
  margin-top: 0.625rem;
}
.mt-20{
  margin-top: 5rem;
}
.mt-28{
  margin-top: 7rem;
}
.mt-3{
  margin-top: 0.75rem;
}
.mt-3\.5{
  margin-top: 0.875rem;
}
.mt-4{
  margin-top: 1rem;
}
.mt-5{
  margin-top: 1.25rem;
}
.mt-6{
  margin-top: 1.5rem;
}
.mt-7{
  margin-top: 1.75rem;
}
.mt-8{
  margin-top: 2rem;
}
.mt-9{
  margin-top: 2.25rem;
}
.block{
  display: block;
}
.inline-block{
  display: inline-block;
}
.inline{
  display: inline;
}
.flex{
  display: flex;
}
.inline-flex{
  display: inline-flex;
}
.\!table{
  display: table !important;
}
.table{
  display: table;
}
.grid{
  display: grid;
}
.hidden{
  display: none;
}
.aspect-square{
  aspect-ratio: 1 / 1;
}
.h-1{
  height: 0.25rem;
}
.h-1\.5{
  height: 0.375rem;
}
.h-10{
  height: 2.5rem;
}
.h-12{
  height: 3rem;
}
.h-14{
  height: 3.5rem;
}
.h-16{
  height: 4rem;
}
.h-2{
  height: 0.5rem;
}
.h-20{
  height: 5rem;
}
.h-24{
  height: 6rem;
}
.h-28{
  height: 7rem;
}
.h-3\.5{
  height: 0.875rem;
}
.h-4{
  height: 1rem;
}
.h-44{
  height: 11rem;
}
.h-5{
  height: 1.25rem;
}
.h-6{
  height: 1.5rem;
}
.h-64{
  height: 16rem;
}
.h-7{
  height: 1.75rem;
}
.h-72{
  height: 18rem;
}
.h-8{
  height: 2rem;
}
.h-9{
  height: 2.25rem;
}
.h-\[132px\]{
  height: 132px;
}
.h-\[2\.625rem\]{
  height: 2.625rem;
}
.h-\[26rem\]{
  height: 26rem;
}
.h-\[40\%\]{
  height: 40%;
}
.h-\[720px\]{
  height: 720px;
}
.h-auto{
  height: auto;
}
.h-full{
  height: 100%;
}
.h-px{
  height: 1px;
}
.max-h-full{
  max-height: 100%;
}
.min-h-\[1\.25rem\]{
  min-height: 1.25rem;
}
.min-h-\[100svh\]{
  min-height: 100svh;
}
.min-h-\[23rem\]{
  min-height: 23rem;
}
.min-h-\[86svh\]{
  min-height: 86svh;
}
.min-h-\[92svh\]{
  min-height: 92svh;
}
.min-h-screen{
  min-height: 100vh;
}
.\!w-20{
  width: 5rem !important;
}
.\!w-24{
  width: 6rem !important;
}
.\!w-40{
  width: 10rem !important;
}
.\!w-44{
  width: 11rem !important;
}
.w-1\/2{
  width: 50%;
}
.w-12{
  width: 3rem;
}
.w-14{
  width: 3.5rem;
}
.w-16{
  width: 4rem;
}
.w-2{
  width: 0.5rem;
}
.w-2\/3{
  width: 66.666667%;
}
.w-20{
  width: 5rem;
}
.w-24{
  width: 6rem;
}
.w-28{
  width: 7rem;
}
.w-3\.5{
  width: 0.875rem;
}
.w-3\/4{
  width: 75%;
}
.w-32{
  width: 8rem;
}
.w-4{
  width: 1rem;
}
.w-40{
  width: 10rem;
}
.w-44{
  width: 11rem;
}
.w-5{
  width: 1.25rem;
}
.w-6{
  width: 1.5rem;
}
.w-7{
  width: 1.75rem;
}
.w-8{
  width: 2rem;
}
.w-9{
  width: 2.25rem;
}
.w-\[132px\]{
  width: 132px;
}
.w-\[395px\]{
  width: 395px;
}
.w-\[40\%\]{
  width: 40%;
}
.w-\[56px\]{
  width: 56px;
}
.w-\[clamp\(110px\2c 26vw\2c 290px\)\]{
  width: clamp(110px, 26vw, 290px);
}
.w-\[min\(20rem\2c calc\(100vw-2\.5rem\)\)\]{
  width: min(20rem, calc(100vw - 2.5rem));
}
.w-auto{
  width: auto;
}
.w-fit{
  width: -moz-fit-content;
  width: fit-content;
}
.w-full{
  width: 100%;
}
.w-px{
  width: 1px;
}
.min-w-0{
  min-width: 0px;
}
.min-w-\[140px\]{
  min-width: 140px;
}
.min-w-\[2\.6rem\]{
  min-width: 2.6rem;
}
.max-w-2xl{
  max-width: 42rem;
}
.max-w-3xl{
  max-width: 48rem;
}
.max-w-6xl{
  max-width: 72rem;
}
.max-w-\[1180px\]{
  max-width: 1180px;
}
.max-w-\[1200px\]{
  max-width: 1200px;
}
.max-w-\[1400px\]{
  max-width: 1400px;
}
.max-w-\[1480px\]{
  max-width: 1480px;
}
.max-w-\[21ch\]{
  max-width: 21ch;
}
.max-w-\[22ch\]{
  max-width: 22ch;
}
.max-w-\[24ch\]{
  max-width: 24ch;
}
.max-w-\[26rem\]{
  max-width: 26rem;
}
.max-w-\[28ch\]{
  max-width: 28ch;
}
.max-w-\[300px\]{
  max-width: 300px;
}
.max-w-\[30ch\]{
  max-width: 30ch;
}
.max-w-\[34ch\]{
  max-width: 34ch;
}
.max-w-\[38ch\]{
  max-width: 38ch;
}
.max-w-\[46ch\]{
  max-width: 46ch;
}
.max-w-\[470px\]{
  max-width: 470px;
}
.max-w-\[520px\]{
  max-width: 520px;
}
.max-w-\[52ch\]{
  max-width: 52ch;
}
.max-w-\[54ch\]{
  max-width: 54ch;
}
.max-w-\[62ch\]{
  max-width: 62ch;
}
.max-w-full{
  max-width: 100%;
}
.max-w-md{
  max-width: 28rem;
}
.max-w-sm{
  max-width: 24rem;
}
.max-w-xl{
  max-width: 36rem;
}
.max-w-xs{
  max-width: 20rem;
}
.flex-1{
  flex: 1 1 0%;
}
.flex-\[2\]{
  flex: 2;
}
.shrink-0{
  flex-shrink: 0;
}
.-translate-x-1\/2{
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-\[0\.15em\]{
  --tw-translate-y: 0.15em;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-rotate-\[5deg\]{
  --tw-rotate: -5deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-180{
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-45{
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-\[-0\.6deg\]{
  --tw-rotate: -0.6deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-\[-1\.4deg\]{
  --tw-rotate: -1.4deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-\[1\.4deg\]{
  --tw-rotate: 1.4deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-105{
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-scale-x-100{
  --tw-scale-x: -1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform{
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.cursor-default{
  cursor: default;
}
.cursor-grab{
  cursor: grab;
}
.cursor-pointer{
  cursor: pointer;
}
.select-none{
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.resize-none{
  resize: none;
}
.scroll-mt-20{
  scroll-margin-top: 5rem;
}
.grid-cols-1{
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.flex-col{
  flex-direction: column;
}
.flex-wrap{
  flex-wrap: wrap;
}
.items-start{
  align-items: flex-start;
}
.items-end{
  align-items: flex-end;
}
.items-center{
  align-items: center;
}
.items-baseline{
  align-items: baseline;
}
.items-stretch{
  align-items: stretch;
}
.justify-end{
  justify-content: flex-end;
}
.justify-center{
  justify-content: center;
}
.justify-between{
  justify-content: space-between;
}
.gap-0\.5{
  gap: 0.125rem;
}
.gap-1{
  gap: 0.25rem;
}
.gap-1\.5{
  gap: 0.375rem;
}
.gap-12{
  gap: 3rem;
}
.gap-14{
  gap: 3.5rem;
}
.gap-16{
  gap: 4rem;
}
.gap-2{
  gap: 0.5rem;
}
.gap-2\.5{
  gap: 0.625rem;
}
.gap-3{
  gap: 0.75rem;
}
.gap-3\.5{
  gap: 0.875rem;
}
.gap-4{
  gap: 1rem;
}
.gap-5{
  gap: 1.25rem;
}
.gap-6{
  gap: 1.5rem;
}
.gap-7{
  gap: 1.75rem;
}
.gap-8{
  gap: 2rem;
}
.gap-x-10{
  -moz-column-gap: 2.5rem;
       column-gap: 2.5rem;
}
.gap-x-12{
  -moz-column-gap: 3rem;
       column-gap: 3rem;
}
.gap-x-3{
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}
.gap-x-4{
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}
.gap-x-5{
  -moz-column-gap: 1.25rem;
       column-gap: 1.25rem;
}
.gap-x-6{
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}
.gap-x-8{
  -moz-column-gap: 2rem;
       column-gap: 2rem;
}
.gap-y-10{
  row-gap: 2.5rem;
}
.gap-y-2{
  row-gap: 0.5rem;
}
.gap-y-2\.5{
  row-gap: 0.625rem;
}
.gap-y-3{
  row-gap: 0.75rem;
}
.gap-y-6{
  row-gap: 1.5rem;
}
.gap-y-8{
  row-gap: 2rem;
}
.space-y-0 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0px * var(--tw-space-y-reverse));
}
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-10 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2.5rem * var(--tw-space-y-reverse));
}
.space-y-12 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(3rem * var(--tw-space-y-reverse));
}
.space-y-14 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(3.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(3.5rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-3\.5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.875rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.875rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.overflow-auto{
  overflow: auto;
}
.overflow-hidden{
  overflow: hidden;
}
.overflow-x-auto{
  overflow-x: auto;
}
.overflow-y-auto{
  overflow-y: auto;
}
.truncate{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-nowrap{
  white-space: nowrap;
}
.whitespace-pre-line{
  white-space: pre-line;
}
.break-words{
  overflow-wrap: break-word;
}
.break-all{
  word-break: break-all;
}
.rounded{
  border-radius: 0.25rem;
}
.rounded-2xl{
  border-radius: 1rem;
}
.rounded-\[2\.4rem\]{
  border-radius: 2.4rem;
}
.rounded-\[24px\]{
  border-radius: 24px;
}
.rounded-full{
  border-radius: 9999px;
}
.rounded-lg{
  border-radius: 0.5rem;
}
.rounded-xl{
  border-radius: 0.75rem;
}
.rounded-t-\[9rem\]{
  border-top-left-radius: 9rem;
  border-top-right-radius: 9rem;
}
.border{
  border-width: 1px;
}
.border-0{
  border-width: 0px;
}
.border-2{
  border-width: 2px;
}
.border-\[10px\]{
  border-width: 10px;
}
.border-\[7px\]{
  border-width: 7px;
}
.border-b{
  border-bottom-width: 1px;
}
.border-l{
  border-left-width: 1px;
}
.border-l-2{
  border-left-width: 2px;
}
.border-r{
  border-right-width: 1px;
}
.border-t{
  border-top-width: 1px;
}
.border-dashed{
  border-style: dashed;
}
.border-gold{
  border-color: var(--color-gold, #C9A25E);
}
.border-ink{
  border-color: var(--color-ink, #2B2420);
}
.border-line{
  border-color: var(--color-line, #E3DACD);
}
.\!bg-white{
  --tw-bg-opacity: 1 !important;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important;
}
.bg-background{
  background-color: var(--color-background, #FBF7F2);
}
.bg-canvas{
  background-color: var(--color-canvas, #EFE8DC);
}
.bg-ink{
  background-color: var(--color-ink, #2B2420);
}
.bg-line{
  background-color: var(--color-line, #E3DACD);
}
.bg-paper{
  background-color: var(--color-paper, #FFFFFF);
}
.bg-surface{
  background-color: var(--color-surface, #F1EBE0);
}
.bg-transparent{
  background-color: transparent;
}
.bg-white{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.object-cover{
  -o-object-fit: cover;
     object-fit: cover;
}
.object-\[42\%_25\%\]{
  -o-object-position: 42% 25%;
     object-position: 42% 25%;
}
.object-left-top{
  -o-object-position: left top;
     object-position: left top;
}
.p-1{
  padding: 0.25rem;
}
.p-1\.5{
  padding: 0.375rem;
}
.p-2{
  padding: 0.5rem;
}
.p-2\.5{
  padding: 0.625rem;
}
.p-3{
  padding: 0.75rem;
}
.p-4{
  padding: 1rem;
}
.p-5{
  padding: 1.25rem;
}
.p-6{
  padding: 1.5rem;
}
.p-7{
  padding: 1.75rem;
}
.p-8{
  padding: 2rem;
}
.\!px-4{
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}
.\!py-1{
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}
.\!py-1\.5{
  padding-top: 0.375rem !important;
  padding-bottom: 0.375rem !important;
}
.\!py-2{
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}
.\!py-2\.5{
  padding-top: 0.625rem !important;
  padding-bottom: 0.625rem !important;
}
.px-1{
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-10{
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}
.px-2{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-2\.5{
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.px-3{
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-3\.5{
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}
.px-4{
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5{
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6{
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.px-7{
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}
.px-8{
  padding-left: 2rem;
  padding-right: 2rem;
}
.py-0\.5{
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1{
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5{
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-10{
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.py-12{
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-14{
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}
.py-16{
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.py-2{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5{
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-20{
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.py-24{
  padding-top: 6rem;
  padding-bottom: 6rem;
}
.py-28{
  padding-top: 7rem;
  padding-bottom: 7rem;
}
.py-3{
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-3\.5{
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}
.py-32{
  padding-top: 8rem;
  padding-bottom: 8rem;
}
.py-4{
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-5{
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.py-6{
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-7{
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
}
.py-8{
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.pb-1{
  padding-bottom: 0.25rem;
}
.pb-10{
  padding-bottom: 2.5rem;
}
.pb-16{
  padding-bottom: 4rem;
}
.pb-2{
  padding-bottom: 0.5rem;
}
.pb-20{
  padding-bottom: 5rem;
}
.pb-24{
  padding-bottom: 6rem;
}
.pb-3{
  padding-bottom: 0.75rem;
}
.pb-4{
  padding-bottom: 1rem;
}
.pb-6{
  padding-bottom: 1.5rem;
}
.pl-3{
  padding-left: 0.75rem;
}
.pl-8{
  padding-left: 2rem;
}
.pr-1\.5{
  padding-right: 0.375rem;
}
.pr-8{
  padding-right: 2rem;
}
.pt-1{
  padding-top: 0.25rem;
}
.pt-2{
  padding-top: 0.5rem;
}
.pt-3{
  padding-top: 0.75rem;
}
.pt-4{
  padding-top: 1rem;
}
.pt-5{
  padding-top: 1.25rem;
}
.pt-6{
  padding-top: 1.5rem;
}
.pt-8{
  padding-top: 2rem;
}
.text-left{
  text-align: left;
}
.text-center{
  text-align: center;
}
.text-right{
  text-align: right;
}
.font-body{
  font-family: var(--font-body), "Hanken Grotesk", "Segoe UI", sans-serif;
}
.font-display{
  font-family: var(--font-display), "Bodoni Moda", Georgia, serif;
}
.font-mono{
  font-family: "JetBrains Mono", monospace;
}
.\!text-xs{
  font-size: 0.75rem !important;
  line-height: 1rem !important;
}
.text-2xl{
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-3xl{
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-4xl{
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.text-6xl{
  font-size: 3.75rem;
  line-height: 1;
}
.text-\[0\.62em\]{
  font-size: 0.62em;
}
.text-\[1\.5rem\]{
  font-size: 1.5rem;
}
.text-\[1\.6rem\]{
  font-size: 1.6rem;
}
.text-\[1\.7rem\]{
  font-size: 1.7rem;
}
.text-\[1\.9rem\]{
  font-size: 1.9rem;
}
.text-\[10px\]{
  font-size: 10px;
}
.text-\[11px\]{
  font-size: 11px;
}
.text-\[13px\]{
  font-size: 13px;
}
.text-\[15px\]{
  font-size: 15px;
}
.text-\[2\.1rem\]{
  font-size: 2.1rem;
}
.text-\[2\.2rem\]{
  font-size: 2.2rem;
}
.text-\[2\.4rem\]{
  font-size: 2.4rem;
}
.text-\[2\.6rem\]{
  font-size: 2.6rem;
}
.text-\[2rem\]{
  font-size: 2rem;
}
.text-\[8px\]{
  font-size: 8px;
}
.text-\[9px\]{
  font-size: 9px;
}
.text-base{
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg{
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm{
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl{
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs{
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-bold{
  font-weight: 700;
}
.font-medium{
  font-weight: 500;
}
.font-normal{
  font-weight: 400;
}
.font-semibold{
  font-weight: 600;
}
.uppercase{
  text-transform: uppercase;
}
.italic{
  font-style: italic;
}
.tabular-nums{
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-\[0\.95\]{
  line-height: 0.95;
}
.leading-\[0\.98\]{
  line-height: 0.98;
}
.leading-\[1\.02\]{
  line-height: 1.02;
}
.leading-\[1\.04\]{
  line-height: 1.04;
}
.leading-\[1\.05\]{
  line-height: 1.05;
}
.leading-\[1\.06\]{
  line-height: 1.06;
}
.leading-\[1\.15\]{
  line-height: 1.15;
}
.leading-\[1\.35\]{
  line-height: 1.35;
}
.leading-none{
  line-height: 1;
}
.leading-relaxed{
  line-height: 1.625;
}
.leading-snug{
  line-height: 1.375;
}
.leading-tight{
  line-height: 1.25;
}
.tracking-\[-0\.025em\]{
  letter-spacing: -0.025em;
}
.tracking-\[-0\.028em\]{
  letter-spacing: -0.028em;
}
.tracking-\[-0\.02em\]{
  letter-spacing: -0.02em;
}
.tracking-\[-0\.03em\]{
  letter-spacing: -0.03em;
}
.tracking-\[0\.08em\]{
  letter-spacing: 0.08em;
}
.tracking-\[0\.12em\]{
  letter-spacing: 0.12em;
}
.tracking-\[0\.15em\]{
  letter-spacing: 0.15em;
}
.tracking-\[0\.16em\]{
  letter-spacing: 0.16em;
}
.tracking-\[0\.18em\]{
  letter-spacing: 0.18em;
}
.tracking-\[0\.1em\]{
  letter-spacing: 0.1em;
}
.tracking-\[0\.22em\]{
  letter-spacing: 0.22em;
}
.tracking-\[0\.24em\]{
  letter-spacing: 0.24em;
}
.tracking-\[0\.25em\]{
  letter-spacing: 0.25em;
}
.tracking-\[0\.28em\]{
  letter-spacing: 0.28em;
}
.tracking-\[0\.2em\]{
  letter-spacing: 0.2em;
}
.tracking-\[0\.32em\]{
  letter-spacing: 0.32em;
}
.tracking-\[0\.3em\]{
  letter-spacing: 0.3em;
}
.tracking-\[0\.4em\]{
  letter-spacing: 0.4em;
}
.tracking-tight{
  letter-spacing: -0.025em;
}
.tracking-wide{
  letter-spacing: 0.025em;
}
.tracking-wider{
  letter-spacing: 0.05em;
}
.tracking-widest{
  letter-spacing: 0.1em;
}
.text-accent{
  color: var(--color-accent, #B8433E);
}
.text-background{
  color: var(--color-background, #FBF7F2);
}
.text-gold{
  color: var(--color-gold, #C9A25E);
}
.text-ink{
  color: var(--color-ink, #2B2420);
}
.text-ink-soft{
  color: var(--color-ink-soft, #6B5F52);
}
.text-white\/90{
  color: rgb(255 255 255 / 0.9);
}
.underline{
  text-decoration-line: underline;
}
.decoration-gold{
  text-decoration-color: var(--color-gold, #C9A25E);
}
.underline-offset-2{
  text-underline-offset: 2px;
}
.underline-offset-4{
  text-underline-offset: 4px;
}
.underline-offset-\[6px\]{
  text-underline-offset: 6px;
}
.accent-\[\#55684B\]{
  accent-color: #55684B;
}
.opacity-0{
  opacity: 0;
}
.opacity-100{
  opacity: 1;
}
.opacity-30{
  opacity: 0.3;
}
.opacity-40{
  opacity: 0.4;
}
.opacity-50{
  opacity: 0.5;
}
.opacity-55{
  opacity: 0.55;
}
.opacity-60{
  opacity: 0.6;
}
.opacity-65{
  opacity: 0.65;
}
.opacity-70{
  opacity: 0.7;
}
.opacity-75{
  opacity: 0.75;
}
.opacity-80{
  opacity: 0.8;
}
.opacity-85{
  opacity: 0.85;
}
.opacity-90{
  opacity: 0.9;
}
.mix-blend-multiply{
  mix-blend-mode: multiply;
}
.shadow-2xl{
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-card{
  --tw-shadow: 0 20px 50px -12px rgba(43, 36, 32, 0.18);
  --tw-shadow-colored: 0 20px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-soft{
  --tw-shadow: 0 8px 24px -6px rgba(43, 36, 32, 0.12);
  --tw-shadow-colored: 0 8px 24px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.blur{
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow{
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow-md{
  --tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.grayscale{
  --tw-grayscale: grayscale(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter{
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition-all{
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-opacity{
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform{
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-100{
  transition-duration: 100ms;
}
.duration-200{
  transition-duration: 200ms;
}
.duration-300{
  transition-duration: 300ms;
}
.duration-500{
  transition-duration: 500ms;
}
.duration-700{
  transition-duration: 700ms;
}
.ease-in-out{
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out{
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.\[overflow-wrap\:anywhere\]{
  overflow-wrap: anywhere;
}

:root {
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  /* Schrift-Theme "klassisch" (Standard).
     Achtung Quoting: NICHT '"Bodoni Moda"' schreiben — dann sucht der
     Browser eine Schrift, deren Name wörtlich Anführungszeichen enthält,
     findet nichts und fällt still auf den nächsten Kandidaten zurück
     (deshalb hatten die Schrift-Themes nie einen sichtbaren Effekt). */
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Hanken Grotesk", "Segoe UI", sans-serif;
  /* Dritte Schriftrolle, absichtlich nur für Namen und Monogramm. Sie ist
     standardmäßig mit der Titelschrift identisch, weicht also nur dort ab, wo
     ein Thema sie ausdrücklich setzt (bisher: "kalligrafie"). */
  --font-script: var(--font-display);
}

/* ── Dunkle Marketing-Welt (seit 2026-08-13 der Auftritt der öffentlichen
   Seiten). Hängt am Seiten-Wrapper der jeweiligen Seite, NICHT an :root —
   Gästeseiten (data-style-theme) und Dashboard bleiben unberührt und leben
   weiter auf den hellen Papeterie-Fallbacks bzw. ihren eigenen Themes.
   Weiße Artefakte (Karten, Prints) behalten ihre Tinte über --color-paper
   und explizite Farben. */
[data-site-theme="dunkel"] {
  --color-background: #221D19;
  --color-ink: #FBF7F2;
  --color-ink-soft: #BFB2A3;   /* warm gedimmtes Creme, >=4.5:1 auf #221D19 */
  --color-surface: #2C2620;
  --color-line: #463E35;
  --color-canvas: #1C1815;
  /* Terrakotta eine Stufe heller, damit Links/Akzente auf Dunkel lesbar sind */
  --color-accent: #CE6E67;
  --color-accent-deep: #B8433E;
}

/* Weiße Artefakt-Karten AUF der dunklen Welt (Login-Karte, Ratgeber-Karten):
   innen gilt wieder die helle Papeterie-Palette, sonst stünde Creme-Schrift
   auf weißem Grund. */
[data-site-theme="dunkel"] [data-artifact="hell"] {
  --color-background: #FBF7F2;
  --color-ink: #2B2420;
  --color-ink-soft: #6B5F52;
  --color-surface: #F1EBE0;
  --color-line: #E3DACD;
  --color-accent: #B8433E;
  --color-accent-deep: #8A322D;
  color: var(--color-ink);
}

/* Schrift-Themes: werden per data-font-theme auf der Gästeseite gesetzt,
   damit Paare zwischen mehreren Schrift-Paarungen wählen können, ohne
   dass sich an Layout/Klassen irgendwas ändern muss. */

/* WICHTIG: --font-script muss auf derselben Ebene neu abgeleitet werden wie
   --font-display. Die Themes hängen am Seiten-Wrapper, nicht an :root — eine
   Ableitung nur in :root würde dort noch die Standard-Titelschrift einsetzen
   und die Schreibschrift-Rolle bei allen anderen Themes falsch belegen.
   Diese Regel steht bewusst VOR den einzelnen Themes: gleiche Spezifität,
   also entscheidet die Reihenfolge. */
[data-font-theme] {
  --font-script: var(--font-display);
}

[data-font-theme="romantisch"] {
  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Lora", Georgia, serif;
}
[data-font-theme="modern"] {
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Manrope", "Segoe UI", sans-serif;
}
/* Schreibschrift-Paarung: Parisienne ausschließlich für Namen und Monogramm,
   Überschriften und Fließtext bleiben ruhig und gut lesbar. */
[data-font-theme="kalligrafie"] {
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Hanken Grotesk", "Segoe UI", sans-serif;
  --font-script: "Parisienne", "Cormorant Garamond", cursive;
}
/* Römische Versalien, wie in Stein gehauen — passt zu Kirche und Schloss. */
[data-font-theme="versalien"] {
  --font-display: "Cinzel", Georgia, serif;
  --font-body: "Lora", Georgia, serif;
}
/* Hoher Strichstärken-Kontrast, Modemagazin-Anmutung. */
[data-font-theme="hochkontrast"] {
  --font-display: "Bodoni Moda", Georgia, serif;
  --font-body: "Manrope", "Segoe UI", sans-serif;
}
/* Geometrische Grotesk in einer Schrift für alles, sehr reduziert. */
[data-font-theme="geometrisch"] {
  --font-display: "Jost", "Segoe UI", sans-serif;
  --font-body: "Jost", "Segoe UI", sans-serif;
}

/* Namen und Monogramm. Eine Schreibschrift hat eine deutlich kleinere
   x-Höhe als eine Antiqua und wirkt bei gleicher Punktgröße zu klein;
   gleichzeitig brauchen ihre Ober- und Unterlängen mehr Zeilenhöhe, sonst
   schneidet der Zeilenkasten sie ab (Cormorant hat das Problem nicht). */
.namen-schrift,
.monogramm-schrift {
  font-family: var(--font-script);
}
[data-font-theme="kalligrafie"] .namen-schrift {
  font-size: 3rem;
  line-height: 1.3;
  padding-bottom: 0.12em;
}
[data-font-theme="kalligrafie"] .monogramm-schrift {
  font-size: 2.6rem;
  line-height: 1.3;
}
@media (min-width: 768px) {
  [data-font-theme="kalligrafie"] .namen-schrift { font-size: 4.2rem; }
}

/* ── Titelbild-Stimmung ───────────────────────────────────────────────────
   Lässt jedes Hochzeitsfoto zu jeder Farbwelt passen, ohne dass das Paar ein
   Bildbearbeitungsprogramm braucht. "duotone" färbt die Helligkeitswerte des
   Fotos in die Akzentfarbe um: mix-blend-mode "color" übernimmt Farbton und
   Sättigung von der Auflage und die Helligkeit vom Foto darunter. Die
   Auflage braucht ein eigenes isolate, sonst mischt sie sich auch mit dem
   Seitenhintergrund. */
.stimmung--schwarzweiss img { filter: grayscale(1) contrast(1.06); }
.stimmung--warm img { filter: sepia(0.32) saturate(1.15) contrast(1.02); }
.stimmung--duotone { position: relative; isolation: isolate; }
.stimmung--duotone img { filter: grayscale(1) contrast(1.12); }
.stimmung--duotone::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--stimmung-farbe, #B8433E);
  mix-blend-mode: color;
  opacity: 0.9;
}

/* Stil-Themes: färben die Gästeseite komplett um (nur dort, via
   data-style-theme auf dem Seiten-Wrapper — Landingpage/Dashboard bleiben
   unberührt, da sie das Attribut nie setzen). "papeterie" ist der
   Standard und braucht keinen Eintrag, weil er den :root-Werten entspricht. */
[data-style-theme="modern"] {
  --color-background: #F4F2EE;
  --color-ink: #1F1B16;
  --color-ink-soft: #6E655C;
  --color-gold: #8C8375;
  --color-gold-soft: #C9C2B4;
  --color-surface: #EAE6DF;
  --color-line: #DAD5CB;
}
[data-style-theme="modern"] .corner { display: none; }
[data-style-theme="modern"] .card-frame { border: none; border-top: 2px solid var(--color-ink); border-bottom: 2px solid var(--color-ink); border-radius: 0; }
[data-style-theme="modern"] .card-frame::after { display: none; }
[data-style-theme="modern"] .insert-card { background: transparent; border: none; border-top: 1px solid var(--color-line); border-radius: 0; }
[data-style-theme="modern"] .insert-card::after { display: none; }
[data-style-theme="modern"] .ornament::before,
[data-style-theme="modern"] .ornament::after { background: var(--color-ink); opacity: 0.25; }

[data-style-theme="boho"] {
  --color-background: #F7EFDD;
  --color-ink: #3E3226;
  --color-ink-soft: #8A7860;
  --color-gold: #B26A45;
  --color-gold-soft: #E3C9A0;
  --color-surface: #EFE1C4;
  --color-line: #E4D2A8;
}
[data-style-theme="boho"] .corner { display: none; }
[data-style-theme="boho"] .card-frame { border-radius: 2.5rem; border-color: rgba(178, 106, 69, 0.35); }
[data-style-theme="boho"] .card-frame::after { border-radius: 2.2rem; border-color: rgba(178, 106, 69, 0.18); }
[data-style-theme="boho"] .insert-card { border-radius: 1.75rem; background: var(--color-surface); border-color: rgba(178, 106, 69, 0.3); }
[data-style-theme="boho"] .insert-card::after { border-radius: 1.5rem; border-color: rgba(178, 106, 69, 0.15); }

/* ── Design-Presets: weitere Farbwelten ──
   Paletten OHNE Struktur-Override erben automatisch die Papeterie-Struktur
   (Kartenrahmen + Ecken), weil Struktur-Regeln nur für die modern-*/boho-*
   Themes existieren. Die Preset-Auswahl im Dashboard setzt style_theme und
   eine passende Akzentfarbe in einem Klick. */

/* Papeterie-Struktur: Salbei */
[data-style-theme="sage"] {
  --color-background: #F4F6EF;
  --color-ink: #2A2F26;
  --color-ink-soft: #6C7263;
  --color-gold: #97A97C;
  --color-gold-soft: #C9D4B4;
  --color-surface: #EAEEE1;
  --color-line: #DCE3D0;
}

/* Papeterie-Struktur: Puderrosa */
[data-style-theme="blush"] {
  --color-background: #FBF3F1;
  --color-ink: #382A28;
  --color-ink-soft: #8A6F6B;
  --color-gold: #C99287;
  --color-gold-soft: #E8C7C0;
  --color-surface: #F4E7E4;
  --color-line: #EBD8D4;
}

/* Papeterie-Struktur: Marine */
[data-style-theme="navy"] {
  --color-background: #F3F5F8;
  --color-ink: #1E2A3A;
  --color-ink-soft: #5E6B7E;
  --color-gold: #B99B5E;
  --color-gold-soft: #DECCA4;
  --color-surface: #E9EDF3;
  --color-line: #D9E0EA;
}

/* Papeterie-Struktur: Bordeaux */
[data-style-theme="bordeaux"] {
  --color-background: #FAF4F0;
  --color-ink: #3A2226;
  --color-ink-soft: #7D5E63;
  --color-gold: #B08954;
  --color-gold-soft: #DCC49C;
  --color-surface: #F2E8E2;
  --color-line: #E7D8CE;
}

/* Modern-Struktur: Nachtblau */
[data-style-theme="modern-nacht"] {
  --color-background: #EEF0F2;
  --color-ink: #171C24;
  --color-ink-soft: #5F6772;
  --color-gold: #7A8494;
  --color-gold-soft: #C2C9D2;
  --color-surface: #E3E6EA;
  --color-line: #D3D8DE;
}

/* Modern-Struktur: Olive */
[data-style-theme="modern-olive"] {
  --color-background: #F2F1EA;
  --color-ink: #23241B;
  --color-ink-soft: #6B6C5B;
  --color-gold: #8B8C6C;
  --color-gold-soft: #C9CAB0;
  --color-surface: #E8E7DC;
  --color-line: #D8D8C8;
}

/* Boho-Struktur: Terracotta */
[data-style-theme="boho-terra"] {
  --color-background: #F8EFE6;
  --color-ink: #40302A;
  --color-ink-soft: #8D7263;
  --color-gold: #C07A52;
  --color-gold-soft: #E6C3A8;
  --color-surface: #F0E2D2;
  --color-line: #E5D2BC;
}

/* Boho-Struktur: Lavendel */
[data-style-theme="boho-lavendel"] {
  --color-background: #F5F1F7;
  --color-ink: #322B3A;
  --color-ink-soft: #776E85;
  --color-gold: #9C86B4;
  --color-gold-soft: #D4C8E2;
  --color-surface: #ECE5F0;
  --color-line: #DFD5E7;
}

/* Papeterie-Struktur: Eisblau */
[data-style-theme="eisblau"] {
  --color-background: #F1F5F8;
  --color-ink: #223240;
  --color-ink-soft: #62727E;
  --color-gold: #7FA0B0;
  --color-gold-soft: #C3D6DE;
  --color-surface: #E6EDF1;
  --color-line: #D6E1E7;
}

/* Papeterie-Struktur: Champagner */
[data-style-theme="champagner"] {
  --color-background: #FAF6ED;
  --color-ink: #3A331F;
  --color-ink-soft: #857A5E;
  --color-gold: #C6A76B;
  --color-gold-soft: #E8D9B8;
  --color-surface: #F2EBD9;
  --color-line: #E8DCC0;
}

/* Papeterie-Struktur: Waldgrün */
[data-style-theme="waldgruen"] {
  --color-background: #F1F4EE;
  --color-ink: #1E2A1C;
  --color-ink-soft: #5A6B54;
  --color-gold: #6E8A5C;
  --color-gold-soft: #BBCBAE;
  --color-surface: #E5EBDF;
  --color-line: #D6E0CC;
}

/* Papeterie-Struktur: Altrosa */
[data-style-theme="altrosa"] {
  --color-background: #FAF1EE;
  --color-ink: #3D2B27;
  --color-ink-soft: #8A6E67;
  --color-gold: #C79C8F;
  --color-gold-soft: #E6CFC6;
  --color-surface: #F2E4DF;
  --color-line: #E8D3CB;
}

/* Papeterie-Struktur: Anthrazit */
[data-style-theme="anthrazit"] {
  --color-background: #F2F1EF;
  --color-ink: #1C1C1C;
  --color-ink-soft: #656260;
  --color-gold: #8D897F;
  --color-gold-soft: #C9C5BB;
  --color-surface: #E7E5E1;
  --color-line: #D8D5CF;
}

/* Modern-Struktur: Terrakotta */
[data-style-theme="modern-terrakotta"] {
  --color-background: #F5EFE9;
  --color-ink: #2E2118;
  --color-ink-soft: #7A6455;
  --color-gold: #B3714B;
  --color-gold-soft: #DDB99E;
  --color-surface: #EBE1D6;
  --color-line: #DDCEBD;
}

/* Modern-Struktur: Beere */
[data-style-theme="modern-beere"] {
  --color-background: #F4EEF0;
  --color-ink: #2C1620;
  --color-ink-soft: #7A5A63;
  --color-gold: #8F4A5E;
  --color-gold-soft: #D3AEB8;
  --color-surface: #EAE0E2;
  --color-line: #DCCBCF;
}

/* Modern-Struktur: Salbei */
[data-style-theme="modern-salbei"] {
  --color-background: #F1F3ED;
  --color-ink: #232A1E;
  --color-ink-soft: #667059;
  --color-gold: #85916D;
  --color-gold-soft: #C7D0B7;
  --color-surface: #E6E9DE;
  --color-line: #D6DCC7;
}

/* Modern-Struktur: Schiefer */
[data-style-theme="modern-schiefer"] {
  --color-background: #EFF1F3;
  --color-ink: #1D2429;
  --color-ink-soft: #5C6870;
  --color-gold: #7C8E99;
  --color-gold-soft: #C0CDD3;
  --color-surface: #E2E6E9;
  --color-line: #D1D8DC;
}

/* Boho-Struktur: Rost */
[data-style-theme="boho-rost"] {
  --color-background: #F8EEE3;
  --color-ink: #3E271A;
  --color-ink-soft: #8F6C52;
  --color-gold: #C1602E;
  --color-gold-soft: #E9BC9C;
  --color-surface: #F0DFCB;
  --color-line: #E6CDAF;
}

/* Boho-Struktur: Oliv */
[data-style-theme="boho-oliv"] {
  --color-background: #F5F2E2;
  --color-ink: #33321A;
  --color-ink-soft: #82805A;
  --color-gold: #9C9A50;
  --color-gold-soft: #DBDAAA;
  --color-surface: #EDE9CE;
  --color-line: #E0DCAF;
}

/* Boho-Struktur: Beere */
[data-style-theme="boho-beere"] {
  --color-background: #F8EEEE;
  --color-ink: #3D2229;
  --color-ink-soft: #8C6B71;
  --color-gold: #B96A7A;
  --color-gold-soft: #E5C1C8;
  --color-surface: #F0DFE1;
  --color-line: #E6C9CD;
}

/* Boho-Struktur: Himmelblau */
[data-style-theme="boho-himmelblau"] {
  --color-background: #EFF4F5;
  --color-ink: #1F343A;
  --color-ink-soft: #5F7C82;
  --color-gold: #6FA3AC;
  --color-gold-soft: #BFDBDF;
  --color-surface: #E1EBED;
  --color-line: #CFE0E2;
}

/* Struktur-Regeln der Modern-Familie auch für die neuen Modern-Paletten */
[data-style-theme="modern-nacht"] .corner,
[data-style-theme="modern-olive"] .corner,
[data-style-theme="modern-terrakotta"] .corner,
[data-style-theme="modern-beere"] .corner,
[data-style-theme="modern-salbei"] .corner,
[data-style-theme="modern-schiefer"] .corner { display: none; }
[data-style-theme="modern-nacht"] .card-frame,
[data-style-theme="modern-olive"] .card-frame,
[data-style-theme="modern-terrakotta"] .card-frame,
[data-style-theme="modern-beere"] .card-frame,
[data-style-theme="modern-salbei"] .card-frame,
[data-style-theme="modern-schiefer"] .card-frame { border: none; border-top: 2px solid var(--color-ink); border-bottom: 2px solid var(--color-ink); border-radius: 0; }
[data-style-theme="modern-nacht"] .card-frame::after,
[data-style-theme="modern-olive"] .card-frame::after,
[data-style-theme="modern-terrakotta"] .card-frame::after,
[data-style-theme="modern-beere"] .card-frame::after,
[data-style-theme="modern-salbei"] .card-frame::after,
[data-style-theme="modern-schiefer"] .card-frame::after { display: none; }
[data-style-theme="modern-nacht"] .insert-card,
[data-style-theme="modern-olive"] .insert-card,
[data-style-theme="modern-terrakotta"] .insert-card,
[data-style-theme="modern-beere"] .insert-card,
[data-style-theme="modern-salbei"] .insert-card,
[data-style-theme="modern-schiefer"] .insert-card { background: transparent; border: none; border-top: 1px solid var(--color-line); border-radius: 0; }
[data-style-theme="modern-nacht"] .insert-card::after,
[data-style-theme="modern-olive"] .insert-card::after,
[data-style-theme="modern-terrakotta"] .insert-card::after,
[data-style-theme="modern-beere"] .insert-card::after,
[data-style-theme="modern-salbei"] .insert-card::after,
[data-style-theme="modern-schiefer"] .insert-card::after { display: none; }
[data-style-theme="modern-nacht"] .ornament::before,
[data-style-theme="modern-nacht"] .ornament::after,
[data-style-theme="modern-olive"] .ornament::before,
[data-style-theme="modern-olive"] .ornament::after,
[data-style-theme="modern-terrakotta"] .ornament::before,
[data-style-theme="modern-terrakotta"] .ornament::after,
[data-style-theme="modern-beere"] .ornament::before,
[data-style-theme="modern-beere"] .ornament::after,
[data-style-theme="modern-salbei"] .ornament::before,
[data-style-theme="modern-salbei"] .ornament::after,
[data-style-theme="modern-schiefer"] .ornament::before,
[data-style-theme="modern-schiefer"] .ornament::after { background: var(--color-ink); opacity: 0.25; }

/* Struktur-Regeln der Boho-Familie auch für die neuen Boho-Paletten */
[data-style-theme="boho-terra"] .corner,
[data-style-theme="boho-lavendel"] .corner,
[data-style-theme="boho-rost"] .corner,
[data-style-theme="boho-oliv"] .corner,
[data-style-theme="boho-beere"] .corner,
[data-style-theme="boho-himmelblau"] .corner { display: none; }
[data-style-theme="boho-terra"] .card-frame,
[data-style-theme="boho-lavendel"] .card-frame,
[data-style-theme="boho-rost"] .card-frame,
[data-style-theme="boho-oliv"] .card-frame,
[data-style-theme="boho-beere"] .card-frame,
[data-style-theme="boho-himmelblau"] .card-frame { border-radius: 2.5rem; border-color: color-mix(in srgb, var(--color-gold) 45%, transparent); }
[data-style-theme="boho-terra"] .card-frame::after,
[data-style-theme="boho-lavendel"] .card-frame::after,
[data-style-theme="boho-rost"] .card-frame::after,
[data-style-theme="boho-oliv"] .card-frame::after,
[data-style-theme="boho-beere"] .card-frame::after,
[data-style-theme="boho-himmelblau"] .card-frame::after { border-radius: 2.2rem; border-color: color-mix(in srgb, var(--color-gold) 22%, transparent); }
[data-style-theme="boho-terra"] .insert-card,
[data-style-theme="boho-lavendel"] .insert-card,
[data-style-theme="boho-rost"] .insert-card,
[data-style-theme="boho-oliv"] .insert-card,
[data-style-theme="boho-beere"] .insert-card,
[data-style-theme="boho-himmelblau"] .insert-card { border-radius: 1.75rem; background: var(--color-surface); border-color: color-mix(in srgb, var(--color-gold) 38%, transparent); }
[data-style-theme="boho-terra"] .insert-card::after,
[data-style-theme="boho-lavendel"] .insert-card::after,
[data-style-theme="boho-rost"] .insert-card::after,
[data-style-theme="boho-oliv"] .insert-card::after,
[data-style-theme="boho-beere"] .insert-card::after,
[data-style-theme="boho-himmelblau"] .insert-card::after { border-radius: 1.5rem; border-color: color-mix(in srgb, var(--color-gold) 18%, transparent); }

/* ───────────────────────────────────────────────────────────────
   Editorial-Familie — vierte Struktur neben Papeterie/Modern/Boho.
   Komplett rahmenlos: kein Kartenrahmen, keine Ecken, Einlege-Karten
   nur durch Fläche statt Linie abgesetzt. Wirkt wie eine Magazinseite
   und ist damit klar von den drei bestehenden Familien unterscheidbar.
   ─────────────────────────────────────────────────────────────── */
[data-style-theme="editorial-creme"] {
  --color-background: #FAF8F4;
  --color-ink: #14110D;
  --color-ink-soft: #6C645A;
  --color-gold: #A8987E;
  --color-gold-soft: #DDD4C3;
  --color-surface: #F0ECE4;
  --color-line: #E0D9CD;
  --color-paper: #FFFFFF;
}
[data-style-theme="editorial-sand"] {
  --color-background: #F6F1E9;
  --color-ink: #241E16;
  --color-ink-soft: #756A5B;
  --color-gold: #B09468;
  --color-gold-soft: #DFCEAF;
  --color-surface: #EDE5D8;
  --color-line: #DFD3BF;
  --color-paper: #FFFDF8;
}
[data-style-theme="editorial-graphit"] {
  --color-background: #F0F0EF;
  --color-ink: #16181A;
  --color-ink-soft: #61666B;
  --color-gold: #8A9196;
  --color-gold-soft: #C6CBCF;
  --color-surface: #E4E5E5;
  --color-line: #D3D5D6;
  --color-paper: #FFFFFF;
}

/* ── Dunkle Farbwelten. Bisher waren alle Paletten hell; ein dunkler
      Grund ist der deutlichste sichtbare Unterschied, den wir anbieten
      können. --color-paper wird mitgedreht, sonst leuchtet das
      Passepartout hinterm Titelbild weiß aus der Seite heraus. ── */
[data-style-theme="editorial-nacht"] {
  --color-background: #16151A;
  --color-ink: #F2EFE9;
  --color-ink-soft: #A29C93;
  --color-gold: #C9A25E;
  --color-gold-soft: #7A6740;
  --color-surface: #211F26;
  --color-line: #322F38;
  --color-paper: #211F26;
}
[data-style-theme="editorial-wald"] {
  --color-background: #131A16;
  --color-ink: #EDF1EC;
  --color-ink-soft: #9AA79B;
  --color-gold: #8FA97E;
  --color-gold-soft: #4E6045;
  --color-surface: #1C251F;
  --color-line: #2B372E;
  --color-paper: #1C251F;
}
[data-style-theme="editorial-bordeaux"] {
  --color-background: #1B1214;
  --color-ink: #F4EBEC;
  --color-ink-soft: #AC9A9D;
  --color-gold: #C08B93;
  --color-gold-soft: #6A464C;
  --color-surface: #261A1D;
  --color-line: #38272B;
  --color-paper: #261A1D;
}

/* Struktur-Regeln der Editorial-Familie (inkl. der dunklen Paletten) */
[data-style-theme^="editorial-"] .corner { display: none; }
[data-style-theme^="editorial-"] .card-frame { border: none; border-radius: 0; background: transparent; }
[data-style-theme^="editorial-"] .card-frame::after { display: none; }
[data-style-theme^="editorial-"] .insert-card { background: var(--color-surface); border: none; border-radius: 0; }
[data-style-theme^="editorial-"] .insert-card::after { display: none; }
[data-style-theme^="editorial-"] .ornament::before,
[data-style-theme^="editorial-"] .ornament::after { background: var(--color-ink); opacity: 0.18; }

body {
  background-color: #FBF7F2;
  color: #2B2420;
}

/* Desktop-Atmosphäre hinter der breiteren Gästeseiten-Karte (ab lg) —
   ohne das würde der zusätzliche Raum links/rechts wie leere Fläche
   wirken statt wie bewusster Frei-Raum. Nur Hintergrund, kein Layout. */
.atmo-wedding {
  background-image:
    radial-gradient(circle at 18% 20%, rgba(201, 162, 94, 0.16), transparent 42%),
    radial-gradient(circle at 82% 78%, rgba(184, 67, 62, 0.11), transparent 42%);
}

/* Schmale Lesespalte für Text/Formular-Abschnitte innerhalb der ab lg
   breiteren Gästeseiten-Karte (Location/Galerie/Hotels dürfen dagegen
   die volle Kartenbreite als Mehrspalten-Grid nutzen). */
.prose-col {
  max-width: 36rem; /* entspricht max-w-xl, bisherige Kartenbreite */
  margin-left: auto;
  margin-right: auto;
}

/* ── Feinkörnige Papiertextur (dezent, überall verfügbar) ── */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  opacity: 0.045;
  /* Kein mix-blend-mode: fixed Overlay + Blending zwingt den Browser beim
     Scrollen zum ständigen Neu-Compositing der ganzen Seite — sichtbares
     Flackern auf Windows-GPUs. Bei 4,5 % Deckkraft auf hellem Grund ist
     multiply ohnehin nicht von normaler Transparenz unterscheidbar.
     translateZ(0) hebt das Overlay auf eine eigene Compositing-Ebene. */
  transform: translateZ(0);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Ornament-Trenner: — · — ── */
/* Die Zierlinien liefen früher als harte 28px-Balken in fest verdrahtetem
   Champagner-Gold aus. Fest verdrahtet hieß: auf Marine, Waldgrün oder den
   dunklen Farbwelten blieben sie goldgelb und passten nicht zur Palette.
   Jetzt folgen sie var(--color-gold) und laufen nach außen weich aus —
   das ist der Unterschied zwischen "Strich" und "gestochene Linie". */
.ornament::before,
.ornament::after {
  content: '';
  display: inline-block;
  width: 44px;
  height: 1px;
  vertical-align: middle;
}
.ornament::before {
  margin-right: 14px;
  background: linear-gradient(90deg, transparent, var(--color-gold, #C9A25E));
}
.ornament::after {
  margin-left: 14px;
  background: linear-gradient(90deg, var(--color-gold, #C9A25E), transparent);
}

/* ── Ecken-Rahmen (Einladungskarten-Motiv) ── */
.corner { position: absolute; width: 18px; height: 18px; border-color: var(--color-gold, #C9A25E); pointer-events: none; }

/* ── Folienprägung: metallischer Verlauf statt flacher Fläche. Nur für
      kleine Akzente (das kaufmännische Und im Monogramm) gedacht — auf
      Fließtext wäre der Verlauf unruhig und schlecht lesbar. ── */
.foil-text {
  background-image: linear-gradient(
    105deg,
    color-mix(in srgb, var(--color-gold, #C9A25E) 45%, #ffffff) 0%,
    var(--color-gold, #C9A25E) 30%,
    color-mix(in srgb, var(--color-gold, #C9A25E) 68%, #000000) 50%,
    var(--color-gold, #C9A25E) 70%,
    color-mix(in srgb, var(--color-gold, #C9A25E) 45%, #ffffff) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── Wachssiegel ── */
.wax-seal {
  background: radial-gradient(circle at 32% 28%, #C24A44, #7A2A25);
  box-shadow: 0 10px 24px -6px rgba(122, 42, 37, 0.55), inset 0 2px 4px rgba(255, 255, 255, 0.18);
}

/* ── Scroll-Reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Richtungs-Varianten: Zeitstrahl-Einträge kommen von ihrer Seite der
   Mittellinie. Unterhalb md gibt es die zwei Spalten nicht — dort fallen
   beide auf den normalen Aufstieg zurück. */
@media (min-width: 768px) {
  .reveal--links { transform: translateX(-36px); }
  .reveal--rechts { transform: translateX(36px); }
  .reveal--links.is-visible, .reveal--rechts.is-visible { transform: translateX(0); }
}
/* Fotos und Bildkarten setzen mit einem Hauch Drehung auf */
.reveal--foto { transform: translateY(20px) scale(0.96) rotate(0.6deg); }
.reveal--foto.is-visible { transform: translateY(0) scale(1) rotate(0); }

/* Gestaffelte Kinder: --rv zählt die Position im Raster. Die Verzögerung
   lebt NUR auf dem Weg in die Sichtbarkeit; rv-fertig (JS, nach der
   Entrance) setzt sie zurück, sonst hinge jeder spätere Hover-Übergang
   auf denselben Elementen um Sekunden nach. */
.reveal .rv-kind {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.reveal.is-visible .rv-kind {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(var(--rv, 0) * 60ms);
}
.reveal.rv-fertig .rv-kind { transition-delay: 0s; }

/* ═══════════════════════════════════════════════════════════════════════
   AUFTRITTE DER STARTSEITE (2026-08-17)
   ═══════════════════════════════════════════════════════════════════════
   Vorher trat auf der Startseite jedes Element gleich auf: `.reveal`, 0,9 s,
   28 px Aufstieg, von der ersten bis zur letzten Sektion. Ein identischer
   Auftritt überall ist der Fehler, den beide Design-Skills ausdrücklich
   benennen, und Nick hat ihn am 17.08. genau so gemeldet.

   Das Prinzip hier heißt Echo: der Auftritt macht nach, was sein Inhalt tut.
   Fotos werden HINGELEGT, also kommen sie von größer und drehen sich ein.
   Geräte kommen NÄHER, also von kleiner. Aussagen LANDEN, also mit
   Überschwingen. Eine Zeitachse wird GEZOGEN, also zeichnen sich Linien.
   Ein Siegel wird GEDRÜCKT, also fährt es gedreht und verkleinert herein.

   Feste Regeln für jeden Auftritt hier, auch für später erfundene:
   nur transform und opacity (bei einem einzigen Ausnahmefall clip-path,
   das ist compositor-fähig), Auslöser ist dieselbe .is-visible-Klasse des
   bestehenden Beobachters, und jeder steht unten im
   prefers-reduced-motion-Block. */

:root {
  --ease-aus: cubic-bezier(0.16, 1, 0.3, 1);      /* selbstbewusste Ankunft */
  --ease-ueber: cubic-bezier(0.34, 1.56, 0.64, 1); /* Überschwingen, sparsam */
}

/* (a) Schreiben: kommt von links und richtet sich auf. Für Schrittfolgen und
   alles, was in Leserichtung entsteht. */
.ein-schrift { opacity: 0; transform: translateX(-30px) rotate(-0.7deg); transition: opacity .6s var(--ease-aus), transform .6s var(--ease-aus); }
.ein-schrift.is-visible { opacity: 1; transform: translateX(0) rotate(0); }

/* (b) Hinlegen: von GRÖSSER auf 1, mit einer Drehung, die sich einlegt. Ein
   Print wird auf den Tisch gelegt, er kommt nicht auf den Betrachter zu. */
.ein-legen { opacity: 0; transform: scale(1.07) rotate(-1.6deg); transition: opacity .6s var(--ease-aus), transform .68s var(--ease-aus); }
.ein-legen.is-visible { opacity: 1; transform: scale(1) rotate(0); }

/* (c) Aus der Tiefe: von kleiner auf 1. Für Geräte und alles, was näher kommt. */
.ein-tiefe { opacity: 0; transform: scale(0.86) translateY(14px); transition: opacity .62s var(--ease-aus), transform .72s var(--ease-aus); }
.ein-tiefe.is-visible { opacity: 1; transform: scale(1) translateY(0); }

/* (d) Landen: kurzes Überschwingen. Nur für einzelne große Wörter, sonst
   wird die Seite zappelig. */
.ein-schlag { opacity: 0; transform: scale(1.16); transition: opacity .45s var(--ease-aus), transform .7s var(--ease-ueber); }
.ein-schlag.is-visible { opacity: 1; transform: scale(1); }
/* Auf schmalen Schirmen kleiner überschwingen: gemessen ergab scale(1.16) bei
   einem 342 px breiten Wort 397 px auf einem 390-px-Schirm, die Wörter wurden
   also während der Landung an den Rändern beschnitten. */
@media (max-width: 640px) {
  .ein-schlag { transform: scale(1.06); }
}

/* (e) Vorhang: ein Wisch von links gibt den Text frei. Für Zitate, weil es
   nachmacht, wie jemand zu sprechen anfängt. clip-path statt blur, weil
   blur nicht compositor-fähig ist. */
.ein-vorhang { clip-path: inset(0 100% 0 0); transition: clip-path .85s var(--ease-aus); }
.ein-vorhang.is-visible { clip-path: inset(0 0 0 0); }

/* (f) Spur: Zeitachsen-Zeilen kommen nacheinander von links. Die Jahreszahl
   ist einen Takt vor ihrem Satz da, damit man erst die Zeit liest. */
.ein-spur { opacity: 0; transform: translateX(-22px); transition: opacity .5s var(--ease-aus), transform .5s var(--ease-aus); }
.ein-spur.is-visible { opacity: 1; transform: translateX(0); }
.ein-spur .spur-jahr { opacity: 0; transition: opacity .5s var(--ease-aus); }
.ein-spur.is-visible .spur-jahr { opacity: 1; }
.ein-spur .spur-satz { opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease-aus) .18s, transform .6s var(--ease-aus) .18s; }
.ein-spur.is-visible .spur-satz { opacity: 1; transform: translateY(0); }

/* (g) Linie: eine Haarlinie zeichnet sich von links nach rechts. Ersetzt
   border-top, weil ein Rahmen sich nicht zeichnen kann. */
.ein-linie { transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease-aus); }
.ein-linie.is-visible { transform: scaleX(1); }

/* (h) Siegel: fährt gedreht und klein herein und setzt sich mit
   Überschwingen auf. Endlage minus 5 Grad, wie von Hand gedrückt. */
.ein-siegel { opacity: 0; transform: scale(0.42) rotate(-22deg); transition: opacity .4s var(--ease-aus), transform .8s var(--ease-ueber); }
.ein-siegel.is-visible { opacity: 1; transform: scale(1) rotate(-5deg); }

/* (i) Weite: die Kamera fährt zurück. Ein sehr langsames Auszoomen eines
   Hintergrundbildes, nur im Abschluss. */
.ein-weite { transform: scale(1.1); transition: transform 2.4s var(--ease-aus); }
.ein-weite.is-visible { transform: scale(1); }

/* Gestaffelte Kinder für alle Auftritte oben: --i zählt die Position. Die
   Verzögerung lebt nur auf dem Weg herein; danach setzt sie .rv-fertig
   zurück, sonst hängt jeder späte Hover um Sekunden nach. */
.ein-schrift.is-visible, .ein-legen.is-visible, .ein-tiefe.is-visible,
.ein-schlag.is-visible, .ein-spur.is-visible, .ein-linie.is-visible {
  transition-delay: calc(var(--i, 0) * 65ms);
}
.rv-fertig.ein-schrift, .rv-fertig.ein-legen, .rv-fertig.ein-tiefe,
.rv-fertig.ein-schlag, .rv-fertig.ein-spur, .rv-fertig.ein-linie { transition-delay: 0s; }

/* ── Sektions-Band: jede zweite Sektion der Gästeseite liegt auf dem
   tieferen Canvas-Ton ihrer Farbwelt — teilt die Seite sichtbar in
   Kapitel, ohne einer der hellen oder dunklen Paletten zu widersprechen. */
.sektion-band {
  /* Nur Farben aus der gewählten Farbwelt des Paars (Nicks Regel:
     das Design muss überall gleich sein): der Papier-Ton der Welt,
     sanft mit ihrem Hintergrund gemischt. Keine Fremdfarben. */
  background: color-mix(in srgb, var(--color-paper, #FFFFFF) 65%, var(--color-background, #FBF7F2));
  border-radius: 1.5rem;
  padding: 2.5rem 1rem 2.75rem;
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}
@media (min-width: 768px) {
  .sektion-band { padding: 3rem 2rem 3.25rem; margin-left: -1rem; margin-right: -1rem; }
}
/* Der Sektions-Inhalt bringt sein eigenes mt-12 mit — im Band übernimmt
   das Padding diese Rolle, sonst stapeln sich die Abstände. */
.sektion-band > div { margin-top: 0 !important; }

/* Selbstzeichnende Zeitstrahl-Linie: wächst von oben, sobald der
   Programm-Abschnitt sichtbar wird. */
.rv-linie { transform: scaleY(0); transform-origin: top; transition: transform 1.4s var(--ease) 0.15s; }
.reveal.is-visible .rv-linie { transform: scaleY(1); }

/* ── Atmosphärische Verläufe: sanfte Tiefe statt flacher Flächen.
   Als background-image (nicht background-Shorthand!), damit die
   background-color der Section darunter erhalten bleibt.
   Farbwelt „Salbei & Eukalyptus": Salbeigrün + Gold + ein Hauch Terrakotta. ── */
.atmo-hero {
  background-image:
    radial-gradient(55% 45% at 88% 8%, rgba(201, 162, 94, 0.16), transparent 70%),
    radial-gradient(50% 55% at 4% 30%, rgba(138, 155, 126, 0.16), transparent 70%),
    radial-gradient(45% 50% at 60% 100%, rgba(184, 67, 62, 0.06), transparent 70%);
}
.atmo-steps {
  background-image:
    radial-gradient(60% 60% at 50% 0%, rgba(255, 255, 255, 0.5), transparent 70%),
    radial-gradient(40% 50% at 92% 90%, rgba(138, 155, 126, 0.14), transparent 70%);
}
.atmo-showcase {
  background-image:
    radial-gradient(50% 55% at 100% 0%, rgba(201, 162, 94, 0.14), transparent 70%),
    radial-gradient(45% 50% at 0% 100%, rgba(138, 155, 126, 0.18), transparent 70%);
}
.atmo-preis {
  background-image:
    radial-gradient(45% 60% at 50% 40%, rgba(201, 162, 94, 0.16), transparent 70%),
    radial-gradient(35% 45% at 8% 8%, rgba(138, 155, 126, 0.12), transparent 70%),
    radial-gradient(35% 45% at 94% 90%, rgba(138, 155, 126, 0.12), transparent 70%);
}

/* ── Sprig: feines botanisches Linien-Ornament — Eukalyptus-grün ── */
.sprig { color: #8A9B7E; pointer-events: none; }

/* ── Heller Scrollbalken passend zur Salbei/Creme-Palette ── */
html {
  scrollbar-color: #C2CEB7 #F5F0E8; /* Firefox: Daumen / Schiene */
  scrollbar-width: thin;
}
::-webkit-scrollbar { width: 13px; }
::-webkit-scrollbar-track { background: #F5F0E8; }
::-webkit-scrollbar-thumb {
  background: #C2CEB7;
  border-radius: 10px;
  border: 3px solid #F5F0E8;
}
::-webkit-scrollbar-thumb:hover { background: #8A9B7E; }

/* Auf den dunklen Marketing-Seiten läuft sonst eine helle Creme-Schiene
   den Salon hinunter. Die Scrollbar hängt am html-Element, das Theme am
   Seiten-Wrapper — deshalb über :has() re-scopen. */
html:has([data-site-theme="dunkel"]) {
  scrollbar-color: #5C5148 #1C1815;
}
html:has([data-site-theme="dunkel"])::-webkit-scrollbar-track { background: #1C1815; }
html:has([data-site-theme="dunkel"])::-webkit-scrollbar-thumb {
  background: #5C5148;
  border-color: #1C1815;
}
html:has([data-site-theme="dunkel"])::-webkit-scrollbar-thumb:hover { background: #74675C; }

/* Textauswahl und Eingabe-Caret gehören zur Welt: Messing auf Tinte liest
   sich auf hellen wie dunklen Gründen. */
::-moz-selection { background: #C9A25E; color: #2B2420; }
::selection { background: #C9A25E; color: #2B2420; }
input, textarea { caret-color: #C9A25E; }

/* ── Sprungleiste der Gästeseite ──────────────────────────────────────────
   Die Linkliste wird auf schmalen Geräten waagerecht scrollbar. Eine
   sichtbare Bildlaufleiste unter den Punkten wäre dort ein Fremdkörper,
   gewischt wird trotzdem. */
.sprung-scroll {
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Weiches Auslaufen am rechten Rand statt harter Kante: Ohne das wurde
     ein Punkt mitten im Wort gekappt ("FA" von "FAQ") und die Leiste sah
     abgeschnitten statt wischbar aus. Auf dem Desktop endet der Inhalt vor
     der Kante, dort ist vom Verlauf nichts zu sehen. */
  -webkit-mask-image: linear-gradient(to right, black 0, black calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to right, black 0, black calc(100% - 28px), transparent 100%);
}
.sprung-scroll::-webkit-scrollbar { display: none; }

/* Sanftes Scrollen zu den Sprungzielen. Wer Bewegung reduziert haben möchte,
   bekommt den harten Sprung — sonst wandert die Seite minutenlang. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Ankreuzfelder in der Farbwelt statt im Browser-Blau. Auf der Gästeseite
   folgt die Farbe automatisch dem gewählten Stil, weil --color-accent dort
   je Farbwelt gesetzt wird; Dashboard und Anmeldung nutzen den Rückfallwert. */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--color-accent, #B8433E);
}

/* ── Formulare: einheitlicher, gehobener Look statt nackter border ──
   @layer components sorgt dafür, dass diese Klassen VOR den Tailwind-
   Utilities in der Cascade landen – sonst gewinnt z.B. .field-input
   gegen w-20/flex-1 bei gleicher Spezifität und Breiten brechen. ── */

/* ── Untergrund hinter der Karte ──────────────────────────────────────────
   Die Gästeseite ist als Karte gedacht, die auf einer Fläche liegt. Bisher
   hatten Karte UND Untergrund exakt dieselbe Farbe (beide bg-background) —
   die Karte war dadurch praktisch unsichtbar und alles wirkte flach. Bei den
   dunklen Farbwelten fiel das nicht auf, weil dort schon der Textkontrast
   Tiefe erzeugt; bei den hellen fehlte jede Staffelung.
   --color-canvas ist ein spürbar tieferer Ton derselben Palette. Er wird aus
   Hintergrund + Textfarbe gemischt, damit er automatisch zu jeder der
   Farbwelten passt, ohne 30 Werte von Hand zu pflegen. */
[data-style-theme] {
  --color-canvas: color-mix(in srgb, var(--color-background, #FBF7F2) 86%, var(--color-ink, #2B2420) 14%);
}
/* Dunkle Paletten brauchen die umgekehrte Richtung: dort muss der Untergrund
   dunkler als die Karte werden, nicht heller. */
[data-style-theme="editorial-nacht"] { --color-canvas: #0D0C10; }
[data-style-theme="editorial-wald"] { --color-canvas: #0B110D; }
[data-style-theme="editorial-bordeaux"] { --color-canvas: #120B0D; }

/* ── Papeterie (Gästeseite): feiner Doppelrahmen wie bei gedruckten Karten ──
   Rahmenfarben folgen jetzt der gewählten Farbwelt (vorher fest
   rgba(201,162,94) = Champagner-Gold, unabhängig vom Theme — auf Marine,
   Waldgrün oder den dunklen Paletten wirkte das zusammengewürfelt).
   Der weit gestreute Schatten lässt die Karte auf dem Untergrund liegen,
   statt flach aufgedruckt zu wirken. */
.card-frame {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--color-gold, #C9A25E) 50%, transparent);
  box-shadow:
    0 40px 90px -50px rgba(0, 0, 0, 0.5),
    0 8px 24px -18px rgba(0, 0, 0, 0.25);
}
.card-frame::after {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid color-mix(in srgb, var(--color-gold, #C9A25E) 22%, transparent);
  pointer-events: none;
}

/* Karten-Einschub (RSVP, Locations): Karte mit Haarlinie. Hintergrund über
   --color-paper, damit die dunklen Farbwelten hier keine weißen Blöcke
   bekommen. */
.insert-card {
  background: var(--color-paper, #FFFFFF);
  border: 1px solid color-mix(in srgb, var(--color-gold, #C9A25E) 40%, transparent);
  position: relative;
  box-shadow: 0 12px 30px -22px rgba(0, 0, 0, 0.35);
}
.insert-card::after {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid color-mix(in srgb, var(--color-gold, #C9A25E) 18%, transparent);
  pointer-events: none;
}

/* Eingebettete Karten leicht entsättigt, damit sie zur Papierpalette passen */
.map-tone { filter: sepia(0.14) saturate(0.85) contrast(0.98); }

/* ── Keyframes (Einladungskarten-Animationen, überall wiederverwendbar) ── */
@keyframes riseIn { 0% { transform: translateY(28px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
.rise-1 { animation: riseIn 0.8s var(--ease) 0.05s both; }
.rise-2 { animation: riseIn 0.8s var(--ease) 0.2s both; }
.rise-3 { animation: riseIn 0.8s var(--ease) 0.35s both; }

@keyframes cardIn { 0% { transform: translateY(-16px) rotate(3deg) scale(0.94); opacity: 0; } 100% { transform: translateY(0) rotate(3deg) scale(1); opacity: 1; } }
.card-in { animation: cardIn 1s var(--ease) 0.25s both; }

@keyframes envIn { 0% { transform: translateY(-10px) rotate(-7deg) scale(0.94); opacity: 0; } 100% { transform: translateY(0) rotate(-7deg) scale(1); opacity: 1; } }
.env-in { animation: envIn 1s var(--ease) 0.1s both; }

@keyframes sealIn { 0% { transform: rotate(-18deg) scale(0.5); opacity: 0; } 100% { transform: rotate(-9deg) scale(1); opacity: 1; } }
.seal-in { animation: sealIn 0.7s cubic-bezier(.3,1.4,.4,1) 0.7s both; }

@keyframes drift { 0%, 100% { transform: translateY(0) rotate(3deg); } 50% { transform: translateY(-8px) rotate(3deg); } }
.drift { animation: drift 6s ease-in-out infinite; }

@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.marquee-track { animation: marquee 28s linear infinite; }

@keyframes cursorBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.typing-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  background: currentColor;
  vertical-align: -0.15em;
  animation: cursorBlink 0.85s step-end infinite;
}

/* ═══════════════════════════════════════════════════════════════════════
   EINLADUNGS-SIEGEL (Gästeseite + Baukasten-Vorschau)
   ═══════════════════════════════════════════════════════════════════════
   Der EINE autorisierte Moment der Gästeseite. Dreistufige Physik:
   (1) der Riss bildet sich, das Wachs liegt noch;
   (2) das Stück löst sich und kippt mit Gewicht;
   (3) es fällt beschleunigt aus dem Bild.
   Wege in PROZENT der eigenen Größe, nicht in px — sonst fliegen die Stücke
   in der 48px-Kachel des Baukastens weiter als das Siegel breit ist.

   Diese Regeln standen bis 2026-08-17 als 7,4-KB-Template-Literal in einem
   <style> im Bauteil. Das hat bei jedem Render neu eingehängt UND einen
   Hydration-Fehler ausgelöst: der Server schreibt den Text als zwei
   Textknoten, der Client hat einen, React vergleicht gegen den ersten und
   verwirft den ganzen Baum. Animationen gehören nach globals.css. */

/* Bis 18% bewegt sich fast nichts: nur so viel, dass die Bruchkante aufreißt.
   Größere Werte zeigten das PAPIER im Spalt, bevor der Bruch überhaupt
   gelesen war — ein heller Blitz mitten im Wachs. Danach zählt Tempo: der
   Spalt darf nicht lange offen im Bild stehen, sonst wird aus dem Riss eine
   weiße Fläche. Deckkraft bleibt bis 72% voll, damit die Stücke nicht als
   Geister über dem hellen Papier hängen. */
@keyframes sgl-links {
  0%   { transform: translate3d(0,0,0) rotate3d(0,0,1,0deg); opacity: 1; }
  18%  { transform: translate3d(-0.4%,0.2%,0) rotate3d(0,0,1,-0.7deg); opacity: 1; }
  42%  { transform: translate3d(-4%,3%,0) rotate3d(0.2,0.9,0.35,-22deg); opacity: 1; }
  72%  { transform: translate3d(-16%,26%,0) rotate3d(0.25,0.85,0.45,-52deg); opacity: 1; }
  100% { transform: translate3d(-32%,72%,0) rotate3d(0.25,0.8,0.5,-86deg); opacity: 0; }
}
@keyframes sgl-rechts {
  0%   { transform: translate3d(0,0,0) rotate3d(0,0,1,0deg); opacity: 1; }
  18%  { transform: translate3d(0.45%,0.25%,0) rotate3d(0,0,1,0.6deg); opacity: 1; }
  42%  { transform: translate3d(4.5%,3.4%,0) rotate3d(0.2,0.9,-0.35,20deg); opacity: 1; }
  72%  { transform: translate3d(18%,28%,0) rotate3d(0.25,0.85,-0.45,48deg); opacity: 1; }
  100% { transform: translate3d(34%,74%,0) rotate3d(0.25,0.8,-0.5,80deg); opacity: 0; }
}
/* Splitter: erst nach außen bersten, dann nach unten wegfallen */
@keyframes sgl-split-a {
  0%   { transform: translate3d(0,0,0); }
  12%  { transform: translate3d(-1.4%,-1%,0); opacity: 1; }
  46%  { transform: translate3d(-26%,-22%,0) rotate3d(0.4,0.6,0.7,-34deg); opacity: 1; }
  100% { transform: translate3d(-34%,28%,0) rotate3d(0.4,0.6,0.7,-72deg); opacity: 0; }
}
@keyframes sgl-split-b {
  0%   { transform: translate3d(0,0,0); }
  12%  { transform: translate3d(1.5%,-1%,0); opacity: 1; }
  46%  { transform: translate3d(28%,-18%,0) rotate3d(0.4,0.6,-0.7,30deg); opacity: 1; }
  100% { transform: translate3d(36%,32%,0) rotate3d(0.4,0.6,-0.7,66deg); opacity: 0; }
}
@keyframes sgl-split-c {
  0%   { transform: translate3d(0,0,0); }
  12%  { transform: translate3d(-1.4%,1.2%,0); opacity: 1; }
  46%  { transform: translate3d(-22%,22%,0) rotate3d(0.5,0.5,0.7,26deg); opacity: 1; }
  100% { transform: translate3d(-28%,72%,0) rotate3d(0.5,0.5,0.7,58deg); opacity: 0; }
}
@keyframes sgl-split-d {
  0%   { transform: translate3d(0,0,0); }
  12%  { transform: translate3d(1.5%,1.3%,0); opacity: 1; }
  46%  { transform: translate3d(25%,24%,0) rotate3d(0.5,0.5,-0.7,-30deg); opacity: 1; }
  100% { transform: translate3d(31%,76%,0) rotate3d(0.5,0.5,-0.7,-64deg); opacity: 0; }
}
/* ── Schmelzen, neu gebaut 2026-08-17 ────────────────────────────────────
   Der erste Anlauf war keine Schmelze, sondern eine QUETSCHUNG: die Umrisslinie
   blieb durchweg eine saubere Ellipse, das Monogramm blieb bis 7% Resthöhe
   rasiermesserscharf, das Siegel rutschte 28% nach unten weg und verschwand per
   Deckkraft. Echtes Wachs macht drei andere Dinge:
   1. Es verliert ZUERST das Relief. Feine Prägung verläuft, bevor der Körper
      nachgibt. Darum blendet .sgl-relief-weg die Detailschichten weich aus.
   2. Es läuft nach AUSSEN, mit unregelmäßigem, wulstigem Rand. Darum wächst
      unter dem Körper eine eigene Pfützenform mit gelapptem Umriss.
   3. Es bleibt liegen. Kein Ausblenden mitten in der Schmelze: die glänzende
      Pfütze bleibt auf dem Papier, und erst die Blende des Umschlags nimmt sie
      mit. (Nicks Entscheidung: „Echtes Wachs, Pfütze bleibt".) */
@keyframes sgl-schmelz {
  0%   { transform: translateY(0) scale(1, 1); }
  16%  { transform: translateY(0.5%) scale(1.03, 0.97); }
  44%  { transform: translateY(3%) scale(1.16, 0.68); }
  72%  { transform: translateY(6%) scale(1.4, 0.36); }
  /* 0.22 Resthöhe, nicht 0.15: bei 15% liest sich die Pfütze als roter Strich.
     Eine Lache braucht sichtbare Dicke. */
  100% { transform: translateY(7%) scale(1.62, 0.22); }
}
/* Das Relief verläuft als erstes: Deckkraft weg, Kanten weich. */
@keyframes sgl-relief-weg {
  0%   { opacity: 1; filter: blur(0); }
  28%  { opacity: 0.8; filter: blur(0.5px); }
  60%  { opacity: 0.3; filter: blur(1.6px); }
  100% { opacity: 0; filter: blur(3px); }
}
/* Die Pfütze wächst mit und bleibt liegen. */
@keyframes sgl-pfuetze {
  0%   { opacity: 0; transform: scale(0.3, 0.14); }
  40%  { opacity: 0.65; transform: scale(0.66, 0.5); }
  100% { opacity: 1; transform: scale(1, 1); }
}
/* Zwei Tropfen sacken unten weg, zeitlich versetzt. */
@keyframes sgl-tropfen-a {
  0%, 30% { opacity: 0; transform: translateY(0) scaleY(0.4); }
  100%    { opacity: 1; transform: translateY(180%) scaleY(1); }
}
@keyframes sgl-tropfen-b {
  0%, 48% { opacity: 0; transform: translateY(0) scaleY(0.4); }
  100%    { opacity: 1; transform: translateY(140%) scaleY(1); }
}

/* ── Ablösen ─────────────────────────────────────────────────────────────
   Die realistischste Art überhaupt: moderne Siegel sind aufgeklebt, man bricht
   sie nicht. Das Siegel bleibt ganz, löst sich an der Unterkante, kippt nach
   vorn und wandert mit der Klappe nach oben aus dem Bild. */
@keyframes sgl-abloesen {
  0%   { transform: translate3d(0,0,0) rotate3d(1,0,0,0deg); opacity: 1; }
  18%  { transform: translate3d(0,0.6%,0) rotate3d(1,0,0,6deg); opacity: 1; }
  46%  { transform: translate3d(0.5%,-6%,0) rotate3d(1,0,0.08,26deg); opacity: 1; }
  100% { transform: translate3d(2%,-78%,0) rotate3d(1,0,0.12,54deg); opacity: 0; }
}

/* ── Wegkippen ───────────────────────────────────────────────────────────
   Schwerkraft statt Gewalt: das Siegel löst sich einseitig, kippt über seine
   Kante nach vorn und fällt flach hin, mit einem kurzen Nachwippen. */
@keyframes sgl-kippen {
  0%   { transform: rotate3d(1,0,0,0deg) translateY(0); }
  22%  { transform: rotate3d(1,0,0.2,-9deg) translateY(-1%); }
  62%  { transform: rotate3d(1,0,0.2,58deg) translateY(9%); }
  82%  { transform: rotate3d(1,0,0.2,74deg) translateY(15%); }
  92%  { transform: rotate3d(1,0,0.2,70deg) translateY(14%); }
  100% { transform: rotate3d(1,0,0.2,72deg) translateY(15%); opacity: 0.9; }
}

/* ── Papier reißt ────────────────────────────────────────────────────────
   Das Wachs hält, das Papier gibt nach. Siegel und Fetzen kippen zusammen weg,
   darum liegen sie im selben animierten Element. */
@keyframes sgl-papier {
  0%   { transform: translate3d(0,0,0) rotate3d(0,0,1,0deg); opacity: 1; }
  20%  { transform: translate3d(-0.5%,0.4%,0) rotate3d(0,0,1,-2deg); opacity: 1; }
  52%  { transform: translate3d(-4%,7%,0) rotate3d(0.2,0.3,1,-19deg); opacity: 1; }
  100% { transform: translate3d(-16%,64%,0) rotate3d(0.3,0.4,1,-58deg); opacity: 0; }
}

/* ── Bleibt heil ─────────────────────────────────────────────────────────
   Die ruhigste Variante, nach dem Vorbild der Referenzaufnahme: das Siegel wird
   nie beschädigt. Die Kamera fährt langsam heran, dann blendet der Umschlag ab.
   Nur Maßstab und Deckkraft, keine Zerlegung. */
@keyframes sgl-heil {
  0%   { transform: scale(1); opacity: 1; }
  62%  { transform: scale(1.16); opacity: 1; }
  100% { transform: scale(1.26); opacity: 0; }
}
/* Wirbel: dreht sich an, beschleunigt, löst sich auf */
@keyframes sgl-wirbel {
  0%   { transform: rotate3d(0,0,1,0deg) scale(1); }
  14%  { transform: rotate3d(0,0,1,-6deg) scale(0.99); }
  34%  { transform: rotate3d(0.15,0.2,1,52deg) scale(1.06); opacity: 1; }
  100% { transform: rotate3d(0.15,0.2,1,400deg) scale(1.8); opacity: 0; }
}
/* Der Riss: blitzt auf, bevor sich etwas bewegt, und verschwindet mit den
   Stücken — er ist der Auftakt, nicht die Bewegung. */
@keyframes sgl-riss {
  0%   { opacity: 0; }
  9%   { opacity: 0.95; }
  40%  { opacity: 0.5; }
  100% { opacity: 0; }
}
/* Die Bruchflächen blenden MIT dem Riss ein. Ohne das stehen sie im ersten
   Frame bereits voll da und der Riss poppt beim Zustandswechsel ins Bild. */
@keyframes sgl-flaeche {
  0%   { opacity: 0; }
  8%   { opacity: 0.3; }
  20%  { opacity: 1; }
  100% { opacity: 1; }
}
/* Der Schatten im Spalt: sofort da, wird mit dem Spalt breiter und ist weg,
   BEVOR die Stücke das Bild verlassen. Sonst bleibt ein grauer Schmierer auf
   dem Papier stehen, den nichts mehr wirft. */
@keyframes sgl-riss-schatten {
  0%   { opacity: 0; transform: scaleX(1); }
  12%  { opacity: 1; transform: scaleX(1); }
  42%  { opacity: 0.9; transform: scaleX(1.9); }
  64%  { opacity: 0; transform: scaleX(2.7); }
  100% { opacity: 0; transform: scaleX(2.7); }
}
/* Wachsstaub: kein weißer Lichtblitz, sondern ein warmer Puff in Wachston */
@keyframes sgl-staub {
  0%   { opacity: 0; transform: scale(0.72); }
  22%  { opacity: 1; transform: scale(1.04); }
  100% { opacity: 0; transform: scale(1.42); }
}
/* Krümel: springen weg und fallen, jeder auf eigener Bahn */
@keyframes sgl-k1 { 0% { transform: translate(0,0) rotate(0); opacity: 1; } 30% { opacity: 1; } 100% { transform: translate(-260%,190%) rotate(-140deg); opacity: 0; } }
@keyframes sgl-k2 { 0% { transform: translate(0,0) rotate(0); opacity: 1; } 30% { opacity: 1; } 100% { transform: translate(230%,-150%) rotate(120deg); opacity: 0; } }
@keyframes sgl-k3 { 0% { transform: translate(0,0) rotate(0); opacity: 1; } 30% { opacity: 1; } 100% { transform: translate(300%,260%) rotate(200deg); opacity: 0; } }
@keyframes sgl-k4 { 0% { transform: translate(0,0) rotate(0); opacity: 1; } 30% { opacity: 1; } 100% { transform: translate(-210%,-230%) rotate(-95deg); opacity: 0; } }
@keyframes sgl-k5 { 0% { transform: translate(0,0) rotate(0); opacity: 1; } 30% { opacity: 1; } 100% { transform: translate(60%,330%) rotate(160deg); opacity: 0; } }
@keyframes sgl-k6 { 0% { transform: translate(0,0) rotate(0); opacity: 1; } 30% { opacity: 1; } 100% { transform: translate(-330%,60%) rotate(-175deg); opacity: 0; } }
/* Ruhiges Atmen des Hinweises — die Bewegung liegt im Text, nicht im Wachs:
   ein pulsierendes Siegel wäre eine zweite Bewegung neben dem einen Moment. */
@keyframes sgl-atem { 0%, 100% { opacity: 0.62; } 50% { opacity: 1; } }

/* ── Der Umschlag über der Gästeseite ────────────────────────────────────
   --sgl-spitze ist der eine Wert, der Klappenspitze UND Siegelmitte
   zusammenhält; das Bauteil liest ihn für die Position des Siegels. */
:root { --sgl-spitze: 52%; }

/* Die Blende gehört ans ENDE: erst bricht das Wachs, dann öffnet die Klappe,
   erst danach löst sich der Umschlag auf. */
@keyframes siegel-umschlag-auf { 0% { opacity: 1; } 74% { opacity: 1; } 100% { opacity: 0; } }
/* Die Klappe schwingt um ihre obere Falzkante auf, die Spitze kommt dem
   Betrachter entgegen — wie beim Öffnen in der Hand. */
@keyframes siegel-klappe-auf {
  0%   { transform: rotateX(0deg); }
  22%  { transform: rotateX(4deg); }
  100% { transform: rotateX(52deg); }
}

/* Die Falzkante der Klappe.
   Im Breitformat laufen die Klappenecken in die Bildecken — das ergibt auf
   16:9 von sich aus die ~33°, die eine echte Umschlagklappe hat. Im
   Hochformat wäre dieselbe Geometrie 66° steil und läse sich als zwei
   zulaufende Striche. Dort setzen die Diagonalen darum auf den SEITENkanten
   an (34% Höhe) und die Ecken laufen aus dem Bild — genau wie in der
   Referenzaufnahme, Ergebnis 38°.
   Clip und Lichtkante teilen dieselben Prozentwerte, damit der haarfeine
   Glanz exakt auf dem Knick sitzt. */
.sgl-klappe { clip-path: polygon(0 0, 100% 0, 100% 0%, 50% var(--sgl-spitze), 0 0%); }
.sgl-tasche { clip-path: polygon(0 100%, 100% 100%, 100% 100%, 50% 48%, 0 100%); }
.sgl-falz-hoch { display: none; }
@media (max-aspect-ratio: 1/1) {
  .sgl-klappe { clip-path: polygon(0 0, 100% 0, 100% 34%, 50% var(--sgl-spitze), 0 34%); }
  .sgl-tasche { clip-path: polygon(0 100%, 100% 100%, 100% 66%, 50% 48%, 0 66%); }
  .sgl-falz-breit { display: none; }
  .sgl-falz-hoch { display: block; }
}
/* Quer gehaltenes Handy: dort ist zwischen Siegel und Hinweis kein Platz für
   die Namen. Siegel und Hinweis allein sind die ruhigere Komposition. */
@media (max-height: 560px) { .sgl-namen { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .sgl-anim { animation: none !important; }
  /* Das Relief darf bei reduzierter Bewegung nicht weichgezeichnet stehen
     bleiben: animation:none friert sonst den Startzustand ein, und blur(0) ist
     zwar harmlos, opacity aber nicht überall. Darum explizit zurücksetzen. */
  .sgl-relief { opacity: 1 !important; filter: none !important; }
}

/* ── Sekt-Anstoß, der scroll-gescrubbte Abschnitt ────────────────────────
   Steht hier und nicht in einem <style> im Bauteil. Ein Inline-Style-Block
   löst denselben Hydration-Fehler aus wie zuvor bei den Siegel-Keyframes:
   der Server schreibt den Text als zwei Textknoten, der Client hat einen,
   React vergleicht gegen den ersten und verwirft den ganzen Baum. */
/* Standbild als CSS-Hintergrund, nicht erst in laden(): hinter den Toren unten
   läuft laden() nie, und dann stand hier eine leere Fläche. */
.sk-buehne { position: sticky; top: 0; height: 100vh; overflow: hidden; background-image: url('/sekt/sekt-poster.jpg'); background-size: cover; background-position: 62% center; }
.sk-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  -o-object-fit: cover;
     object-fit: cover; -o-object-position: 62% center; object-position: 62% center;
  opacity: 0; transition: opacity .7s ease;
  will-change: transform; transform: translateZ(0);
}
.sk-buehne.sk-bereit .sk-video { opacity: 1; }
/* Der Schleier über der linken Spalte, in der der Text steht.
   ERSTER ANLAUF war eine kleine Ellipse auf dem Band selbst (inset -6% -10%,
   Ellipse 78% × 66%). Gemessen ergab das 1,05 : 1 und 1,37 : 1 gegen eine
   Untergrenze von 3,5 : 1: das Band ist nur ~119 px hoch, die Ellipse stirbt
   darin viel zu früh aus, und ein Kerzen-Bokeh von rgb(252,241,221) stand
   direkt hinter der Schrift.
   Jetzt ein Verlauf über die ganze linke Spalte. Er endet bei 62 %, die Gläser
   stehen rechts davon und bleiben unangetastet. 0,72 Deckkraft ist bewusst
   nicht mehr: dunkler wäre die linke Bildhälfte fast schwarz und das
   Kerzenlicht verschwunden. */
.sk-schleier {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to right, rgba(18,13,8,.9) 0%, rgba(18,13,8,.88) 28%, rgba(18,13,8,.8) 42%, rgba(18,13,8,.4) 54%, rgba(18,13,8,0) 68%),
    radial-gradient(ellipse 130% 100% at 74% 50%, rgba(24,18,13,0) 42%, rgba(24,18,13,.5) 100%);
}
.sk-band { text-shadow: 0 1px 2px rgba(12,8,5,.95), 0 3px 12px rgba(12,8,5,.8), 0 10px 44px rgba(12,8,5,.8); }

/* Der statische Zustand ohne Scrub. Die fünf Bedingungen sind die TORE aus
   components/SektSektion.jsx, zeichengleich — weichen sie ab, versteckt die eine
   Seite, was die andere lädt.
   Vorher war der Abschnitt hier NICHT „vollständig ohne Video", sondern leer:
   das Standbild wurde nur in laden() gesetzt (läuft hinter diesen Toren nie),
   und ausschalten() stieg wegen `if (!an) return` beim ersten Durchlauf sofort
   aus, weshalb das zweite Textband auf opacity 0 blieb. Auf dem Handy standen so
   200vh dunkelbraun mit einer einzigen Überschrift. Der statische Zustand gehört
   deshalb ins CSS und nicht ins JavaScript.
   Als Bild steht hier sekt-ende.jpg, nicht das Poster: ohne Scrub gibt es keinen
   Ablauf, also zeigt das Standbild direkt den Moment, auf den der Film hinausläuft
   — die Gläser berühren sich. */
@media (max-width: 720px),
       (orientation: portrait) and (max-width: 1024px),
       (orientation: portrait) and (pointer: coarse),
       (orientation: landscape) and (pointer: coarse) and (max-height: 560px),
       (prefers-reduced-motion: reduce) {
  /* 200vh steht als Inline-Höhe am Abschnitt, daher !important */
  .sk-sektion { height: auto !important; }
  /* relative statt static: der Schleier liegt absolute inset-0 IN der Bühne und
     bräuchte sonst den Abschnitt als Bezug. */
  .sk-buehne {
    position: relative; height: auto; min-height: 78vh;
    display: flex; align-items: center;
    background-image: url('/sekt/sekt-ende.jpg');
  }
  .sk-video { display: none; }
  /* Der Schleier deckt links stark ab und läuft nach rechts aus — richtig, wenn
     der Text in einer 38-%-Spalte steht. Mobil läuft er über die ganze Breite,
     dort braucht es eine gleichmäßige Abdeckung. */
  .sk-schleier {
    background: linear-gradient(to bottom, rgba(16,11,7,.66) 0%, rgba(16,11,7,.8) 100%);
  }
  /* Beide Bänder in den normalen Fluss: absolut übereinander ergeben sie ohne
     Überblendung einen Textklumpen. */
  .sk-band { position: static !important; opacity: 1 !important; }
  .sk-band + .sk-band { margin-top: 1.9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sk-video { display: none; }
  .sk-band { opacity: 1 !important; }
  .rise-1, .rise-2, .rise-3, .card-in, .env-in, .seal-in, .drift, .marquee-track {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  /* .reveal fehlte hier: die Elemente kamen zwar an (IntersectionObserver
     setzt is-visible), aber mit 0,9 s Bewegung. Bei reduzierter Bewegung
     sollen sie einfach da sein — samt aller Varianten und Staffel-Kinder. */
  .reveal, .reveal--links, .reveal--rechts, .reveal--foto, .reveal .rv-kind, .rv-linie,
  .ein-schrift, .ein-legen, .ein-tiefe, .ein-schlag, .ein-spur, .ein-linie,
  .ein-siegel, .ein-weite, .ein-spur .spur-jahr, .ein-spur .spur-satz {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition-delay: 0s !important;
  }
  /* ein-vorhang arbeitet mit clip-path, das transform:none nicht zurücksetzt */
  .ein-vorhang { clip-path: none !important; }
}

/* ── Die Kopfleiste der Startseite ───────────────────────────────────────
   Ueber dem Hero durchsichtig, ab 40px Scrollhoehe mit dunklem Glas. Grund:
   das Glasband war fuer den Tanzfilm gedacht (lesbar ueber Film UND hellen
   Sektionen). Seit der Film raus ist, verdeckte es nur noch die Koepfe des
   Paares im Titelbild. Der Uebergang laeuft ueber Farbe und Rahmen, nicht ueber
   die Sichtbarkeit, damit nichts springt. */
.kopf-leiste {
  background-color: rgba(28, 23, 19, 0);
  border-bottom: 1px solid rgba(201, 162, 94, 0);
  transition: background-color .45s var(--ease-aus), border-color .45s var(--ease-aus),
              backdrop-filter .45s var(--ease-aus);
}
.kopf-leiste.kopf-glas {
  background-color: rgba(28, 23, 19, 0.68);
  border-bottom-color: rgba(201, 162, 94, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
@media (prefers-reduced-motion: reduce) {
  .kopf-leiste { transition: none; }
}
.last\:border-b-0:last-child{
  border-bottom-width: 0px;
}
.hover\:-translate-y-0\.5:hover{
  --tw-translate-y: -0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:rotate-0:hover{
  --tw-rotate: 0deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:scale-105:hover{
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:scale-110:hover{
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:scale-\[1\.03\]:hover{
  --tw-scale-x: 1.03;
  --tw-scale-y: 1.03;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:border-\[\#55684B\]:hover{
  --tw-border-opacity: 1;
  border-color: rgb(85 104 75 / var(--tw-border-opacity, 1));
}
.hover\:border-accent:hover{
  border-color: var(--color-accent, #B8433E);
}
.hover\:border-gold:hover{
  border-color: var(--color-gold, #C9A25E);
}
.hover\:bg-line:hover{
  background-color: var(--color-line, #E3DACD);
}
.hover\:bg-surface:hover{
  background-color: var(--color-surface, #F1EBE0);
}
.hover\:bg-white:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.hover\:text-accent:hover{
  color: var(--color-accent, #B8433E);
}
.hover\:text-ink:hover{
  color: var(--color-ink, #2B2420);
}
.hover\:text-ink-soft:hover{
  color: var(--color-ink-soft, #6B5F52);
}
.hover\:decoration-gold:hover{
  text-decoration-color: var(--color-gold, #C9A25E);
}
.hover\:decoration-2:hover{
  text-decoration-thickness: 2px;
}
.hover\:opacity-100:hover{
  opacity: 1;
}
.hover\:opacity-70:hover{
  opacity: 0.7;
}
.hover\:opacity-80:hover{
  opacity: 0.8;
}
.hover\:opacity-85:hover{
  opacity: 0.85;
}
.hover\:opacity-90:hover{
  opacity: 0.9;
}
.focus\:outline-none:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus-visible\:outline:focus-visible{
  outline-style: solid;
}
.focus-visible\:outline-2:focus-visible{
  outline-width: 2px;
}
.focus-visible\:outline-offset-2:focus-visible{
  outline-offset: 2px;
}
.focus-visible\:outline-offset-4:focus-visible{
  outline-offset: 4px;
}
.focus-visible\:outline-offset-8:focus-visible{
  outline-offset: 8px;
}
.active\:scale-95:active{
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.active\:scale-\[0\.985\]:active{
  --tw-scale-x: 0.985;
  --tw-scale-y: 0.985;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.active\:cursor-grabbing:active{
  cursor: grabbing;
}
.disabled\:cursor-not-allowed:disabled{
  cursor: not-allowed;
}
.disabled\:opacity-40:disabled{
  opacity: 0.4;
}
.disabled\:opacity-50:disabled{
  opacity: 0.5;
}
.disabled\:opacity-60:disabled{
  opacity: 0.6;
}
.disabled\:hover\:bg-transparent:hover:disabled{
  background-color: transparent;
}
.disabled\:hover\:opacity-40:hover:disabled{
  opacity: 0.4;
}
.disabled\:hover\:opacity-90:hover:disabled{
  opacity: 0.9;
}
.group:hover .group-hover\:underline{
  text-decoration-line: underline;
}
.group:hover .group-hover\:opacity-100{
  opacity: 1;
}
@media (min-width: 640px){

  .sm\:inline{
    display: inline;
  }

  .sm\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sm\:grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sm\:flex-row{
    flex-direction: row;
  }

  .sm\:items-center{
    align-items: center;
  }

  .sm\:text-\[2\.7rem\]{
    font-size: 2.7rem;
  }
}
@media (min-width: 768px){

  .md\:top-2{
    top: 0.5rem;
  }

  .md\:-mx-12{
    margin-left: -3rem;
    margin-right: -3rem;
  }

  .md\:mx-4{
    margin-left: 1rem;
    margin-right: 1rem;
  }

  .md\:-mt-16{
    margin-top: -4rem;
  }

  .md\:mb-12{
    margin-bottom: 3rem;
  }

  .md\:mb-14{
    margin-bottom: 3.5rem;
  }

  .md\:mb-20{
    margin-bottom: 5rem;
  }

  .md\:mb-24{
    margin-bottom: 6rem;
  }

  .md\:mb-9{
    margin-bottom: 2.25rem;
  }

  .md\:mt-11{
    margin-top: 2.75rem;
  }

  .md\:mt-16{
    margin-top: 4rem;
  }

  .md\:mt-28{
    margin-top: 7rem;
  }

  .md\:mt-9{
    margin-top: 2.25rem;
  }

  .md\:block{
    display: block;
  }

  .md\:inline{
    display: inline;
  }

  .md\:flex{
    display: flex;
  }

  .md\:grid{
    display: grid;
  }

  .md\:hidden{
    display: none;
  }

  .md\:h-12{
    height: 3rem;
  }

  .md\:h-16{
    height: 4rem;
  }

  .md\:h-80{
    height: 20rem;
  }

  .md\:h-\[34rem\]{
    height: 34rem;
  }

  .md\:w-1\/2{
    width: 50%;
  }

  .md\:w-20{
    width: 5rem;
  }

  .md\:w-\[38\%\]{
    width: 38%;
  }

  .md\:max-w-\[38ch\]{
    max-width: 38ch;
  }

  .md\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .md\:grid-cols-\[0\.9fr_1\.1fr\]{
    grid-template-columns: 0.9fr 1.1fr;
  }

  .md\:grid-cols-\[1\.1fr_0\.9fr\]{
    grid-template-columns: 1.1fr 0.9fr;
  }

  .md\:flex-row{
    flex-direction: row;
  }

  .md\:items-end{
    align-items: flex-end;
  }

  .md\:justify-between{
    justify-content: space-between;
  }

  .md\:gap-10{
    gap: 2.5rem;
  }

  .md\:gap-14{
    gap: 3.5rem;
  }

  .md\:gap-16{
    gap: 4rem;
  }

  .md\:gap-4{
    gap: 1rem;
  }

  .md\:gap-7{
    gap: 1.75rem;
  }

  .md\:gap-8{
    gap: 2rem;
  }

  .md\:gap-x-6{
    -moz-column-gap: 1.5rem;
         column-gap: 1.5rem;
  }

  .md\:gap-x-8{
    -moz-column-gap: 2rem;
         column-gap: 2rem;
  }

  .md\:space-y-0 > :not([hidden]) ~ :not([hidden]){
    --tw-space-y-reverse: 0;
    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0px * var(--tw-space-y-reverse));
  }

  .md\:space-y-14 > :not([hidden]) ~ :not([hidden]){
    --tw-space-y-reverse: 0;
    margin-top: calc(3.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(3.5rem * var(--tw-space-y-reverse));
  }

  .md\:p-10{
    padding: 2.5rem;
  }

  .md\:p-6{
    padding: 1.5rem;
  }

  .md\:p-8{
    padding: 2rem;
  }

  .md\:p-9{
    padding: 2.25rem;
  }

  .md\:px-10{
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .md\:px-12{
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .md\:px-14{
    padding-left: 3.5rem;
    padding-right: 3.5rem;
  }

  .md\:px-16{
    padding-left: 4rem;
    padding-right: 4rem;
  }

  .md\:px-5{
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .md\:px-7{
    padding-left: 1.75rem;
    padding-right: 1.75rem;
  }

  .md\:px-8{
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .md\:py-0{
    padding-top: 0px;
    padding-bottom: 0px;
  }

  .md\:py-10{
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .md\:py-14{
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .md\:py-16{
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .md\:py-2\.5{
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
  }

  .md\:py-24{
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .md\:py-32{
    padding-top: 8rem;
    padding-bottom: 8rem;
  }

  .md\:py-40{
    padding-top: 10rem;
    padding-bottom: 10rem;
  }

  .md\:py-44{
    padding-top: 11rem;
    padding-bottom: 11rem;
  }

  .md\:py-5{
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }

  .md\:py-6{
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .md\:pb-14{
    padding-bottom: 3.5rem;
  }

  .md\:pb-28{
    padding-bottom: 7rem;
  }

  .md\:pl-6{
    padding-left: 1.5rem;
  }

  .md\:pt-8{
    padding-top: 2rem;
  }

  .md\:text-right{
    text-align: right;
  }

  .md\:text-2xl{
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .md\:text-4xl{
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .md\:text-5xl{
    font-size: 3rem;
    line-height: 1;
  }

  .md\:text-6xl{
    font-size: 3.75rem;
    line-height: 1;
  }

  .md\:text-\[1\.9rem\]{
    font-size: 1.9rem;
  }

  .md\:text-\[15px\]{
    font-size: 15px;
  }

  .md\:text-\[2\.4rem\]{
    font-size: 2.4rem;
  }

  .md\:text-\[2\.6rem\]{
    font-size: 2.6rem;
  }

  .md\:text-\[2\.7rem\]{
    font-size: 2.7rem;
  }

  .md\:text-\[2\.8rem\]{
    font-size: 2.8rem;
  }

  .md\:text-\[2rem\]{
    font-size: 2rem;
  }

  .md\:text-\[3\.1rem\]{
    font-size: 3.1rem;
  }

  .md\:text-\[3\.2rem\]{
    font-size: 3.2rem;
  }

  .md\:text-\[3\.4rem\]{
    font-size: 3.4rem;
  }

  .md\:text-\[4\.2rem\]{
    font-size: 4.2rem;
  }

  .md\:text-\[4rem\]{
    font-size: 4rem;
  }

  .md\:text-base{
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .md\:text-lg{
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .md\:text-sm{
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .md\:text-xl{
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .md\:text-xs{
    font-size: 0.75rem;
    line-height: 1rem;
  }

  .md\:leading-tight{
    line-height: 1.25;
  }

  .first\:md\:pl-0:first-child{
    padding-left: 0px;
  }

  .last\:md\:pr-0:last-child{
    padding-right: 0px;
  }
}
@media (min-width: 1024px){

  .lg\:order-1{
    order: 1;
  }

  .lg\:order-2{
    order: 2;
  }

  .lg\:-mx-14{
    margin-left: -3.5rem;
    margin-right: -3.5rem;
  }

  .lg\:block{
    display: block;
  }

  .lg\:hidden{
    display: none;
  }

  .lg\:h-\[28rem\]{
    height: 28rem;
  }

  .lg\:max-w-4xl{
    max-width: 56rem;
  }

  .lg\:max-w-\[1240px\]{
    max-width: 1240px;
  }

  .lg\:max-w-\[38ch\]{
    max-width: 38ch;
  }

  .lg\:max-w-none{
    max-width: none;
  }

  .lg\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-5{
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .lg\:grid-cols-\[1\.05fr_0\.95fr\]{
    grid-template-columns: 1.05fr 0.95fr;
  }

  .lg\:grid-cols-\[1fr_0\.8fr\]{
    grid-template-columns: 1fr 0.8fr;
  }

  .lg\:flex-row{
    flex-direction: row;
  }

  .lg\:items-end{
    align-items: flex-end;
  }

  .lg\:justify-start{
    justify-content: flex-start;
  }

  .lg\:justify-between{
    justify-content: space-between;
  }

  .lg\:gap-12{
    gap: 3rem;
  }

  .lg\:gap-16{
    gap: 4rem;
  }

  .lg\:gap-20{
    gap: 5rem;
  }

  .lg\:rounded-\[14px\]{
    border-radius: 14px;
  }

  .lg\:border-\[9px\]{
    border-width: 9px;
  }

  .lg\:p-10{
    padding: 2.5rem;
  }

  .lg\:px-10{
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .lg\:px-14{
    padding-left: 3.5rem;
    padding-right: 3.5rem;
  }

  .lg\:text-right{
    text-align: right;
  }

  .lg\:text-\[3\.5rem\]{
    font-size: 3.5rem;
  }
}
@media (min-width: 1280px){

  .xl\:-mx-16{
    margin-left: -4rem;
    margin-right: -4rem;
  }

  .xl\:max-w-6xl{
    max-width: 72rem;
  }

  .xl\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .xl\:px-16{
    padding-left: 4rem;
    padding-right: 4rem;
  }
}
@media (min-width: 1536px){

  .\32xl\:max-w-\[1400px\]{
    max-width: 1400px;
  }
}
@media print{

  .print\:hidden{
    display: none;
  }
}
.\[\&_a\]\:text-ink a{
  color: var(--color-ink, #2B2420);
}
.\[\&_a\]\:underline a{
  text-decoration-line: underline;
}
.\[\&_a\]\:decoration-gold a{
  text-decoration-color: var(--color-gold, #C9A25E);
}
.\[\&_a\]\:underline-offset-4 a{
  text-underline-offset: 4px;
}
.\[\&_h2\]\:mb-3 h2{
  margin-bottom: 0.75rem;
}
.\[\&_h2\]\:mb-4 h2{
  margin-bottom: 1rem;
}
.\[\&_h2\]\:mt-10 h2{
  margin-top: 2.5rem;
}
.\[\&_h2\]\:mt-12 h2{
  margin-top: 3rem;
}
.\[\&_h2\]\:font-display h2{
  font-family: var(--font-display), "Bodoni Moda", Georgia, serif;
}
.\[\&_h2\]\:text-2xl h2{
  font-size: 1.5rem;
  line-height: 2rem;
}
.\[\&_h2\]\:text-xl h2{
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.\[\&_h2\]\:text-ink h2{
  color: var(--color-ink, #2B2420);
}
.\[\&_h3\]\:mb-1\.5 h3{
  margin-bottom: 0.375rem;
}
.\[\&_h3\]\:mb-2 h3{
  margin-bottom: 0.5rem;
}
.\[\&_h3\]\:mt-6 h3{
  margin-top: 1.5rem;
}
.\[\&_h3\]\:mt-8 h3{
  margin-top: 2rem;
}
.\[\&_h3\]\:font-medium h3{
  font-weight: 500;
}
.\[\&_h3\]\:font-semibold h3{
  font-weight: 600;
}
.\[\&_h3\]\:text-ink h3{
  color: var(--color-ink, #2B2420);
}
.\[\&_strong\]\:font-semibold strong{
  font-weight: 600;
}
.\[\&_strong\]\:text-ink strong{
  color: var(--color-ink, #2B2420);
}
.\[\&_ul\]\:list-disc ul{
  list-style-type: disc;
}
.\[\&_ul\]\:space-y-1\.5 ul > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}
.\[\&_ul\]\:pl-5 ul{
  padding-left: 1.25rem;
}