/* ------------------------------------------------------------------
   Fonts — entirely local, nothing is fetched from Google.

   All thirty files ship with the program and lie in assets/fonts/. Each
   cut is split in three (#804): the Latin file (Basic Latin, Latin-1,
   German punctuation) every page loads, an -ext file with Latin
   Extended and a -vietnamese file. The browser fetches the last two
   only when a page holds one of their characters — that is what
   unicode-range does, no language switch is needed. bin/schriften-teilen.sh makes the split, and
   bin/schriften-bereiche.mjs cuts the range of each face to what its file holds — a
   symbol the files lack, such as the menu button's U+2630, then fetches nothing. Where
   they come from, which version, and their checksums stand in
   assets/fonts/LIESMICH.txt; the licences lie beside them.

   The page holds up without them as well — every role below ends in a
   genus of the device — but that is the safety net, not the plan. Rename
   a file here and it has to be renamed there: the check in
   tests/phpunit/StylesheetTest.php looks for every name this block
   mentions.
   ------------------------------------------------------------------

   © 2026 David Bursch (vvv-net.de) · Proprietary licence, see LIZENZ.md
*/

@font-face{
  font-family:'Vollkorn';font-style:normal;font-weight:600;font-display:swap;
  src:url('assets/fonts/vollkorn-600.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:'Vollkorn';font-style:normal;font-weight:600;font-display:swap;
  src:url('assets/fonts/vollkorn-600-ext.woff2') format('woff2');
  unicode-range:U+0100-0101,U+0104-010F,U+0112-0127,U+012A-0130,U+0132-0151,U+0154-0167,U+016A-017F,U+018E-018F,U+0192,U+019D,U+01B7,U+01C4-01DD,U+01E4-01EB,U+01EE-01EF,U+01F1-01F3,U+01FA-021F,U+0228-022D,U+0230-0233,U+0237,U+0258-0259,U+0272,U+0292,U+02B9-02BA,U+02BE-02BF,U+02C7-02CC,U+02DD,U+1E08-1E09,U+1E0C-1E11,U+1E14-1E17,U+1E1C-1E1D,U+1E20-1E21,U+1E24-1E25,U+1E2A-1E2B,U+1E2E-1E2F,U+1E36-1E37,U+1E3A-1E3B,U+1E42-1E49,U+1E4C-1E53,U+1E5A-1E5B,U+1E5E-1E69,U+1E6C-1E6F,U+1E78-1E7B,U+1E80-1E85,U+1E8E-1E93,U+1E97,U+1E9E,U+2074,U+20A1,U+20A3-20A4,U+20A6-20A7,U+20A9,U+20AD-20AE,U+20B1-20B2,U+20B4-20B5,U+20B8-20BA,U+20BC-20BD,U+2113;
}
@font-face{
  font-family:'Vollkorn';font-style:normal;font-weight:600;font-display:swap;
  src:url('assets/fonts/vollkorn-600-vietnamese.woff2') format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EF2-1EF9,U+20AB;
}
@font-face{
  font-family:'Vollkorn';font-style:normal;font-weight:700;font-display:swap;
  src:url('assets/fonts/vollkorn-700.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:'Vollkorn';font-style:normal;font-weight:700;font-display:swap;
  src:url('assets/fonts/vollkorn-700-ext.woff2') format('woff2');
  unicode-range:U+0100-0101,U+0104-010F,U+0112-0127,U+012A-0130,U+0132-0151,U+0154-0167,U+016A-017F,U+018E-018F,U+0192,U+019D,U+01B7,U+01C4-01DD,U+01E4-01EB,U+01EE-01EF,U+01F1-01F3,U+01FA-021F,U+0228-022D,U+0230-0233,U+0237,U+0258-0259,U+0272,U+0292,U+02B9-02BA,U+02BE-02BF,U+02C7-02CC,U+02DD,U+1E08-1E09,U+1E0C-1E11,U+1E14-1E17,U+1E1C-1E1D,U+1E20-1E21,U+1E24-1E25,U+1E2A-1E2B,U+1E2E-1E2F,U+1E36-1E37,U+1E3A-1E3B,U+1E42-1E49,U+1E4C-1E53,U+1E5A-1E5B,U+1E5E-1E69,U+1E6C-1E6F,U+1E78-1E7B,U+1E80-1E85,U+1E8E-1E93,U+1E97,U+1E9E,U+2074,U+20A1,U+20A3-20A4,U+20A6-20A7,U+20A9,U+20AD-20AE,U+20B1-20B2,U+20B4-20B5,U+20B8-20BA,U+20BC-20BD,U+2113;
}
@font-face{
  font-family:'Vollkorn';font-style:normal;font-weight:700;font-display:swap;
  src:url('assets/fonts/vollkorn-700-vietnamese.woff2') format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EF2-1EF9,U+20AB;
}
@font-face{
  font-family:'Vollkorn';font-style:italic;font-weight:500;font-display:swap;
  src:url('assets/fonts/vollkorn-500-italic.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:'Vollkorn';font-style:italic;font-weight:500;font-display:swap;
  src:url('assets/fonts/vollkorn-500-italic-ext.woff2') format('woff2');
  unicode-range:U+0100-0101,U+0104-010F,U+0112-0127,U+012A-0130,U+0132-0151,U+0154-0167,U+016A-017F,U+018E-018F,U+0192,U+019D,U+01B7,U+01C4-01DD,U+01E4-01EB,U+01EE-01EF,U+01F1-01F3,U+01FA-021F,U+0228-022D,U+0230-0233,U+0237,U+0258-0259,U+0272,U+0292,U+02B9-02BA,U+02BE-02BF,U+02C7-02CC,U+02DD,U+1E08-1E09,U+1E0C-1E11,U+1E14-1E17,U+1E1C-1E1D,U+1E20-1E21,U+1E24-1E25,U+1E2A-1E2B,U+1E2E-1E2F,U+1E36-1E37,U+1E3A-1E3B,U+1E42-1E49,U+1E4C-1E53,U+1E5A-1E5B,U+1E5E-1E69,U+1E6C-1E6F,U+1E78-1E7B,U+1E80-1E85,U+1E8E-1E93,U+1E97,U+1E9E,U+2074,U+20A1,U+20A3-20A4,U+20A6-20A7,U+20A9,U+20AD-20AE,U+20B1-20B2,U+20B4-20B5,U+20B8-20BA,U+20BC-20BD,U+2113;
}
@font-face{
  font-family:'Vollkorn';font-style:italic;font-weight:500;font-display:swap;
  src:url('assets/fonts/vollkorn-500-italic-vietnamese.woff2') format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EF2-1EF9,U+20AB;
}
@font-face{
  font-family:'Work Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/worksans-400.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:'Work Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/worksans-400-ext.woff2') format('woff2');
  unicode-range:U+0100-0101,U+0104-010F,U+0112-0127,U+012A-0130,U+0132-0148,U+014A-0151,U+0154-0167,U+016A-017F,U+018E-018F,U+0192,U+01C4-01CC,U+01DD,U+01E6-01E7,U+01EA-01EB,U+01F1-01F3,U+01FA-021B,U+022A-022D,U+0230-0233,U+0237,U+0241-0242,U+0259,U+02B9-02BA,U+02BE-02BF,U+02C7-02CC,U+02DD,U+1E08-1E09,U+1E0C-1E0F,U+1E14-1E17,U+1E1C-1E1D,U+1E20-1E21,U+1E24-1E25,U+1E2A-1E2B,U+1E2E-1E2F,U+1E36-1E37,U+1E3A-1E3B,U+1E42-1E49,U+1E4C-1E53,U+1E5A-1E5B,U+1E5E-1E69,U+1E6C-1E6F,U+1E78-1E7B,U+1E80-1E85,U+1E8E-1E8F,U+1E92-1E93,U+1E97,U+1E9E,U+2074,U+20A1,U+20A3-20A4,U+20A6-20A7,U+20A9,U+20AD,U+20B1-20B2,U+20B5,U+20B9-20BA,U+20BC-20BD,U+2113;
}
@font-face{
  font-family:'Work Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/worksans-400-vietnamese.woff2') format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EF2-1EF9,U+20AB;
}
@font-face{
  font-family:'Work Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('assets/fonts/worksans-600.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:'Work Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('assets/fonts/worksans-600-ext.woff2') format('woff2');
  unicode-range:U+0100-0101,U+0104-010F,U+0112-0127,U+012A-0130,U+0132-0148,U+014A-0151,U+0154-0167,U+016A-017F,U+018E-018F,U+0192,U+01C4-01CC,U+01DD,U+01E6-01E7,U+01EA-01EB,U+01F1-01F3,U+01FA-021B,U+022A-022D,U+0230-0233,U+0237,U+0241-0242,U+0259,U+02B9-02BA,U+02BE-02BF,U+02C7-02CC,U+02DD,U+1E08-1E09,U+1E0C-1E0F,U+1E14-1E17,U+1E1C-1E1D,U+1E20-1E21,U+1E24-1E25,U+1E2A-1E2B,U+1E2E-1E2F,U+1E36-1E37,U+1E3A-1E3B,U+1E42-1E49,U+1E4C-1E53,U+1E5A-1E5B,U+1E5E-1E69,U+1E6C-1E6F,U+1E78-1E7B,U+1E80-1E85,U+1E8E-1E8F,U+1E92-1E93,U+1E97,U+1E9E,U+2074,U+20A1,U+20A3-20A4,U+20A6-20A7,U+20A9,U+20AD,U+20B1-20B2,U+20B5,U+20B9-20BA,U+20BC-20BD,U+2113;
}
@font-face{
  font-family:'Work Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('assets/fonts/worksans-600-vietnamese.woff2') format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EF2-1EF9,U+20AB;
}
@font-face{
  font-family:'Work Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('assets/fonts/worksans-700.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:'Work Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('assets/fonts/worksans-700-ext.woff2') format('woff2');
  unicode-range:U+0100-0101,U+0104-010F,U+0112-0127,U+012A-0130,U+0132-0148,U+014A-0151,U+0154-0167,U+016A-017F,U+018E-018F,U+0192,U+01C4-01CC,U+01DD,U+01E6-01E7,U+01EA-01EB,U+01F1-01F3,U+01FA-021B,U+022A-022D,U+0230-0233,U+0237,U+0241-0242,U+0259,U+02B9-02BA,U+02BE-02BF,U+02C7-02CC,U+02DD,U+1E08-1E09,U+1E0C-1E0F,U+1E14-1E17,U+1E1C-1E1D,U+1E20-1E21,U+1E24-1E25,U+1E2A-1E2B,U+1E2E-1E2F,U+1E36-1E37,U+1E3A-1E3B,U+1E42-1E49,U+1E4C-1E53,U+1E5A-1E5B,U+1E5E-1E69,U+1E6C-1E6F,U+1E78-1E7B,U+1E80-1E85,U+1E8E-1E8F,U+1E92-1E93,U+1E97,U+1E9E,U+2074,U+20A1,U+20A3-20A4,U+20A6-20A7,U+20A9,U+20AD,U+20B1-20B2,U+20B5,U+20B9-20BA,U+20BC-20BD,U+2113;
}
@font-face{
  font-family:'Work Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('assets/fonts/worksans-700-vietnamese.woff2') format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EF2-1EF9,U+20AB;
}
/* Inter, the text face of the first theme (#488): one variable file per
   subset, so 400, 500, 600 and 700 are all there. Chosen by the
   setting layout.sans of the design area. */
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('assets/fonts/inter.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:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('assets/fonts/inter-ext.woff2') format('woff2');
  unicode-range:U+0100-0130,U+0132-0148,U+014A-0151,U+0154-01C3,U+01C5-0254,U+0256-027B,U+027E-0284,U+0286-0290,U+0292-02A4,U+02A6-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+1D00,U+1D0D,U+1D1B,U+1D43,U+1D47-1D49,U+1D4D,U+1D4F-1D50,U+1D52,U+1D56-1D58,U+1D5B,U+1D62-1D65,U+1D9C,U+1DA0,U+1DBB,U+1DBF,U+1E00-1E9B,U+1E9D-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20AF,U+20B1-20B5,U+20B8-20BA,U+20BC-20BF,U+2113,U+2C7C,U+2C7F,U+A7FF;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('assets/fonts/inter-vietnamese.woff2') format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+1EA0-1EF9,U+20AB;
}
/* The display face of the approved dark homepage: a high-contrast
   serif for the headings, chosen under Gestaltung → Schrift (#752). */
@font-face{
  font-family:'Playfair Display';font-style:normal;font-weight:600;font-display:swap;
  src:url('assets/fonts/playfairdisplay-600.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:600;font-display:swap;
  src:url('assets/fonts/playfairdisplay-600-ext.woff2') format('woff2');
  unicode-range:U+0100-0101,U+0104-010F,U+0112-0127,U+012A-0130,U+0132-0151,U+0154-0167,U+016A-017F,U+018F,U+0192,U+01B7,U+01CD-01CE,U+01D3-01D4,U+01E4-01E9,U+01EE-01EF,U+01F4-01F5,U+01FE-01FF,U+0218-021B,U+021E-021F,U+0237,U+1E80-1E85,U+1E9E,U+2190,U+2192;
}
@font-face{
  font-family:'Playfair Display';font-style:normal;font-weight:600;font-display:swap;
  src:url('assets/fonts/playfairdisplay-600-vietnamese.woff2') format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9;
}
@font-face{
  font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;
  src:url('assets/fonts/playfairdisplay-700.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('assets/fonts/playfairdisplay-700-ext.woff2') format('woff2');
  unicode-range:U+0100-0101,U+0104-010F,U+0112-0127,U+012A-0130,U+0132-0151,U+0154-0167,U+016A-017F,U+018F,U+0192,U+01B7,U+01CD-01CE,U+01D3-01D4,U+01E4-01E9,U+01EE-01EF,U+01F4-01F5,U+01FE-01FF,U+0218-021B,U+021E-021F,U+0237,U+1E80-1E85,U+1E9E,U+2190,U+2192;
}
@font-face{
  font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;
  src:url('assets/fonts/playfairdisplay-700-vietnamese.woff2') format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9;
}
@font-face{
  font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('assets/fonts/jetbrainsmono-500.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('assets/fonts/jetbrainsmono-500-ext.woff2') format('woff2');
  unicode-range:U+0100-0101,U+0104-010F,U+0112-0127,U+012A-0130,U+0134-0151,U+0154-0167,U+016A-017F,U+018F,U+0192,U+01CD-01CE,U+01E6-01E7,U+01EA-01EB,U+01F4-01F5,U+01FC-01FF,U+0218-021B,U+0232-0233,U+0237,U+0259,U+02B9-02BA,U+02C7,U+02C9,U+02DD,U+02F3,U+02F7,U+1E80-1E85,U+1E9E,U+2074,U+20AE,U+20BD,U+20BF,U+2113;
}
@font-face{
  font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('assets/fonts/jetbrainsmono-500-vietnamese.woff2') format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EF2-1EF9,U+20AB;
}
@font-face{
  font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;
  src:url('assets/fonts/jetbrainsmono-700.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:700;font-display:swap;
  src:url('assets/fonts/jetbrainsmono-700-ext.woff2') format('woff2');
  unicode-range:U+0100-0101,U+0104-010F,U+0112-0127,U+012A-0130,U+0134-0151,U+0154-0167,U+016A-017F,U+018F,U+0192,U+01CD-01CE,U+01E6-01E7,U+01EA-01EB,U+01F4-01F5,U+01FC-01FF,U+0218-021B,U+0232-0233,U+0237,U+0259,U+02B9-02BA,U+02C7,U+02C9,U+02DD,U+02F3,U+02F7,U+1E80-1E85,U+1E9E,U+2074,U+20AE,U+20BD,U+20BF,U+2113;
}
@font-face{
  font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;
  src:url('assets/fonts/jetbrainsmono-700-vietnamese.woff2') format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EF2-1EF9,U+20AB;
}

:root{
    /* The base palette — deliberately quiet, and tied to no particular
       deployment. Colours of your own are entered in the administration
       area under appearance; the head of the page writes a small <style>
       block out of them that overrides these values. */
    --paper:#F5F6F8;
    --paper-2:#EAECF0;
    --ink:#171A1F;
    --ink-soft:#5A6270;
    --pine:#2F4A66;        /* dark primary — buttons, links */
    --pine-2:#3E6390;      /* primary */
    --brick:#8A4B2A;       /* accent text, dates for instance */
    --brick-2:#3E6390;
    --rye:#8A4B2A;
    --rye-bright:#9EC2E8;  /* light accent for dark surfaces */
    --sky:#646C7A;         /* muted, past events for instance */
    --card:#FFFFFF;
    --bar:#F5F6F8;
    --bar-rgb:245,246,248;
    --seal:#F5F6F8;

    /* The same ten colours as channels, for translucent shades:
       rgba() cannot be handed a property that holds "#3E6390". The
       program's style block writes these alongside every colour that
       was changed, so a see-through surface follows the template
       instead of keeping the colour this file was written for. */
    --paper-rgb:245,246,248;
    --paper-2-rgb:234,236,240;
    --ink-rgb:23,26,31;
    --ink-soft-rgb:90,98,112;
    --pine-rgb:47,74,102;
    --pine-2-rgb:62,99,144;
    --brick-rgb:138,75,42;
    --rye-bright-rgb:158,194,232;
    --sky-rgb:100,108,122;
    --card-rgb:255,255,255;

    /* The states. Until 08.10.2026 the focus outline was written into
       five rules of its own and the error colour was kept out of the
       template on purpose, with the sentence that red means error in
       every design. Measured against the dark ground the first theme
       asks for, #17172F, that red reaches a contrast of 2.72 — below
       the 3:1 a border needs. A sentence that tells somebody what went
       wrong, in a colour they cannot read, is the one place a fixed
       value cannot be defended (#468, #488). */
    /* Surface and writing of a field, as a pair. Until 08.10.2026 the
       surface stood fixed here and the writing came from `--ink`, so a
       dark theme put light writing on a white field — contrast 1.19,
       which is not low but absent: whoever typed a password could not
       see what they typed (#519).
       `--field-hint` is the placeholder. Named rather than left to the
       browser, because a browser's own is light grey and a check
       cannot measure what it does not know. Dark enough for 4.5:1 on
       the field's own surface — 5.02 as shipped. */
    --field-bg:#FFFFFF;
    --field-ink:#17172F;
    --field-hint:#6E6E7C;
    --focus:#3E6390;
    --focus-rgb:62,99,144;
    --active:#2F4A66;
    --error:#A8391A;
    --error-rgb:168,57,26;
    /* The writing on a filled button. White as before; a theme with a
       light fill sets it dark, or the writing stands at 2.3:1 (#759). */
    --on-primary:#FFFFFF;
    /* Hover and pressed have fills of their own, so each has its writing:
       a light fill at rest and a dark one on hover need opposite writing.
       The page head sets all three wherever white cannot be read (#766). */
    --on-primary-hover:#FFFFFF;
    --on-active:#FFFFFF;

    --line: rgba(var(--ink-rgb),0.15);
    --radius: 14px;

    /* The measurements of the page. They are declared here and
       read below, so that the administration can override a
       single one of them in a style block of its own — see
       src/Design/Scheme.php, which names the property for every
       field, and tests/phpunit/DesignReachesTheStylesheetTest.php,
       which insists that the value here is the one the program
       ships. Where the two disagree, the first save changes the
       look for no reason — Ausgabe 283. */
    --focus-width: 3px;
    --focus-offset: 3px;
    --curves-strength: 100;
    --curves-shift: 50;
    --wrap: 1100px;
    --section-gap: 70px;
    --text-size: 18px;
    --stage-height: 300px;
    --logo-size: 190px;
    --brand-name-size: 40px;
    --brand-tagline-size: 11px;
    --brand-gap: 16px;
    --shadow: 0 1px 2px rgba(var(--ink-rgb),.06), 0 12px 32px -16px rgba(var(--ink-rgb),.28);
    --shadow-lg: 0 2px 4px rgba(var(--ink-rgb),.05), 0 24px 60px -24px rgba(var(--ink-rgb),.36);

    /* The three type roles. Declared here and nowhere else, so that a
       stack is written once and read 54 times — and so that the names
       above the @font-face rules and the names used below cannot drift
       apart.

       Every chain ends in a built-in genus. That is the point of it: a
       font file that is still loading, that a browser refuses or that
       somebody forgot to copy along leaves the page in a font of the
       device rather than in none at all. Whoever adds a role adds the
       genus with it — tests/phpunit/StylesheetTest.php insists on it. */
    --serif:'Vollkorn', Georgia, 'Times New Roman', serif;
    --sans:'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  }
  *{box-sizing:border-box;}
  /* Hidden is hidden. A rule that sets display — `.btn` is inline-flex —
     beats the browser's own [hidden]{display:none}, so a hidden button
     stayed on the screen (vvv-cms#635). One rule here instead of one
     per element. */
  [hidden]{display:none !important;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--sans);
    font-size:var(--text-size);
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
  }
  /* Soft, overlapping fields of colour — modern, but quiet enough to read on */
  body::before{
    content:"";
    position:fixed;inset:-10%;
    pointer-events:none;
    z-index:0;
    background:
      radial-gradient(48% 42% at 8% 4%, rgba(var(--pine-2-rgb),0.20), transparent 68%),
      radial-gradient(42% 38% at 96% 2%, rgba(var(--rye-bright-rgb),0.26), transparent 66%),
      radial-gradient(46% 44% at 88% 62%, rgba(var(--pine-rgb),0.16), transparent 68%),
      radial-gradient(52% 40% at 18% 92%, rgba(var(--pine-2-rgb),0.15), transparent 70%);
    filter:blur(20px);
  }
  body::after{
    content:"";
    position:fixed;inset:0;
    pointer-events:none;z-index:0;opacity:.22;
    background-image:radial-gradient(rgba(var(--ink-rgb),0.20) 0.5px, transparent 0.5px);
    background-size:4px 4px;
  }
  h1,h2,h3,.eyebrow{font-family:var(--serif);}
  a{color:var(--pine);}
  img{max-width:100%;display:block;}
  .wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px;position:relative;z-index:1;}
  .eyebrow{
    font-family:var(--mono);
    font-size:13.5px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--brick);
    font-weight:700;
  }
  button{font-family:inherit;cursor:pointer;}
  :focus-visible{outline:var(--focus-width) solid var(--focus);outline-offset:var(--focus-offset);}

  /* ---------- HEADER ---------- */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(var(--bar-rgb),0.96);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--line);
  }
  .nav{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:16px 24px;
    /* The width of the page, also for the bar: at 1100 fixed, a width
       entered under Gestaltung moved everything but the header (#750). */
    max-width:var(--wrap);margin:0 auto;
    position:relative;
  }
  .brand{
    display:flex;align-items:center;gap:12px;min-width:0;
    font-family:var(--serif);color:var(--ink);text-decoration:none;
  }
  /* 44px at the shipped 190px logo; the slider "layout.logo" scales it,
     capped so the bar cannot grow past its row (vvv-cms#864). */
  .brand .mark{
    height:min(calc(var(--logo-size) * .2316),72px);width:min(calc(var(--logo-size) * .2316),72px);
    object-fit:contain;flex-shrink:0;
  }
  /* The name stands beside it as real type — in the shrunken logo the
     lettering inside the ribbons would no longer be legible.
     One line, no wrapping. */
  .brand-label{
    font-weight:700;font-size:20px;letter-spacing:-0.005em;
    white-space:nowrap;line-height:1.15;
  }
  .nav-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;}
  /* Name and the line under it, one above the other (#750). */
  .brand-words{display:flex;flex-direction:column;min-width:0;}
  .brand-tagline{
    margin-top:6px;font-family:var(--sans);font-size:11px;line-height:1;font-weight:500;
    letter-spacing:.3em;text-transform:uppercase;color:var(--sky);white-space:nowrap;
  }
  /* A symbol before the word of a header button. */
  .nav-actions .btn .icon{width:18px;height:18px;}

  /* The padlock button that leads to the sign-in */
  .icon-btn{
    display:grid;place-items:center;
    width:42px;height:42px;border-radius:10px;
    background:var(--card);border:1px solid var(--line);
    color:var(--ink-soft);box-shadow:var(--shadow);
    transition:background .18s ease, color .18s ease, border-color .18s ease;
  }
  .icon-btn svg{
    width:19px;height:19px;fill:none;stroke:currentColor;
    stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  }
  .icon-btn:hover{background:var(--pine);color:var(--on-primary);border-color:var(--pine);}
  .icon-btn.is-open{background:var(--pine);color:var(--on-primary);border-color:var(--pine);}

  /* ---------- The place in the bar that belongs to a module ----------

     A module hands over a picture, marks and a menu; what they look
     like is the core's. The one measurement that decides whether this
     is right is the height of the bar: the picture and the marks must
     not raise it, must not push the navigation and must not cover it —
     also on a telephone and also with both marks showing. That is why
     the face is the size of the button's own symbol and the marks sit
     on top of it rather than beside it (#576). */
  .account-place{position:relative;display:flex;align-items:center;}
  /* The button that opens the menu looks like the other icon buttons;
     this class is what tells it apart from the plain link. */
  .account-open{cursor:pointer;}
  .account-face{
    width:28px;height:28px;border-radius:50%;
    /* Fitted, not stretched: a portrait squeezed into a circle is the
       one thing the order names twice. */
    object-fit:cover;display:block;
  }
  .account-badge{
    position:absolute;top:-3px;
    display:grid;place-items:center;
    min-width:16px;height:16px;padding:0 3px;
    border-radius:9px;
    font-size:11px;font-weight:700;line-height:1;
    text-decoration:none;
    background:var(--pine);color:var(--on-primary);border:2px solid var(--card);
  }
  /* Two marks, and they must be told apart and pressed apart. The
     second sits on the other corner rather than behind the first. */
  .account-badge:first-of-type{right:-4px;}
  .account-badge:nth-of-type(2){right:auto;left:-4px;background:var(--brick);}
  .badge-count{pointer-events:none;}
  .account-menu{
    position:absolute;top:calc(100% + 8px);right:0;z-index:40;
    min-width:208px;margin:0;padding:6px;
    list-style:none;
    background:var(--card);border:1px solid var(--line);border-radius:12px;
    box-shadow:var(--shadow);
  }
  .account-menu li{list-style:none;margin:0;}
  .account-menu a,.account-off{
    display:flex;justify-content:space-between;gap:10px;
    padding:9px 10px;border-radius:8px;
    text-decoration:none;color:var(--ink);font-weight:600;font-size:15px;
  }
  .account-menu a:hover{background:var(--paper-2);}
  .account-off{color:var(--ink-soft);opacity:0.6;}
  .account-menu .badge-count{background:var(--pine);color:var(--on-primary);
    min-width:20px;height:18px;border-radius:9px;display:grid;
    place-items:center;font-size:11px;}
  @media (max-width:640px){
    /* The bar is shorter here, and the face follows the button rather
       than the other way round. */
    .account-face{width:24px;height:24px;}
    .account-menu{right:-6px;min-width:184px;}
  }
  .links{
    display:flex;gap:26px;margin:0;padding:0;
    list-style:none;
  }
  .links li{list-style:none;margin:0;padding:0;}
  .links a{
    text-decoration:none;color:var(--ink-soft);font-weight:600;font-size:16px;
    padding:6px 2px;border-bottom:2px solid transparent;
  }
  .links a:hover{color:var(--brick);border-color:var(--rye);}
  .nav-toggle{
    display:none;background:var(--card);border:1px solid var(--line);border-radius:9px;
    padding:9px 12px;font-size:17px;line-height:1;color:var(--ink);
  }
  /* **The bars are drawn, not typed.** The button printed the character
     U+2630, and a machine without a font that holds it showed a button
     that looked empty although everything about it was right (#860).
     Three strokes in the colour of the text need no font; the cross takes
     their place while the menu is open. */
  .nav-toggle svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;
                  stroke-width:2;stroke-linecap:round;pointer-events:none;}
  .nav-toggle .nav-cross,
  .nav-toggle[aria-expanded="true"] .nav-bars{display:none;}
  .nav-toggle[aria-expanded="true"] .nav-cross{display:inline;}
  @media (max-width:860px){
    .links{
      position:absolute;top:100%;left:0;right:0;
      background:var(--paper);flex-direction:column;gap:0;
      border-bottom:1px solid var(--line);display:none;
      padding:6px 24px 16px;box-shadow:var(--shadow);
      list-style:none;
    }
    .links.open{display:flex;}
    .links a{padding:14px 0;border-bottom:1px solid var(--line);display:block;}
    /* **Forty-four points, not thirty-seven.** Measured on 05.10.2026
       at 390 points: the button that opens the menu was 41x37 — under
       what a finger reliably finds, and on a phone it is the only way
       into the menu at all (#237). */
    .nav-toggle{display:flex;align-items:center;justify-content:center;
                min-width:44px;min-height:44px;}
  }
  /* The line under the name is for the wide bar: beside a menu folded
     into its button it would push the buttons off the screen. */
  @media (max-width:1280px){
    .brand-tagline{display:none;}
  }
  /* **Two header buttons and a name do not fit beside each other on a
     telephone.** Measured at 390 points on 14.10.2026: the page was 450
     wide, and the second button stood half outside. The buttons get a
     row of their own under the name instead (#750). */
  @media (max-width:560px){
    .nav{flex-wrap:wrap;}
    .nav-actions{display:contents;}
    .nav-actions > .btn{order:5;flex:1 1 auto;justify-content:center;white-space:nowrap;padding:9px 10px;font-size:14px;}
    /* The break between the two rows, only where there are buttons. */
    .nav:has(.nav-actions > .btn)::after{content:"";order:4;flex-basis:100%;}
    .brand{margin-right:auto;}
  }
  @media (max-width:560px){
    .brand-label{font-size:17px;}
    .brand .mark{height:38px;width:38px;}
    /* The way to the front page, and it was 36 points tall. */
    .brand{min-height:44px;}
  }
  @media (max-width:430px){
    .nav{padding:10px 14px;gap:8px;}
    .brand{gap:9px;}
    .brand .mark{height:36px;width:36px;}
    .brand-label{font-size:15px;}
    /* The addition is dropped so that the name is not cut off */
    .brand-suffix{display:none;}
    .btn-sm{padding:9px 12px;font-size:14px;}
    .icon-btn{width:38px;height:38px;}
  }
  @media (max-width:370px){
    /* Too little room for logo, name and buttons — the logo carries the
       name anyway, so the type is dropped here. */
    .brand-label{display:none;}
    .brand .mark{height:40px;width:40px;}
  }

  /* ---------- HERO ---------- */
  .stage{
    position:relative;
    padding:56px 0 72px;
    overflow:hidden;
  }
  .stage-frame{
    position:relative;
    border-radius:26px;
    overflow:hidden;
    background:
      radial-gradient(900px 520px at 88% -10%, rgba(var(--rye-bright-rgb),0.28), transparent 60%),
      radial-gradient(700px 500px at 5% 110%, rgba(var(--pine-2-rgb),0.32), transparent 62%),
      /* One colour, darkened twice — not a run from the bright primary
         all the way to the text colour. That span crosses two hues and
         shows as a visible gradient across the panel; the panel is
         meant to read as one surface. */
      linear-gradient(155deg,
        var(--pine) 0%,
        color-mix(in srgb, var(--pine) 72%, #000) 48%,
        color-mix(in srgb, var(--pine) 47%, #000) 100%);
    box-shadow: var(--shadow-lg);
  }
  .stage-frame::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background-image:radial-gradient(rgba(255,255,255,0.10) 0.5px, transparent 0.5px);
    background-size:5px 5px;
    opacity:.5;
  }
  .stage-inner{padding:56px 46px 52px;position:relative;z-index:2;
    min-height:var(--stage-height);display:flex;flex-direction:column;justify-content:center;}
  /* The logo on a light surface — only there does the lettering inside
     the ribbons keep enough contrast. Straight on the dark ground it
     would disappear. */
  .stage-logo{
    position:absolute;top:34px;right:38px;width:var(--logo-size);z-index:3;
    background:var(--seal);
    padding:16px 18px;
    border-radius:18px;
    box-shadow:0 12px 34px -12px rgba(0,0,0,.45);
    pointer-events:none;
  }
  .stage-head{max-width:640px;margin-bottom:30px;}
  .stage-head .eyebrow{color:var(--rye-bright);}
  .stage-head h1{
    color:var(--paper);font-size:clamp(32px,5vw,52px);line-height:1.08;margin:12px 0 16px;
    letter-spacing:-0.015em;
  }
  .stage-head p{color:rgba(var(--paper-rgb),0.92);font-size:19px;max-width:540px;}
  .btn{
    display:inline-flex;align-items:center;gap:8px;
    padding:12px 22px;border-radius:10px;border:1px solid transparent;
    font-weight:700;font-size:16px;text-decoration:none;letter-spacing:.005em;
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  }
  /* A label longer than the screen breaks instead of dragging the page
     sideways — a button in a text is written by whoever writes the
     text, not by the design (#551). */
  .btn{max-width:100%;overflow-wrap:anywhere;}
  .btn:hover{transform:translateY(-2px);}
  /* Pressed. There was no rule for it at all — a button that does not
     answer the moment it is hit feels broken on a touch screen, and the
     colour for it belongs to whoever runs the site (#468). */
  .btn:active{transform:translateY(0);}
  .btn-primary:active,.btn-outline:active{background:var(--active);color:var(--on-active);border-color:var(--active);}
  .btn-primary{background:var(--pine);color:var(--on-primary);border-color:transparent;box-shadow:0 6px 18px -8px rgba(var(--pine-rgb),.75);}
  .btn-primary:hover{background:var(--pine-2);color:var(--on-primary-hover);box-shadow:0 10px 24px -8px rgba(var(--pine-2-rgb),.85);}
  .btn-ghost{background:rgba(255,255,255,0.14);color:var(--paper);border-color:rgba(255,255,255,0.42);backdrop-filter:blur(6px);}
  .btn-ghost:hover{background:rgba(255,255,255,0.14);}
  .btn-outline{background:var(--card);color:var(--pine);border-color:var(--line);box-shadow:var(--shadow);}
  .btn-outline:hover{background:var(--pine);color:var(--on-primary);border-color:var(--pine);}
  /* The two ways of the hero are pills of the reference's height (#759). */
  .hero .btn{min-height:50px;padding:0 28px;border-radius:999px;font-size:18px;font-weight:600;justify-content:center;}
  .btn-sm{padding:10px 16px;font-size:15px;border-radius:9px;}
  /* A link shown as a card, chosen in the text editor (#551). The focus
     ring is the one every link gets. */
  .link-card{
    display:block;max-width:100%;padding:16px 20px;border-radius:var(--radius);
    background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);
    color:var(--ink);font-weight:600;text-decoration:none;overflow-wrap:anywhere;
  }
  .link-card:hover{border-color:var(--pine);color:var(--pine);}
  @media (max-width:600px){
    .stage{padding:28px 0 44px;}
    .stage-frame{border-radius:20px;}
    .stage-inner{padding:32px 22px 34px;}
    .stage-logo{position:static;display:block;width:170px;margin:0 0 20px;padding:12px 14px;border-radius:14px;}
    .stage-head{margin-bottom:24px;}
    .cta-row{flex-direction:column;gap:10px;margin-top:24px;}
    .cta-row .btn{width:100%;justify-content:center;}
    section{padding:48px 0;}
    .wrap{padding:0 18px;}
  }
  .lock-hint{
    display:inline-flex;align-items:center;gap:6px;font-size:15.5px;color:var(--ink-soft);
    background:var(--card);border:1px solid var(--line);padding:10px 16px;border-radius:10px;
    box-shadow:var(--shadow);
  }
  .lock-hint .link-btn{font-size:15.5px;}

  .pin-grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:16px;
  }
  .pin-card{
    background:rgba(255,255,255,0.12);
    border:1px solid rgba(255,255,255,0.24);
    backdrop-filter:blur(10px);
    border-radius:16px;
    padding:22px 20px;
    position:relative;
    transition:transform .2s ease, background .2s ease;
  }
  .pin-card:hover{transform:translateY(-3px);background:rgba(255,255,255,0.18);}
  /* The whole tile is a link to the event */
  a.pin-card{display:block;text-decoration:none;cursor:pointer;}
  a.pin-card:hover{background:rgba(255,255,255,0.20);}
  .pin-card .pin-body{display:block;}
  .pin-card .meta{display:flex;}
  .pin-place{display:block;font-size:15.5px;color:rgba(var(--paper-rgb),0.85);}
  /* The arrow at the top right shows that the tile can be clicked */
  a.pin-card::after{
    content:"→";
    position:absolute;top:14px;right:16px;
    font-size:19px;color:var(--rye-bright);
    opacity:0;transform:translateX(-4px);
    transition:opacity .2s ease, transform .2s ease;
  }
  a.pin-card.has-image::after{
    top:auto;bottom:16px;right:18px;
  }
  a.pin-card:hover::after, a.pin-card:focus-visible::after{opacity:1;transform:translateX(0);}
  .pin-card .eyebrow{font-size:12px;color:var(--rye-bright);}
  .pin-card h2, .pin-card h3{
    font-size:20px;margin:8px 0 8px;line-height:1.3;color:var(--paper);
    font-family:var(--serif);font-weight:700;
  }
  .pin-card .meta{
    font-family:var(--mono);font-size:14px;color:var(--rye-bright);
    display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px;font-weight:700;
  }
  .pin-card p{font-size:15.5px;color:rgba(var(--paper-rgb),0.85);margin:0;}
  .pin-empty{
    background:rgba(255,255,255,0.08);border:1px dashed rgba(255,255,255,0.35);
    border-radius:16px;padding:26px;color:rgba(var(--paper-rgb),0.9);font-size:16px;text-align:center;
  }

  /* ---------- SECTIONS ---------- */
  section{padding:var(--section-gap) 0;}
  /* **The gap of a section is counted once.** `index.php` wraps every
     box of the front page in `<section class="box">`, so a block that
     is itself a section — `.icon-cards` is one — got the gap of the box
     and its own on top. Reported on 08.10.2026 from a front page where
     the gaps between hero, features and cards came out two and three
     times.
     The box owns it; anything inside one adds none. Steered here and
     not per block, because the next block would need its own exception
     and the one after that would not get it. The value stays the
     operator's field — a number written in here would ignore
     „Abstand der Abschnitte" without saying so. */
  .box section{padding-block:0;margin-block:0;}

  /* A page head with nothing between it and the first section needs no
     full gap. Where a module contributes a block at that place — the
     weather tile above the events, for instance — the selector does not
     match and the rhythm stays as it was. Without one, 26px of head
     padding met 70px of section padding and left a hole where the block
     used to be; reported on the first customer's site after the weather
     tile was switched off (#466). */
  .page-head + section{padding-top:calc(var(--section-gap) / 2);}
  .section-head{max-width:600px;margin-bottom:36px;}
  .section-head h2{font-size:clamp(26px,3.4vw,34px);margin:8px 0 10px;color:var(--ink);}
  .section-head p{color:var(--ink-soft);font-size:17.5px;}
  .divider{
    height:1px;background:linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent);
    margin:0;
  }

  /* About */
  .about-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:start;}
  @media (max-width:760px){.about-grid{grid-template-columns:1fr;}}
  .about-grid p{color:var(--ink-soft);font-size:17.5px;margin-bottom:16px;}
  .people-list{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px 26px;box-shadow:var(--shadow);}
  .people-list h3{margin:0 0 14px;font-size:16px;font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--pine);}
  .people-list ul{list-style:none;margin:0;padding:0;}
  .people-list li{
    padding:12px 0;border-top:1px solid var(--line);font-weight:600;font-size:16.5px;
    display:flex;justify-content:space-between;gap:10px;
  }
  .people-list li span{font-weight:400;color:var(--ink-soft);font-size:15px;}
  .people-list li:first-child{border-top:none;}
  @media (max-width:560px){
    .events-toolbar{align-items:stretch;}
    #eventAddControls, #photoAddControls{width:100%;}
    #eventAddControls .btn, #photoAddControls .btn, .lock-hint{width:100%;justify-content:center;box-sizing:border-box;}
  }
  .event-card{
    background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
    padding:22px;position:relative;box-shadow:var(--shadow);
    transition:transform .2s ease, box-shadow .2s ease;
    overflow:hidden;
  }
  .event-card::before{
    content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--pine-2);
  }
  .event-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);}
  .event-card.is-past{opacity:.92;}
  .event-card.is-past::before{background:var(--sky);}
  .event-card .meta{font-family:var(--mono);font-size:14px;color:var(--brick);font-weight:700;margin-bottom:8px;}
  .event-card.is-past .meta{color:var(--sky);}
  .event-card h3{margin:0 0 8px;font-size:20px;}
  .event-card .loc{font-size:15.5px;color:var(--ink-soft);margin-bottom:8px;}
  .event-card p.desc{font-size:16px;color:var(--ink-soft);margin:0 0 10px;}
  .event-card .row-actions{display:flex;gap:14px;margin-top:10px;}
  .link-btn{
    background:none;border:none;font-size:15px;font-weight:700;color:var(--pine);padding:0;
    text-decoration:underline;text-underline-offset:3px;
  }
  .link-btn.danger{color:var(--brick);}
  .badge-demo{
    font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
    background:rgba(var(--pine-2-rgb),.16);color:var(--pine);padding:3px 8px;border-radius:20px;margin-left:8px;font-weight:700;vertical-align:middle;
  }

  /* Add forms */
  .panel{
    background:var(--card);border:1px solid var(--line);border-radius:18px;
    padding:28px;margin-top:22px;box-shadow:var(--shadow-lg);
  }
  .panel h3{margin:0 0 4px;font-size:19px;}
  .panel .hint{font-size:15.5px;color:var(--ink-soft);margin:0 0 20px;}
  .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
  .form-grid .full{grid-column:1/-1;}
  @media (max-width:600px){.form-grid{grid-template-columns:1fr;}}
  label{display:block;font-size:14px;font-weight:700;color:var(--ink-soft);margin-bottom:6px;font-family:var(--mono);letter-spacing:.03em;}
  input[type=text],input[type=date],input[type=time],input[type=password],
  input[type=email],input[type=tel],input[type=url],input[type=number],
  input[type=search],select,textarea,input[type=file]{
    width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;
    font-family:var(--sans);font-size:17px;
    background:var(--field-bg);color:var(--field-ink);
    /* The caret takes the writing of the field and not of the page.
       Without this it is the page's colour on the field's surface,
       which on a dark theme is a cursor nobody can see. */
    caret-color:var(--field-ink);
    transition:border-color .15s ease, box-shadow .15s ease;
  }
  /* An `option` inherits from the page and not from its `select` in
     several browsers, so it is told. Both halves, because a surface
     without its writing is the mistake this came out of. */
  select option{background:var(--field-bg);color:var(--field-ink);}
  /* The placeholder: damped and still readable, measured on the
     field's surface. A placeholder nobody can read is an empty field
     with a secret. */
  input::placeholder,textarea::placeholder{color:var(--field-hint);opacity:1;}
  input:focus,select:focus,textarea:focus{
    outline:none;border-color:var(--focus);
    box-shadow:0 0 0 var(--focus-width) rgba(var(--focus-rgb),.25);
  }
  textarea{resize:vertical;min-height:70px;}
  .panel-actions{display:flex;gap:14px;margin-top:20px;align-items:center;flex-wrap:wrap;}
  .link-btn{padding:6px 0;}

  /* Sharing */
  .share-btn{
    display:inline-flex;align-items:center;gap:6px;
    background:none;border:none;padding:6px 0;
    font-size:15px;font-weight:700;color:var(--pine);
    text-decoration:underline;text-underline-offset:3px;
  }
  .share-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
  .photo-card .share-btn{text-decoration:none;color:var(--ink-soft);}
  .photo-card .share-btn:hover{color:var(--pine);}
  /* A native <dialog> opened with showModal() (#655): the browser moves
     focus in and closes it on Escape. Its own box is the dimmed field. */
  .share-sheet{
    position:fixed;inset:0;z-index:120;display:none;
    width:auto;height:auto;max-width:none;max-height:none;margin:0;padding:0;border:0;
    align-items:flex-end;justify-content:center;
    background:rgba(var(--ink-rgb),0.5);backdrop-filter:blur(4px);
  }
  .share-sheet[open]{display:flex;}
  .share-sheet::backdrop{background:transparent;}
  .share-panel{
    background:var(--card);width:100%;max-width:440px;
    border-radius:20px 20px 0 0;padding:26px 24px 30px;
    box-shadow:var(--shadow-lg);
  }
  @media (min-width:601px){
    .share-sheet{align-items:center;}
    .share-panel{border-radius:20px;}
  }
  .share-panel h3{margin:0 0 4px;font-size:18px;}
  .share-panel .share-below{font-size:15.5px;color:var(--ink-soft);margin:0 0 20px;}
  .share-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:12px;}
  .share-opt{
    display:flex;flex-direction:column;align-items:center;gap:8px;
    background:none;border:1px solid var(--line);border-radius:14px;
    padding:16px 10px;font-size:14.5px;font-weight:600;color:var(--ink);
    transition:transform .15s ease, border-color .15s ease;
  }
  .share-opt:hover{transform:translateY(-2px);border-color:var(--pine-2);}
  .share-opt .icon{
    width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
    color:#fff;font-size:16px;font-weight:700;
  }
  .share-opt .icon svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
  .ic-whatsapp{background:#25D366;}
  .ic-facebook{background:#1877F2;}
  .ic-mail{background:var(--pine);}
  .ic-copy{background:var(--sky);}
  .ic-download{background:var(--rye);}
  .share-close{
    margin-top:20px;width:100%;text-align:center;
    background:none;border:none;font-size:16px;font-weight:600;color:var(--ink-soft);padding:12px;
  }
  .toast{
    position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
    background:var(--ink);color:#fff;padding:12px 20px;border-radius:12px;
    font-size:16px;font-weight:600;z-index:200;opacity:0;pointer-events:none;
    transition:opacity .25s ease, transform .25s ease;
    box-shadow:var(--shadow-lg);
  }
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
  /* The reader's text size (#655): steps of the operator's size, set by
     app.js on the text the server marks with data-reader-text. Classes,
     because the security policy allows no style attribute (#311). */
  [data-reader-text].reader-90{font-size:calc(var(--text-size) * .9);}
  [data-reader-text].reader-115{font-size:calc(var(--text-size) * 1.15);}
  [data-reader-text].reader-130{font-size:calc(var(--text-size) * 1.3);}
  [data-reader-text].reader-150{font-size:calc(var(--text-size) * 1.5);}

  /* Gallery */
  .cat-bar{
    display:flex;gap:9px;flex-wrap:wrap;margin-bottom:26px;
  }
  .cat-chip{
    display:inline-flex;align-items:center;gap:7px;
    padding:8px 15px;border-radius:20px;border:1px solid var(--line);
    background:var(--card);color:var(--ink-soft);
    font-size:15.5px;font-weight:600;font-family:var(--sans);
    transition:all .18s ease;
  }
  .cat-chip:hover{border-color:var(--pine-2);color:var(--pine);}
  .cat-chip.active{background:var(--pine);color:var(--on-primary);border-color:var(--pine);}
  .cat-chip .count{
    font-family:var(--mono);font-size:12.5px;
    background:rgba(var(--ink-rgb),.09);padding:1px 7px;border-radius:10px;
  }
  .cat-chip.active .count{background:rgba(255,255,255,.2);}
  .photo-card{
    break-inside:avoid;margin:0 0 18px;background:var(--card);padding:0;
    box-shadow:var(--shadow);position:relative;
    border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .photo-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);}
  .photo-card img{width:100%;display:block;}
  .photo-card figcaption{padding:14px 16px 16px;}
  .photo-card .cap-title{font-weight:600;font-size:16.5px;}
  .photo-card .cap-date{font-family:var(--mono);font-size:13px;color:var(--ink-soft);margin-top:4px;}
  .photo-card .cap-cat{
    display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
    color:var(--pine);background:rgba(var(--pine-2-rgb),.13);padding:3px 9px;border-radius:20px;margin-bottom:8px;
    font-family:var(--mono);
  }
  .gallery-empty{
    text-align:center;padding:50px 24px;border:1px dashed var(--line);border-radius:18px;
    color:var(--ink-soft);background:rgba(255,255,255,.5);
  }

  footer{border-top:1px solid var(--line);padding:30px 0 50px;}
  .foot-row{
    display:flex;justify-content:space-between;flex-wrap:wrap;gap:18px 24px;
    align-items:center;font-size:15px;color:var(--ink-soft);
  }
  .foot-copy{flex-shrink:0;}
  .foot-links{display:flex;flex-wrap:wrap;gap:4px 18px;}
  .foot-links{min-width:0;}
  /* A link the operator named may hold a word longer than the screen is wide (#547): it breaks inside the link. */
  .foot-links a,.foot-links button{color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px;background:none;border:none;font-size:15px;font-family:inherit;max-width:100%;overflow-wrap:anywhere;}

  /* On a phone the privacy notice and the imprint are the two ways a
     visitor really needs — and they were 25 points tall. Measured on
     05.10.2026 at 390 points (#237). On a desk it stays one line; no
     finger aims there. */
  @media (max-width:860px){
    .foot-links{gap:4px 18px;flex-wrap:wrap;}
    .foot-links a,.foot-links button{min-height:44px;display:inline-flex;
                                     align-items:center;}
  }

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{transition:none !important;animation:none !important;}
    /* The loading indicator stays visible but does not spin */
    .lb-frame.loading::after{
      animation:logofade 1.6s ease-in-out infinite !important;
    }
    @keyframes logofade{0%,100%{opacity:1;}50%{opacity:.35;}}
  }

  /* The tidying bar for events that have passed */
  .event-cleanup{
    display:flex;align-items:center;gap:16px;flex-wrap:wrap;
    background:var(--card);border:1px solid var(--line);border-radius:12px;
    padding:14px 18px;margin-bottom:20px;font-size:15.5px;color:var(--ink-soft);
  }
  @media (max-width:480px){.map-actions .btn{width:100%;justify-content:center;}}
  .partner-card{
    background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
    padding:24px 20px;box-shadow:var(--shadow);text-align:center;
    display:flex;flex-direction:column;align-items:center;gap:12px;
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .partner-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);}
  .partner-logo{
    height:78px;width:100%;display:flex;align-items:center;justify-content:center;
  }
  .partner-logo img{max-height:78px;max-width:100%;object-fit:contain;}
  .partner-logo .placeholder{
    font-family:var(--serif);font-size:26px;font-weight:700;color:var(--pine);
    background:rgba(var(--pine-2-rgb),.11);width:70px;height:70px;border-radius:50%;
    display:grid;place-items:center;
  }
  .partner-card h3{margin:0;font-size:18px;}
  .partner-card .sp-note{font-size:14.5px;color:var(--ink-soft);margin:0;}
  .partner-card .sp-link{font-size:14px;font-weight:700;color:var(--pine);text-decoration:none;}
  .partner-card .sp-link:hover{text-decoration:underline;}

  /* The partner row in the footer */
  /* The partner row — in the footer between the copyright and the document link */
  .foot-partners{
    display:flex;align-items:center;justify-content:center;gap:14px 22px;flex-wrap:wrap;
    flex:1 1 auto;min-width:0;
  }
  .foot-partners:empty{display:none;}
  .foot-partners .fs-caption{
    font-family:var(--mono);
    font-size:12px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--ink-soft);opacity:.75;flex-shrink:0;
  }
  .foot-partners a, .foot-partners span.fs-item{
    display:inline-flex;align-items:center;
    filter:grayscale(1);opacity:.65;transition:filter .2s ease, opacity .2s ease;
  }
  .foot-partners a:hover{filter:grayscale(0);opacity:1;}
  .foot-partners img{max-height:34px;max-width:110px;object-fit:contain;}
  .foot-partners .fs-name{
    font-weight:700;font-size:14.5px;color:var(--ink-soft);text-decoration:none;
  }
  @media (max-width:760px){
    /* A line of its own on narrow devices, so that nothing is squeezed */
    .foot-row{justify-content:center;text-align:center;}
    .foot-partners{
      flex:1 0 100%;order:2;
      padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    }
    .foot-copy{order:1;flex:1 0 100%;}
    .foot-links{order:3;flex:1 0 100%;justify-content:center;}
  }

  /* ---------- GALLERY: loading more ---------- */
  .photo-open{
    display:block;width:100%;padding:0;border:none;background:none;cursor:zoom-in;
    line-height:0;
  }
  .photo-open img{
    width:100%;display:block;background:var(--paper-2);
    transition:opacity .3s ease;
  }
  .photo-card:hover .photo-open img{opacity:.93;}
/* Distances that stood in a style attribute in a module block. An
   attribute reaches no nonce (#169), and a measure of this program
   belongs in this file anyway (#311). */
  .mt-20{margin-top:20px;}
  .mt-24{margin-top:24px;}
  .divider.spaced{margin:56px 0 36px;}

  .gallery-more{
    display:flex;flex-direction:column;align-items:center;gap:14px;
    padding:34px 0 10px;position:relative;
  }

  /* ---------- IMAGE VIEWER ---------- */
  .lightbox{
    position:fixed;inset:0;z-index:150;display:none;
    align-items:center;justify-content:center;padding:24px;
    background:rgba(var(--ink-rgb),0.95);
  }
  .lightbox.open{display:flex;}
  .lb-frame{
    margin:0;max-width:1100px;max-height:100%;
    display:flex;flex-direction:column;align-items:center;gap:14px;position:relative;
  }
  .lb-frame img{
    max-width:100%;max-height:78vh;object-fit:contain;border-radius:8px;
    box-shadow:0 30px 70px -30px rgba(0,0,0,.9);
    transition:filter .25s ease;
  }
  .lb-frame.loading img{filter:blur(8px);}
  .lb-frame.loading::after{
    content:"";position:absolute;top:50%;left:50%;
    width:72px;height:72px;margin:-36px 0 0 -36px;
    background:url("assets/spinner-hell.png?v=20260902") center/contain no-repeat;
    animation:logospin 1.4s cubic-bezier(.55,.15,.45,.85) infinite;
    filter:drop-shadow(0 4px 12px rgba(0,0,0,.5));
  }

  /* The logo spins while loading */
  @keyframes logospin{
    0%   {transform:rotate(0deg)   scale(1);   opacity:.9;}
    50%  {transform:rotate(180deg) scale(.88); opacity:.55;}
    100% {transform:rotate(360deg) scale(1);   opacity:.9;}
  }

  .lb-caption{
    color:var(--paper);text-align:center;display:flex;flex-direction:column;gap:4px;
    font-size:16px;
  }
  .lb-caption span{color:rgba(var(--paper-rgb),0.7);font-size:14.5px;}
  .lb-caption .lb-pos{
    font-family:var(--mono);font-size:12.5px;
    color:rgba(var(--paper-rgb),0.5);
  }
  .lb-close, .lb-nav{
    position:absolute;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.22);
    color:#fff;border-radius:50%;width:48px;height:48px;font-size:26px;line-height:1;
    display:grid;place-items:center;z-index:2;backdrop-filter:blur(6px);
    transition:background .18s ease;
  }
  .lb-close:hover, .lb-nav:hover{background:rgba(255,255,255,0.24);}
  .lb-close{top:20px;right:20px;font-size:30px;}
  .lb-nav{top:50%;transform:translateY(-50%);}
  .lb-prev{left:20px;}
  .lb-next{right:20px;}
  @media (max-width:600px){
    .lightbox{padding:12px;}
    .lb-frame img{max-height:64vh;}
    .lb-close{top:12px;right:12px;width:42px;height:42px;}
    .lb-nav{width:42px;height:42px;bottom:22px;top:auto;transform:none;}
    .lb-prev{left:auto;right:70px;}
    .lb-next{right:14px;}
  }

  /* The note shown when the server hands out no data */
  .server-problem{
    grid-column:1/-1;
    background:var(--card);border:1px solid var(--line);border-left:4px solid var(--brick);
    border-radius:var(--radius);padding:24px 26px;box-shadow:var(--shadow);
  }
  .server-problem strong{display:block;font-size:17px;margin-bottom:8px;color:var(--brick);}
  .server-problem p{margin:0 0 10px;font-size:15.5px;color:var(--ink-soft);}
  .server-problem code{
    font-family:var(--mono);font-size:13.5px;
    background:rgba(var(--ink-rgb),.07);padding:2px 6px;border-radius:4px;
  }

  /* ---------- EVENTS WITH A PICTURE ---------- */
  .event-card.has-image{padding:0;overflow:hidden;}
  .event-card.has-image .ev-body{padding:20px 22px 22px;}
  .event-card:not(.has-image) .ev-body{padding:0;}
  .ev-thumb{
    display:block;width:100%;padding:0;border:none;background:var(--paper-2);
    cursor:zoom-in;line-height:0;
  }
  .ev-thumb img{
    width:100%;height:150px;object-fit:cover;display:block;
    transition:transform .35s ease, opacity .2s ease;
  }
  .event-card.has-image:hover .ev-thumb img{transform:scale(1.03);}
  .event-card.has-image::before{z-index:2;}

  /* The preview of the picture already there, in the form */
  .current-image{
    display:flex;align-items:center;gap:14px;margin-top:12px;
    background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:10px 12px;
  }
  .current-image img{
    width:74px;height:56px;object-fit:cover;border-radius:6px;flex-shrink:0;
  }
  .current-image .ci-caption{
    display:block;font-size:13.5px;color:var(--ink-soft);margin-bottom:2px;
  }

  /* ---------- THE SMALL PICTURE IN THE HERO TILE ---------- */
  .pin-card.has-image{
    padding:0;overflow:hidden;
    display:flex;flex-direction:column;
  }
  .pin-card.has-image .pin-body{padding:18px 20px 20px;}
  .pin-thumb{
    display:block;width:100%;padding:0;border:none;background:rgba(0,0,0,.2);
    line-height:0;
  }
  .pin-thumb img{
    width:100%;height:104px;object-fit:cover;display:block;
    transition:transform .35s ease;
  }
  .pin-card.has-image:hover .pin-thumb img{transform:scale(1.04);}
  @media (max-width:600px){
    .pin-thumb img{height:132px;}
  }

  /* An icon inside a button, the calendar for instance */
  .btn-icon{
    width:18px;height:18px;flex-shrink:0;
    fill:none;stroke:currentColor;stroke-width:2;
    stroke-linecap:round;stroke-linejoin:round;
  }
  #eventAddControls{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
  @media (max-width:560px){
    #eventAddControls .btn{width:100%;justify-content:center;}
  }

  /* ---------- PRIVACY NOTE ---------- */
  .privacy-bar{
    position:fixed;left:0;right:0;bottom:0;z-index:140;
    background:var(--card);border-top:1px solid var(--line);
    box-shadow:0 -8px 30px -12px rgba(var(--ink-rgb),.28);
    transform:translateY(0);
    animation:pbIn .45s ease .6s both;
  }
  @keyframes pbIn{from{transform:translateY(100%);}to{transform:translateY(0);}}
  .pb-inner{
    max-width:1100px;margin:0 auto;padding:16px 24px;
    display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  }
  .pb-inner p{margin:0;flex:1;min-width:240px;font-size:15.5px;color:var(--ink-soft);}
  .pb-actions{display:flex;align-items:center;gap:18px;flex-shrink:0;}
  /* Three targets of equal weight: they wrap instead of running out of a 320 point screen (#874). */
  .privacy-bar-consent .pb-actions{flex-wrap:wrap;flex-shrink:1;}

  /* The notice is the first thing a visitor taps on a phone, and both
     of its targets were under the mark: the link 37 points tall, the
     button 40. Measured on 05.10.2026 at 390 points (#237). */
  @media (max-width:860px){
    .pb-actions .link-btn, .pb-actions .btn{min-height:44px;
      display:inline-flex;align-items:center;justify-content:center;}
  }
  @media (max-width:600px){
    .pb-inner{padding:16px 18px;gap:14px;}
    .pb-actions{width:100%;justify-content:space-between;}
    .pb-actions .btn{flex:1;justify-content:center;margin-left:12px;}
    .privacy-bar-consent .pb-actions .btn{flex:1 1 40%;margin-left:0;}
    .privacy-bar-consent .pb-actions .link-btn{flex:1 1 100%;justify-content:center;}
  }

  /* The highlight when a link jumps straight to one event */
  .event-card.featured{
    animation:terminHighlight 2.6s ease;
  }
  @keyframes terminHighlight{
    0%   {box-shadow:0 0 0 0 rgba(var(--pine-2-rgb),.55), var(--shadow);}
    18%  {box-shadow:0 0 0 6px rgba(var(--pine-2-rgb),.30), var(--shadow-lg);}
    100% {box-shadow:0 0 0 0 rgba(var(--pine-2-rgb),0), var(--shadow);}
  }
  /* An event jumped to must not hide under the page head */
  .event-card{scroll-margin-top:110px;}

  /* ---------- THE PAGE ABOUT THE PLACE ---------- */
  .profile h2{font-size:clamp(24px,3.2vw,32px);margin:8px 0 26px;}
  .profile-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:40px;align-items:start;}
  @media (max-width:860px){.profile-grid{grid-template-columns:1fr;gap:28px;}}

  /* ---------- PICTURES ON THAT PAGE ---------- */
  .profile-image figcaption .link-btn{align-self:flex-start;margin-top:4px;}
  @media (max-width:560px){
    .db-open img{height:210px;}
  }

  /* ============ THE SITE OF SEVERAL PAGES ============ */

  .skip{
    position:absolute;left:-9999px;top:0;z-index:200;
    background:var(--pine);color:var(--on-primary);padding:12px 20px;border-radius:0 0 8px 0;
  }
  .skip:focus{left:0;}

  .links a.current{color:var(--pine);border-color:var(--pine-2);}

  .page-head{padding:44px 0 26px;}
  .page-head h1{
    font-size:clamp(28px,4vw,42px);line-height:1.12;margin:10px 0 14px;
    letter-spacing:-0.015em;
  }
  .page-head .lead{font-size:19px;color:var(--ink-soft);max-width:62ch;margin:0;}
  .page-head.narrow-head .lead{max-width:52ch;}

  .crumb{
    font-size:14.5px;color:var(--ink-soft);margin-bottom:16px;
    display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  }
  .crumb a{color:var(--ink-soft);}
  .crumb a:hover{color:var(--pine);}
  .crumb span[aria-current]{color:var(--ink);font-weight:600;}

  .narrow{max-width:780px;}
  .empty-hint{
    padding:34px 26px;border:1px dashed var(--line);border-radius:16px;
    background:rgba(255,255,255,.55);color:var(--ink-soft);font-size:17px;
  }

  .notice{
    background:rgba(var(--pine-2-rgb),.10);border-left:4px solid var(--pine-2);
    padding:14px 18px;border-radius:8px;font-size:16px;margin:0 0 24px;
  }
  .notice.error{background:rgba(var(--error-rgb),.08);border-left-color:var(--error);color:var(--error);}

  .required{color:var(--brick);}
  .inline-form{display:inline;}
  .check-box{display:flex;align-items:center;gap:8px;font-size:15px;font-family:inherit;
    text-transform:none;letter-spacing:0;color:var(--ink);margin-top:6px;}
  .check-box input{width:auto;}

  /* Event tiles: the title as a link */
  .event-card h3 a{color:inherit;text-decoration:none;}
  .event-card h3 a:hover{color:var(--pine);text-decoration:underline;text-underline-offset:3px;}
  .event-card .row-actions{align-items:center;flex-wrap:wrap;}
  @media (max-width:480px){.event-actions .btn{width:100%;justify-content:center;}}

  .category-admin{
    margin-top:44px;padding:26px;background:var(--card);
    border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);
  }
  .category-admin h2{font-size:19px;margin:0 0 16px;}
  .category-form{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-bottom:14px;}
  .category-form label{margin-bottom:6px;}
  .category-form input{width:auto;min-width:220px;}

  /* The ways from the start page into the sections */
  .routes{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;}
  .route{
    display:block;padding:26px;background:var(--card);border:1px solid var(--line);
    border-radius:var(--radius);box-shadow:var(--shadow);text-decoration:none;color:inherit;
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .route:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);}
  .route h2{font-size:20px;margin:0 0 8px;color:var(--pine);}
  .route p{margin:0;font-size:15.5px;color:var(--ink-soft);}

  /* Legal texts */
  .legal-text h2{font-size:20px;margin:30px 0 10px;color:var(--pine);}
  .legal-text h2:first-child{margin-top:0;}
  .legal-text p{font-size:17px;color:var(--ink-soft);margin:0 0 12px;}

  /* The pager */
  .pager{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:32px;justify-content:center;}
  .pager a, .pager span{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:40px;height:40px;padding:0 12px;border-radius:9px;
    font-size:15.5px;font-weight:600;text-decoration:none;
  }
  .pager a{background:var(--card);border:1px solid var(--line);color:var(--ink-soft);}
  .pager a:hover{border-color:var(--pine-2);color:var(--pine);}
  .pager .current{background:var(--pine);color:var(--on-primary);}
  .pager .off{color:var(--ink-soft);opacity:.4;}

  /* The account overview */
  .account-boxes{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start;}
  @media (max-width:800px){.account-boxes{grid-template-columns:1fr;}}
  .account-boxes .panel{margin-top:0;}
  .account-boxes h2{font-size:20px;margin:0 0 4px;}
  .account-boxes code{
    font-family:var(--mono);font-size:13.5px;
    background:rgba(var(--ink-rgb),.07);padding:2px 6px;border-radius:4px;
  }
  .route p a{color:var(--pine);}

  /* The map only after consent */
  .map-optin{
    display:flex;align-items:center;justify-content:center;
    background:
      repeating-linear-gradient(45deg, rgba(var(--pine-2-rgb),.05) 0 12px, transparent 12px 24px),
      var(--card);
  }

  /* ============ THE ADMINISTRATION AREA ============ */

  .figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px;}
  .figure-card{
    display:flex;align-items:center;gap:16px;padding:22px 24px;
    background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
    box-shadow:var(--shadow);text-decoration:none;color:inherit;
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .figure-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);}
  .figure-number{font-family:var(--serif);font-size:38px;font-weight:700;line-height:1;color:var(--pine);}
  .figure-label{font-size:16px;font-weight:600;}
  .figure-label small{font-weight:400;color:var(--ink-soft);font-size:14px;}

  .admin-head{
    display:flex;justify-content:space-between;align-items:center;
    gap:18px;flex-wrap:wrap;margin-bottom:24px;
  }
  .admin-head .hint{margin:0;font-size:16px;color:var(--ink-soft);}
  .admin-actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap;}
  @media (max-width:560px){
    .admin-actions{width:100%;}
    .admin-actions .btn{width:100%;justify-content:center;}
  }

  table.admin-table{width:100%;border-collapse:collapse;font-size:16px;min-width:720px;}
  table.admin-table th{
    text-align:left;padding:10px 12px;font-family:var(--mono);font-size:12px;
    letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);
    border-bottom:1px solid var(--line);
  }
  table.admin-table td{padding:14px 12px;border-top:1px solid var(--line);vertical-align:middle;}
  table.admin-table tr.is-old td{color:var(--ink-soft);}
  table.admin-table .mono{font-family:var(--mono);font-size:14px;}
  table.admin-table .rechts{text-align:right;white-space:nowrap;}
  table.admin-table .rechts .link-btn{margin-left:14px;}
  table.admin-table img.mini{
    width:54px;height:40px;object-fit:contain;border-radius:5px;background:var(--paper-2);
  }
  .badge{
    display:inline-block;font-family:var(--mono);font-size:12px;
    padding:3px 10px;border-radius:20px;background:rgba(var(--pine-2-rgb),.14);color:var(--pine);
  }
  .badge.old{background:rgba(var(--ink-rgb),.08);color:var(--ink-soft);}

  .admin-grid{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:18px;
  }
  .admin-image{
    margin:0;background:var(--card);border:1px solid var(--line);
    border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
  }
  .admin-image img{width:100%;height:130px;object-fit:cover;display:block;background:var(--paper-2);}
  .admin-image figcaption{padding:12px 14px 14px;display:flex;flex-direction:column;gap:4px;}
  .admin-image-title{font-weight:600;font-size:15px;}
  .admin-image-meta{font-size:13px;color:var(--ink-soft);}

  /* Editing text */
  .text-form{margin-top:26px;}
  .text-field{
    background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
    padding:22px 24px;margin-bottom:20px;box-shadow:var(--shadow);
  }
  .text-field.changed{border-left:4px solid var(--pine-2);}
  .tf-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:10px;}
  .tf-head label{margin:0;font-size:16px;font-weight:600;color:var(--ink);
    text-transform:none;letter-spacing:0;font-family:var(--sans);}
  .tf-key{font-family:var(--mono);font-size:12px;color:var(--ink-soft);}
  .text-field .hint{margin:8px 0 0;font-size:13.5px;}
  .mono-field{font-family:var(--mono);font-size:14px;line-height:1.6;}
  .tf-default{margin-top:12px;}
  .tf-default summary{
    cursor:pointer;font-size:14px;color:var(--ink-soft);
  }
  .tf-default pre{
    margin:10px 0 0;padding:14px;background:var(--paper-2);border-radius:8px;
    font-family:var(--mono);font-size:13px;white-space:pre-wrap;
    max-height:260px;overflow:auto;color:var(--ink-soft);
  }
  .text-actions{position:sticky;bottom:0;background:var(--paper);
    padding:16px 0;border-top:1px solid var(--line);margin-top:0;}

  /* ============ DRAFT AND PREVIEW ============ */
  .draft-bar{
    display:flex;justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap;
    background:rgba(var(--pine-2-rgb),.10);border:1px solid var(--pine-2);
    border-radius:var(--radius);padding:20px 24px;margin-bottom:26px;
  }
  .draft-bar strong{display:block;font-size:17px;}
  .draft-bar p{margin:4px 0 0;font-size:15px;color:var(--ink-soft);}
  .draft-bar-buttons{display:flex;gap:14px;align-items:center;flex-wrap:wrap;}
  @media (max-width:640px){
    .draft-bar-buttons{width:100%;}
    .draft-bar-buttons .btn{flex:1;justify-content:center;}
  }

  /* The rights of one account — the list of ticks in the user administration */
  .rights-block{
    border:1px solid var(--line);border-radius:var(--radius);
    padding:20px 22px;margin:22px 0 6px;
  }
  .rights-block legend{
    padding:0 8px;font-weight:600;font-size:16px;
  }
  .rights-group + .rights-group{margin-top:20px;}
  .rights-group h3{
    margin:0 0 10px;font-size:14px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--ink-soft);
  }
  .rights-group .check-box{
    align-items:flex-start;gap:11px;padding:9px 0;
    border-top:1px solid var(--line);
  }
  .rights-group .check-box:first-of-type{border-top:0;}
  .rights-group .check-box input{margin-top:3px;}
  .rights-group .check-box small{color:var(--ink-soft);font-size:14px;}

  .rights-list{
    list-style:none;margin:12px 0 0;padding:0;
    columns:2;column-gap:26px;font-size:15px;
  }
  .rights-list li{padding:3px 0;break-inside:avoid;}
  @media (max-width:640px){ .rights-list{columns:1;} }

  /* The obscured mail address, until the script replaces it */
  .mail-guard{
    font-family:var(--mono);font-size:.95em;
    color:var(--ink-soft);word-break:break-word;
  }
  dl.bank-details dd.mono{font-family:var(--mono);letter-spacing:.02em;}

  .preview-bar{
    position:fixed;left:0;right:0;bottom:0;z-index:150;
    background:var(--pine);color:var(--on-primary);
    box-shadow:0 -8px 30px -12px rgba(0,0,0,.5);
  }
  .preview-bar-inner{
    max-width:1100px;margin:0 auto;padding:14px 24px;
    display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  }
  .preview-badge{
    font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.1em;
    text-transform:uppercase;background:rgba(255,255,255,.18);
    padding:5px 12px;border-radius:20px;flex-shrink:0;
  }
  .preview-bar-inner p{margin:0;flex:1;min-width:220px;font-size:15px;color:var(--on-primary);}
  .preview-bar-buttons{display:flex;gap:12px;flex-shrink:0;}
  .preview-bar-buttons .btn-ghost{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4);color:var(--on-primary);}
  /* On the coloured bar the main button needs the contrast the other way
     round: the ground of the page with its own text colour. The primary
     colour as writing was 1.40:1 once that colour was light (#766). */
  .preview-bar-buttons .btn-primary{background:var(--paper);color:var(--ink);border-color:var(--paper);}
  .preview-bar-buttons .btn-primary:hover{background:#fff;color:var(--ink);}
  @media (max-width:600px){
    .preview-bar-inner{padding:12px 16px;gap:12px;}
    .preview-bar-buttons{width:100%;}
    .preview-bar-buttons .btn{flex:1;justify-content:center;}
  }
  body:has(.preview-bar){padding-bottom:96px;}

  /* Colour fields */
  .color-row{display:flex;align-items:center;gap:14px;}
  .color-picker{
    width:56px;height:44px;padding:2px;border:1px solid var(--line);
    border-radius:8px;background:var(--card);cursor:pointer;flex-shrink:0;
  }
  .color-value{
    width:150px;flex:0 0 auto;font-family:var(--mono);font-size:15px;text-transform:uppercase;
  }
  .color-default{
    width:34px;height:34px;border-radius:7px;border:1px solid var(--line);
    flex-shrink:0;
  }

  /* Picture fields */
  .image-row{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap;}
  .image-preview{
    width:120px;height:96px;display:flex;align-items:center;justify-content:center;
    background:var(--paper-2);border:1px solid var(--line);border-radius:10px;
    padding:8px;flex-shrink:0;
  }
  .image-preview img{max-width:100%;max-height:100%;object-fit:contain;}
  .image-controls{flex:1;min-width:240px;}
  .image-controls .check-box{margin-top:10px;}

  .group-hint{
    background:var(--card);border-left:4px solid var(--pine-2);
    padding:14px 18px;border-radius:8px;font-size:15.5px;color:var(--ink-soft);
    margin:0 0 24px;
  }
  .legal-text h3{
    font-size:19px;margin:28px 0 8px;color:var(--pine);
    padding-top:16px;border-top:1px solid var(--line);
  }
  .legal-text h3:first-child{margin-top:0;padding-top:0;border-top:none;}
  .legal-text ol, .legal-text ul{
    font-size:17px;color:var(--ink-soft);margin:0 0 14px;padding-left:24px;
  }
  .legal-text li{margin-bottom:6px;}

  /* Lists that carry their own markers (a, b, c) in the text already */
  .legal-text ul.alpha{list-style:none;padding-left:0;}
  .legal-text ul.alpha li{
    padding-left:1.9em;text-indent:-1.9em;margin-bottom:8px;
  }

  /* ============ ADMINISTRATION: NAVIGATION ============ */
  /* As a quiet column at the right edge, not as a row of buttons. */

  .admin-nav{
    background:var(--card);border:1px solid var(--line);
    border-radius:var(--radius);box-shadow:var(--shadow);
    padding:20px 22px;
  }

  /* From enough width on, the column stands fixed at the edge with */
  @media (min-width:1120px){
    .is-admin main{padding-right:262px;}
    .admin-nav{
      position:fixed;top:96px;right:26px;width:214px;z-index:40;
      max-height:calc(100vh - 130px);overflow-y:auto;
    }
    .is-admin .page-head .admin-nav{margin-top:0;}
  }

  /* Below that it runs along in the flow of the text — the groups then
     side by side, so that sixteen links one under another do not pull
     the page apart. */
  @media (max-width:1119px){
    .admin-nav{
      margin-top:22px;display:grid;gap:6px 28px;
      grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
      align-items:start;
    }
  }
  @media (max-width:460px){
    .admin-nav{grid-template-columns:1fr 1fr;gap:4px 18px;padding:16px 18px;}
  }

  /* ============ MODULES ============ */
  .module-area{
    font-size:19px;margin:34px 0 14px;padding-bottom:8px;
    border-bottom:1px solid var(--line);
  }
  .module-area:first-of-type{margin-top:8px;}
  .module-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:18px;}
  .module{
    background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
    padding:20px 22px;box-shadow:var(--shadow);
    border-left:4px solid rgba(var(--ink-rgb),.14);
  }
  .module.is-on{border-left-color:var(--pine-2);}
  .module.is-fixed{border-left-color:var(--ink-soft);}
  .module-head{display:flex;align-items:center;justify-content:space-between;gap:14px;}
  .module-head h3{margin:0;font-size:17.5px;}
  .module-purpose{margin:10px 0 0;font-size:15.5px;color:var(--ink-soft);}
  .module-details{
    margin:12px 0 0;font-size:13px;color:var(--ink-soft);
    display:flex;gap:14px;flex-wrap:wrap;
  }
  .module-part{display:inline-block;}
  .module-details code{
    font-family:var(--mono);font-size:12.5px;
    background:rgba(var(--ink-rgb),.07);padding:1px 6px;border-radius:4px;
  }

  /* On/off switches */
  .switch{display:inline-flex;align-items:center;gap:9px;cursor:pointer;flex-shrink:0;}
  .switch input{position:absolute;opacity:0;width:0;height:0;}
  .switch-track{
    width:46px;height:26px;border-radius:13px;background:rgba(var(--ink-rgb),.20);
    position:relative;transition:background .2s ease;flex-shrink:0;
  }
  .switch-track::after{
    content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;
    border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);
    transition:transform .2s ease;
  }
  .switch input:checked + .switch-track{background:var(--pine-2);}
  .switch input:checked + .switch-track::after{transform:translateX(20px);}
  .switch input:focus-visible + .switch-track{outline:var(--focus-width) solid var(--focus);outline-offset:var(--focus-offset);}
  .switch-label{
    font-family:var(--mono);font-size:12.5px;font-weight:700;
    text-transform:uppercase;color:var(--ink-soft);min-width:24px;
  }

  /* That page without the box of facts */
  .profile-grid.no-box{grid-template-columns:1fr;max-width:76ch;}
  /* **What one box was told about its look.** Colours, font size,
     spacing and corner radius, each only for the box that was told —
     the page writes `[data-box="…"]{--box-…}` and this reads it. The
     fallbacks are what the box had before, so a box nobody has styled
     looks exactly as it did (#521).

     `--box-gap` is the box's own padding and not a second section gap:
     the gap between boxes belongs to the section, and that rule is
     counted once since 2.2.1. */
  .box[data-box]{
    color:var(--box-ink,inherit);
    font-size:var(--box-size,inherit);
    background:var(--box-bg,transparent);
    border-radius:var(--box-radius,0);
    padding:var(--box-gap,0);
  }

  /* The symbols of the program. Lines rather than a picture, and
     `currentColor` rather than a value: a symbol standing beside a text
     takes the colour of that text, so a dark theme gets a light symbol
     without anybody setting one. A fixed colour here is the mistake
     #468 came out of, one layer further in (#491). */
  /* The three blocks of the draft of 07.10.2026, built so that every
     installation has them: a row of features, three cards that lead
     into a subject, and the head row above them. Measures and colours
     come from the values of the theme, so a second installation uses
     the same blocks and does not look like the first (#491). */
  .feature-list{
    list-style:none;margin:0;padding:0;display:flex;gap:18px;flex-wrap:wrap;
  }
  .feature-column{flex-direction:column;}
  .feature{display:flex;align-items:flex-start;gap:10px;min-width:0;}
  .feature-icon{width:22px;height:22px;margin-top:2px;color:var(--pine-2);}
  .feature-words{display:flex;flex-direction:column;gap:2px;min-width:0;}
  .feature-words strong{font-size:15px;line-height:1.3;}
  .feature-words span{font-size:14px;color:var(--ink-soft);line-height:1.35;}

  .icon-cards{margin:var(--section-gap,32px) 0;}
  .icon-card-grid{display:grid;gap:14px;grid-template-columns:repeat(3,minmax(0,1fr));}
  /* The knowledge card of the approved reference: the disc on the left,
     title, text and the way on beside it, on a faint tint of the accent
     rather than the opaque card colour (#757). */
  .icon-card{
    display:grid;grid-template-columns:56px minmax(0,1fr);grid-template-rows:auto 1fr auto;column-gap:24px;
    padding:17px 17px 20px;border-radius:12px;
    background:rgba(var(--pine-2-rgb),.03);border:1px solid rgba(var(--pine-2-rgb),.18);
    text-decoration:none;color:inherit;
    transition:transform .18s ease, box-shadow .18s ease;
  }
  a.icon-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);}
  .icon-card-mark{
    display:inline-flex;align-items:center;justify-content:center;
    grid-row:span 3;align-self:start;
    width:56px;height:56px;margin:0;border-radius:50%;
    background:rgba(var(--pine-2-rgb),.16);box-shadow:inset 0 0 0 1px rgba(var(--pine-2-rgb),.3);color:var(--pine);
  }
  /* The glyph fills half the disc with a stroke of about 2.2, as on the
     reference; the drawing leaves air inside its 24 units. */
  .icon-card-mark svg{width:40px;height:40px;stroke-width:1.35;}
  .icon-card h3{margin:4px 0 6px;font-size:18px;line-height:1.2;overflow-wrap:anywhere;}
  .icon-card p{margin:0;font-size:13px;line-height:1.42;color:var(--ink-soft);hyphens:auto;}

  /* The link on the right of a head row. The row itself is
     `.section-head`, which was here before the block was. */
  /* At least 24 high, the smallest target a pointer or a finger is
     given (WCAG 2.5.8). */
  .section-link{font-size:15px;white-space:nowrap;display:inline-block;line-height:24px;}

  /* The hero and the knowledge cards of the reference brief of
     13.10.2026: words on the left, the features or the cards on the
     right; one column on a phone (vvv-cms#734). */
  /* The hero of the approved reference (vvv-cms#751): the words take the
     row, the four values stand as one narrow column pinned right, and
     the picture lies between them. The values are centred against the
     words. Its distance to the header is its own and not a section gap:
     the box owns that, and the first box has none above it — so the
     rule names the box, or `.box section` takes the padding away again.
     The words are set in from the content edge by 24 and the values by
     12, as measured on the reference. */
  .hero{display:grid;gap:24px 48px;align-items:center;}
  .box .hero{padding-top:clamp(16px,2.8vw,43px);}
  @media (min-width:761px){
    .hero{padding-inline:24px 12px;}
  }
  /* The values are a column of their own width, which stays narrow now
     that they stand one under the other; the words keep the rest. */
  .hero-with-values{grid-template-columns:minmax(0,1fr) auto;}
  .hero-words{min-width:0;}
  /* The width of the text column (vvv-cms#787): a ceiling for the column
     of the headline, the line and the ways. It holds the words alone and
     leaves the values where they stand at the right; the default has no
     class and no rule, so the column takes the room it always took, and on
     a layout narrower than the ceiling nothing changes. The figures come
     from the advance widths of the shipped display face at its largest
     size, 80 points: the longer line of the reference headline,
     „offene Begegnungen.", is about 752 across and fits the narrowest
     ceiling; the whole headline on one line is about 1300 and does not fit
     the widest, so on a wide layout it breaks even where the room would
     have let it run on. Not yet read off a browser (tests/rahmen.sh does). */
  .hero-width-wide .hero-words{max-width:1120px;}
  .hero-width-medium .hero-words{max-width:960px;}
  .hero-width-narrow .hero-words{max-width:800px;}
  /* Balanced lines: two lines of the same length, the way the headline
     of the reference breaks when no line break is typed into the field. */
  .hero-title{font-size:clamp(34px,5.2vw,80px);line-height:.97;margin:0 0 2px;overflow-wrap:anywhere;text-wrap:balance;}
  .hero-subtitle{font-size:clamp(17px,1.7vw,26px);line-height:1.2;letter-spacing:.08em;color:var(--ink-soft);margin:0 0 20px;}
  .hero .cta-row{gap:19px;margin-top:0;}
  .hero .btn{min-height:50px;padding:0 28px;border-radius:999px;font-size:18px;justify-content:center;}
  .hero-values{min-width:0;justify-self:end;}
  /* The four values: one column whatever the features box elsewhere is
     set to, and both lines of a value alike, as on the reference. */
  .hero-values .feature-list{flex-direction:column;flex-wrap:nowrap;gap:18px;}
  /* The drawn symbols of the reference are 26 to 31 across with a
     stroke of about 2.3, and the words start 19 right of them; the
     drawing leaves air inside its 24 units, and at 35 each of the four
     stands within 3 of its size there (review of #751). */
  .hero-values .feature{align-items:center;gap:16px;}
  .hero-values .feature-icon{width:35px;height:35px;margin-top:0;}
  .hero-values .feature-words{gap:0;}
  .hero-values .feature-words strong,.hero-values .feature-words span{
    font-size:15px;font-weight:400;line-height:20px;color:var(--ink-soft);
  }
  /* Intro and cards at 35 to 65 with 38 between, as measured on the
     reference; the cards start level with the cap of the eyebrow (#757). */
  .icon-cards-beside{display:grid;gap:24px 38px;grid-template-columns:minmax(0,35fr) minmax(0,65fr);align-items:start;}
  .icon-cards-beside .icon-card-grid{margin-top:10px;}
  .icon-cards-intro{min-width:0;}
  /* Beside the cards the words stand 8 inside the content edge, as on the
     reference, where the cards above start at the edge itself. */
  @media (min-width:1281px){
    .icon-cards-beside .icon-cards-intro{padding-left:8px;}
  }
  .icon-cards-intro .section-head{display:flex;flex-direction:column-reverse;margin-bottom:12px;}
  /* 40 at most: its cap is the 31 of the reference, and 44 set it 12 per
     cent wider (whole page of 14.10.2026). */
  .icon-cards-intro .section-head h2{font-size:clamp(30px,3.4vw,40px);line-height:1.1;margin:8px 0 0;}
  .icon-cards-intro .eyebrow{font-family:var(--sans);font-size:11.5px;font-weight:500;letter-spacing:.2em;}
  .icon-cards-intro p{color:var(--ink);margin:0 0 14px;font-size:15px;line-height:1.27;}
  /* The way on is a slim outlined pill here; the button of every other
     place keeps its look (the global one is #759). */
  .icon-cards-intro .btn-outline{
    min-height:36px;padding:0 22px;border-radius:999px;border-width:1.5px;
    box-shadow:none;font-size:13px;font-weight:500;
  }
  /* At rest only: hovered and pressed it fills like every outlined
     button, and a rule of the same weight further down would win in
     every state (#468). */
  .icon-cards-intro .btn-outline:not(:hover):not(:active){
    border-color:rgba(var(--pine-2-rgb),.7);background:transparent;color:var(--ink);
  }
  /* The arrows are decoration: the text after the slash keeps a screen
     reader from reading them out. */
  .icon-cards-intro .btn::after,.icon-card-more::after{content:"\2192" / "";}
  /* Pinned to the foot of the card, so the three stand on one line
     whatever the length of their texts. */
  .icon-card-more{justify-self:start;align-self:end;margin-top:6px;font-size:13px;font-weight:500;color:var(--pine-2);}
  .icon-card-more::after{margin-left:6px;}

  /* Below 1280 the intro goes above the cards, so each of the three
     keeps at least 250 points beside the disc; below 860 they stand in
     one column (#757). */
  @media (max-width:1280px){
    .icon-cards-beside{grid-template-columns:minmax(0,1fr);}
    .icon-cards-beside .icon-card-grid{margin-top:0;}
    .icon-cards-intro{max-width:480px;}
  }
  @media (max-width:860px){
    .icon-card-grid{grid-template-columns:1fr;}
  }

  /* A phone is one column, and three cards side by side on 360 points
     are three unreadable cards (ThePhoneIsNotAnAfterthoughtTest). */
  @media (max-width:760px){
    .icon-card-grid{grid-template-columns:1fr;}
    .hero-with-values,.icon-cards-beside{grid-template-columns:1fr;}
    .hero-values{justify-self:start;}
    .feature-list{flex-direction:column;}
  }

  /* The badge beside a button in the header — an age mark, say. Not a
     colour of its own: it sits inside the button and takes what the
     button has, so it follows the theme without a second value
     (#491). */
  .action-badge{
    margin-left:8px;padding:1px 7px;border-radius:999px;
    font-size:12px;font-weight:700;letter-spacing:.02em;
    border:1px solid currentColor;
    white-space:nowrap;flex-shrink:0;
  }

  .icon{
    width:24px;height:24px;flex-shrink:0;
    fill:none;stroke:currentColor;stroke-width:1.6;
    stroke-linecap:round;stroke-linejoin:round;
  }

  .weather-icon{
    width:52px;height:52px;flex-shrink:0;
    fill:none;stroke:var(--pine-2);stroke-width:1.6;
    stroke-linecap:round;stroke-linejoin:round;
  }

  /* The note pointing at the event feed */
  .feed-hint{
    display:flex;align-items:center;gap:10px;
    margin:44px 0 0;padding-top:20px;border-top:1px solid var(--line);
    font-size:15px;color:var(--ink-soft);
  }
  .feed-icon{
    width:18px;height:18px;flex-shrink:0;
    fill:none;stroke:var(--pine-2);stroke-width:2;
    stroke-linecap:round;stroke-linejoin:round;
  }
  .feed-icon circle{fill:var(--pine-2);stroke:none;}

  /* ============ THE NOTICE BAND ============ */
  /* The band stands on the primary fill, so it takes the writing
     worked out for that fill; the urgent one keeps its own (#766). */
  .announcement{background:var(--pine);color:var(--on-primary);}
  .announcement.is-urgent{background:var(--error);color:var(--paper);}
  /* The page of a single partner. Every one of them has such a page;
     only those with a description reach the sitemap. */
  .partner-page .partner-logo{
    max-width:220px;margin:0 0 26px;background:var(--card);
    border:1px solid var(--line);border-radius:var(--radius);padding:18px;
  }
  .partner-page .partner-logo img{display:block;width:100%;height:auto;}
  .partner-page .facts-list{margin:28px 0 0;}

  .facts-list{margin:16px 0 0;display:grid;gap:0;}
  .facts-list > div{
    display:flex;justify-content:space-between;gap:16px;
    padding:8px 0;border-top:1px solid var(--line);font-size:16px;
  }
  .facts-list > div:first-child{border-top:none;}
  .facts-list > div.is-today{font-weight:600;}
  .facts-list > div.is-today dt::after{content:" · heute";color:var(--pine);font-weight:400;font-size:14px;}
  .facts-list dt{margin:0;color:var(--ink-soft);}
  .facts-list dd{margin:0;font-family:var(--mono);font-size:15px;}

  /* ============ CONTACT FORM ============ */
  .form-block{margin-top:52px;}
  .form-block h2{margin-bottom:8px;}

  /* ============ HELP INSIDE THE ADMINISTRATION AREA ============ */
  .help-link{
    display:inline-flex;align-items:center;gap:7px;margin-top:14px;
    font-size:15px;font-weight:600;color:var(--pine);text-decoration:none;
  }
  .help-link:hover{text-decoration:underline;text-underline-offset:3px;}
  .help-link svg{
    width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;
    stroke-linecap:round;stroke-linejoin:round;
  }

  .doc-grid{
    display:grid;grid-template-columns:250px 1fr;gap:36px;align-items:start;
    margin-top:26px;
  }
  @media (max-width:900px){.doc-grid{grid-template-columns:1fr;gap:24px;}}

  .doc-outline{
    position:sticky;top:90px;background:var(--card);border:1px solid var(--line);
    border-radius:var(--radius);padding:20px 22px;box-shadow:var(--shadow);
    max-height:calc(100vh - 120px);overflow:auto;
  }
  @media (max-width:900px){.doc-outline{position:static;max-height:320px;}}
  .doc-outline h2{font-size:16px;margin:0 0 12px;}
  .doc-outline nav{display:flex;flex-direction:column;gap:2px;}
  .doc-outline a{
    font-size:14.5px;color:var(--ink-soft);text-decoration:none;padding:3px 0;
    line-height:1.35;
  }
  .doc-outline a:hover{color:var(--pine);}
  .doc-outline a.dg-e3{padding-left:14px;font-size:13.5px;}

  .doc-body{max-width:74ch;}
  .doc-source{margin:0 0 24px;padding-bottom:16px;border-bottom:1px solid var(--line);}
  .doc-body h2{font-size:26px;margin:38px 0 12px;}
  .doc-body h2:first-of-type{margin-top:0;}
  .doc-body h3{font-size:20px;margin:30px 0 10px;color:var(--pine);}
  .doc-body h4{font-size:17px;margin:24px 0 8px;}
  .doc-body p{font-size:16.5px;color:var(--ink-soft);margin:0 0 14px;}
  .doc-body ul,.doc-body ol{font-size:16.5px;color:var(--ink-soft);margin:0 0 16px;padding-left:24px;}
  .doc-body li{margin-bottom:7px;}
  .doc-body strong{color:var(--ink);}
  .doc-body code{
    font-family:var(--mono);font-size:14px;
    background:rgba(var(--ink-rgb),.07);padding:1px 6px;border-radius:4px;
  }
  .doc-body hr{border:none;border-top:1px solid var(--line);margin:34px 0;}
  .dk-code{
    background:var(--ink);color:var(--paper-2);padding:18px 20px;border-radius:10px;
    overflow-x:auto;font-size:13.5px;line-height:1.55;margin:0 0 18px;
  }
  .dk-code code{background:none;padding:0;color:inherit;font-size:inherit;}
  .dk-tabelle{overflow-x:auto;margin:0 0 20px;}
  .dk-tabelle table{width:100%;border-collapse:collapse;font-size:15.5px;}
  .dk-tabelle th{
    text-align:left;padding:9px 12px;border-bottom:2px solid var(--line);
    font-family:var(--mono);font-size:12px;letter-spacing:.05em;
    text-transform:uppercase;color:var(--ink-soft);
  }
  .dk-tabelle td{padding:10px 12px;border-top:1px solid var(--line);color:var(--ink-soft);
    vertical-align:top;}

/* The version line and the closing line of the document page. Both come
   from the shipped default text, so they need a style of their own — an
   unstyled class in a default text is a promise the stylesheet does not
   keep. */
.doc-version{color:var(--ink-soft);font-size:15px;margin-bottom:26px;}
.doc-signature{margin-top:30px;font-style:italic;color:var(--ink-soft);}

/* The pager, the empty note and the aside note.
   Same story as the tables in admin.css: they were defined on the
   statistics page alone, while the gallery, the questions and the
   partner page used them. */
  .aside-note{font-size:14px;color:var(--ink-soft);}
  .pager-row .hint{font-size:14.5px;color:var(--ink-soft);}
  .pager{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
  .pager a, .pager span{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:38px;height:38px;padding:0 11px;border-radius:9px;
    font-size:15px;font-weight:600;text-decoration:none;
  }
  .pager a{
    background:var(--card);border:1px solid var(--line);color:var(--ink-soft);
  }
  .pager a:hover{border-color:var(--pine-2);color:var(--pine);}
  .pager .current{background:var(--pine);color:var(--on-primary);}
  .pager .off{color:var(--ink-soft);opacity:.4;}
  .pager .gap{min-width:auto;padding:0 2px;color:var(--ink-soft);}
  @media (max-width:600px){
    .pager-row{justify-content:center;text-align:center;}
    .pager a, .pager span{min-width:34px;height:34px;padding:0 8px;font-size:14px;}
  }
  .empty-note{text-align:center;padding:50px 20px;color:var(--ink-soft);
    border:1px dashed var(--line);border-radius:16px;background:rgba(255,255,255,.6);}
.carousel-nav{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:6px;}
.carousel-prev, .carousel-next{
  width:40px;height:40px;border-radius:50%;cursor:pointer;
  border:1px solid var(--line);background:var(--card);color:var(--pine);
  font-family:var(--sans);
}
.carousel-prev:hover, .carousel-next:hover{border-color:var(--pine-2);}
.carousel-prev::before{content:'\2039';font-size:22px;line-height:1;}
.carousel-next::before{content:'\203A';font-size:22px;line-height:1;}
.carousel-dots{display:flex;align-items:center;gap:7px;}
.carousel-dot{
  width:10px;height:10px;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid var(--ink-soft);background:transparent;
}
.carousel-dot[aria-current]{background:var(--pine);border-color:var(--pine);}
.news-card{
  display:grid;grid-template-columns:190px 1fr;gap:18px;align-items:start;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;
}
.news-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);}
/* A card without a picture keeps no column for one — the marker comes
   from the template, not from a selector a browser may not know. */
.news-card-plain{grid-template-columns:1fr;}

/* One article */
.news-page .wrap{max-width:760px;}
  /* Read aloud, not seen: a field whose label is only a placeholder is
     unusable with a screen reader, and a placeholder is gone the moment
     somebody types. */
  .visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
  .signup-form, .signup-off{display:grid;gap:10px;max-width:560px;}
  /* The block shown where signing up is closed stands apart from the
     text above it. Its spacing belongs here and not in the module:
     the core already styles this selector, and a selector with two
     owners is styled by whichever block the page happens to print
     last — which changes with every module update (#465, #467). */
  .signup-off{margin:32px 0 0;padding:18px 0 0;border-top:1px solid var(--line);}
  .signup-form label, .signup-off label{font-weight:700;font-size:15px;}
  .signup-form input, .signup-off input{width:100%;padding:10px 12px;
    border:1px solid var(--line);border-radius:8px;font:inherit;}

  /* A box somebody ticks on a public form — the consent for a health
     question, say. The label wraps beside the box and stays clickable
     across its whole width. */
  .check-box{display:flex;align-items:flex-start;gap:10px;font-size:15px;
    line-height:1.5;cursor:pointer;}
  .check-box input{width:auto;margin-top:3px;flex:0 0 auto;}
  .empty{color:var(--ink-soft);}
  .flash{background:var(--paper-2);border-radius:var(--radius);padding:10px 14px;margin:12px 0 0;}
  /* The pieces of the search and of the questions: a field, a list of
     hits, a filter — each carries its own air, because above and below
     it stands the text of a page and not a section. */
  .search-piece,.faq-piece{display:flex;gap:8px;margin:var(--section-gap,32px) 0;}
  .search-piece input,.faq-piece input{flex:1;min-width:0;}
  /* What one can sign up for, and what one can borrow: two short lists
     in the middle of a text, each a way into the form. */
  .registration-piece,.booking-piece{margin:var(--section-gap,32px) 0;}
  .registration-list,.booking-list{list-style:none;margin:0;padding:0;display:grid;gap:10px;}
  .registration-list li,.booking-list li{display:flex;justify-content:space-between;gap:12px;}
  /* The shop and the menu, as pieces in a text: a few articles, a field
     to look for them, the basket, and the card by sections. */
  .shop-piece,.menucard-piece{margin:var(--section-gap,32px) 0;}
  .dating-categories .rights-list{margin:0;}

  @media (max-width:760px){
    .shop-layout{grid-template-columns:1fr;}
    .shop-article{grid-template-columns:1fr;}
    .dating-layout{grid-template-columns:1fr;}
    .dating-detail{grid-template-columns:1fr;}
    .dating-profile{grid-template-columns:1fr;}
    .dating-message{max-width:100%;}
  }

/* A menu link may carry a symbol beside its word — see inc/head.php.
   The word stays: a magnifier alone is nothing a screen reader reads
   out, and nothing a stranger recognises for certain — Ausgabe 222. */
.nav a.has-icon{display:inline-flex;align-items:center;justify-content:center;}
.nav a.has-icon::before{
    content:"";width:1em;height:1em;flex:0 0 auto;
    background-color:currentColor;
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    -webkit-mask-position:center;mask-position:center;
    -webkit-mask-size:contain;mask-size:contain;
  }
.nav a.icon-search::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E");
  }

/* ------------------------------------------------------------------
   THE ARRANGEMENT

   Four words, each of them a class on the body element. Which word is
   in force is a value of this installation, not a switch in the program
   — src/Design/Scheme.php names the words and src/Design/Layout.php
   puts the class on the body.

   Every word has rules here, the shipped one included. That is not
   ceremony: without them, switching away and back again would work in
   one direction only, and the check in
   tests/phpunit/DesignReachesTheStylesheetTest.php would have nothing
   to look at. For half a year these eight words reached the page and no
   rule anywhere mentioned one of them — Ausgabe 283.
   ------------------------------------------------------------------ */

/* ---------- The head of the front page ---------- */

/* As shipped: the dark field with the logo on its light seal. */
.head-hero .stage-frame{box-shadow:var(--shadow-lg);}

/* Plainly: no dark field at all. Everything that was written for a dark
   ground has to be taken back, or the front page opens with white text
   on a white surface — which is the one way this switch could do harm. */
.head-plain .stage{padding:40px 0 24px;}
.head-plain .stage-frame{background:none;box-shadow:none;border-radius:0;}
.head-plain .stage-frame::after{display:none;}
.head-plain .stage-inner{padding:0;min-height:0;}
.head-plain .stage-head h1{color:var(--ink);}
.head-plain .stage-head p{color:var(--ink-soft);}
.head-plain .stage-head .eyebrow{color:var(--brick);}
.head-plain .stage-logo{
  position:static;width:var(--logo-size);margin:0 0 22px;
  padding:0;background:none;box-shadow:none;
}
.head-plain .pin-card{
  background:var(--card);border:1px solid var(--line);
  backdrop-filter:none;box-shadow:var(--shadow);
}
.head-plain a.pin-card:hover{background:var(--paper-2);}
.head-plain .pin-card h2, .head-plain .pin-card h3{color:var(--ink);}
.head-plain .pin-card p, .head-plain .pin-place{color:var(--ink-soft);}
.head-plain .pin-card .eyebrow, .head-plain .pin-card .meta{color:var(--brick);}
.head-plain a.pin-card::after{color:var(--pine);}
.head-plain .pin-empty{
  background:var(--card);border:1px dashed var(--line);color:var(--ink-soft);
}
.head-plain .btn-ghost{border-color:var(--line);color:var(--pine);}

/* With a picture: the dark field keeps its shape, and the logo goes
   above the words instead of into the corner — a picture behind a seal
   in the corner is two focal points. */
.head-image .stage-frame{box-shadow:var(--shadow-lg);}
.head-image .stage-inner{align-items:center;text-align:center;}
.head-image .stage-head{max-width:720px;margin-left:auto;margin-right:auto;}
.head-image .stage-logo{
  position:static;width:var(--logo-size);margin:0 auto 24px;
}

/* ---------- Where the headings sit ---------- */

.align-left .section-head, .align-left .events-toolbar{text-align:left;}
/* The row of buttons under the tiles on the start page. It stood in the
   stylesheet of the module `shop` from #338 until 07.10.2026 — swept in
   with the module's own rules, one line above the comment where the shop
   begins. A website without that module was sent no `display:flex` and
   no `margin-top`, so its buttons sat against the tiles. Reported by the
   operator of the first customer's site; found by holding the rules of
   the two stylesheets against each other, not the selectors — the
   selector was still there, in the rule for narrow screens (#465). */
.cta-row{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap;}
.head-image .pin-grid, .head-image .cta-row{width:100%;justify-content:center;}
.align-center .cta-row{justify-content:center;}

.align-center .section-head{margin-left:auto;margin-right:auto;text-align:center;}
.align-center .stage-head{margin-left:auto;margin-right:auto;text-align:center;}
.align-center .stage-inner{align-items:center;}

/* ---------- Cards and tiles ---------- */

/* Raised is what the sheet does anyway; the other two take it away, so
   both have to say what they put in its place. */
.cards-raised .people-list, .cards-raised .route,
.cards-raised .photo-card, .cards-raised .panel{box-shadow:var(--shadow);}

.cards-flat .people-list, .cards-flat .route,
.cards-flat .photo-card, .cards-flat .panel{
  box-shadow:none;border-color:transparent;
}
.cards-flat .route:hover, .cards-flat .photo-card:hover{box-shadow:none;}

.cards-outlined .people-list, .cards-outlined .route,
.cards-outlined .photo-card, .cards-outlined .panel{
  box-shadow:none;background:transparent;border:1px solid var(--line);
}
.cards-outlined .route:hover{background:var(--paper-2);}
/* Only a frame, for the outlined button as well: no fill of its own and
   no shadow, the accent as border and writing (#759). */
.cards-outlined .btn-outline{
  background:transparent;box-shadow:none;
  border-color:rgba(var(--rye-bright-rgb),.55);color:var(--rye-bright);
}
.cards-outlined .btn-outline:hover{background:rgba(var(--rye-bright-rgb),.08);border-color:var(--rye-bright);color:var(--rye-bright);}

/* ---------- What lies behind the page ---------- */

.backdrop-fields::before{opacity:1;}
.backdrop-plain::before{display:none;}
.backdrop-plain::after{display:none;}

/* Curved surfaces: four ellipses, each soft at its edge, laid over the
   ground so that they read as swung bands rather than as circles. The
   colours are the ones of the design and not new fields beside them —
   two places for one colour is two places to change it.

   Decorative and nothing else: it lies behind everything, takes no
   pointer and says nothing to a screen reader, because `::before` has
   no content a reader announces.

   `inset` and not `width:100%`: a fixed layer wider than the viewport
   is the usual way a page gets a horizontal scrollbar nobody ordered. */
.backdrop-curves::before{
  display:block;opacity:1;
  position:fixed;inset:0;
  pointer-events:none;
  z-index:0;
  transform:translateY(calc((var(--curves-shift) - 50) * 0.4vh));
  filter:blur(28px);
  background:
    radial-gradient(60% 34% at 12% -6%,  rgba(var(--curves-a,var(--sky-rgb)),calc(0.34 * var(--curves-strength) / 100)),  transparent 70%),
    radial-gradient(52% 30% at 96% 12%,  rgba(var(--rye-bright-rgb),calc(0.20 * var(--curves-strength) / 100)), transparent 72%),
    radial-gradient(70% 40% at 72% 58%,  rgba(var(--sky-rgb),calc(0.26 * var(--curves-strength) / 100)),  transparent 74%),
    radial-gradient(64% 36% at -8% 96%,  rgba(var(--bar-rgb),calc(0.28 * var(--curves-strength) / 100)),  transparent 72%);
}
/* And one band across the middle, which is what makes it read as a
   curve instead of as four clouds. */
.backdrop-curves::after{
  display:block;
  position:fixed;inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(120% 22% at 50% 44%, rgba(var(--paper-2-rgb),0.16), transparent 70%);
}
/* On a telephone the shapes stand taller and softer: the same four
   surfaces on a narrow screen look like stripes, and a stripe behind a
   paragraph is what makes it hard to read. */
@media (max-width:640px){
  .backdrop-curves::before{
    filter:blur(34px);
    background:
      radial-gradient(90% 26% at 18% -4%, rgba(var(--curves-a,var(--sky-rgb)),calc(0.30 * var(--curves-strength) / 100)),  transparent 72%),
      radial-gradient(86% 24% at 86% 36%, rgba(var(--rye-bright-rgb),calc(0.18 * var(--curves-strength) / 100)), transparent 74%),
      radial-gradient(96% 30% at 30% 94%, rgba(var(--bar-rgb),calc(0.24 * var(--curves-strength) / 100)),  transparent 74%);
  }
  .backdrop-curves::after{display:none;}
}

/* The tone of the first surface: a colour of the palette, chosen by a word (vvv-cms#583). */
.backdrop-curves.curves-sky{--curves-a:var(--sky-rgb);}
.backdrop-curves.curves-rye{--curves-a:var(--rye-bright-rgb);}
.backdrop-curves.curves-bar{--curves-a:var(--bar-rgb);}

/* The fourth ground: satin ribbons behind the head of the page, the
   picture of inc/ribbons.php (vvv-cms#749). They lie under the header
   and the hero and scroll with them — `absolute` and not `fixed`, the
   band of the reference ends just below the buttons. Behind everything
   (`z-index:-1`, the ground of the page is the canvas), no pointer,
   and no blurred fields or dot grid of the first ground on top.

   Two greyscale maps (one of three pairs, below), a deep violet and a light lavender laid
   through them over a ground darker than the page: the satin of the
   approved image, in the colours of the design (DESIGN-01). The band
   keeps the proportions of the reference, so on a narrower screen the
   whole composition shrinks instead of a piece of it standing behind
   the headline, and it ends in a short fade into the ground. */
.ribbons{display:none;}
.backdrop-ribbons::before,.backdrop-ribbons::after{display:none;}
.backdrop-ribbons .ribbons{
  display:block;position:absolute;top:0;left:0;width:100%;height:min(495px,32.23vw);
  z-index:-1;pointer-events:none;overflow:hidden;
  /* Where the satin has faded, beside the search, the reference has a
     ground a shade lighter than the page, not the dark under the folds.
     The dark turns into it and it into the page without an edge: a step
     at 85 per cent drew a straight line across the foot of the hero. */
  background:linear-gradient(color-mix(in srgb,var(--paper) 55%,#000) 68%,
    color-mix(in srgb,var(--paper) 70%,var(--paper-2)) 90%,transparent);
}
/* And the satin itself runs out before 84 per cent, where the picture
   of the reference ends at the top of its search: that end stood as a
   second line across the foot of the hero. */
.backdrop-ribbons .ribbons span{--rb-fade:linear-gradient(#000 72%,transparent 84%);}
.ribbons span{
  position:absolute;inset:0;
  mask-image:var(--rb-map),var(--rb-fade,linear-gradient(#000,#000));mask-composite:intersect;
  mask-repeat:no-repeat;mask-position:50% 0;mask-size:cover,100% 100%;
}
/* The violet of the folds is the primary, less saturated and darker,
   which on the night template is the blue-violet of the reference. */
.ribbons .rb-mid{background:hsl(from var(--pine-2) h calc(s * .65) calc(l * .77));--rb-map:url(assets/ribbons-2-mid.webp);}
.ribbons .rb-light{background:color-mix(in srgb,var(--rye-bright) 40%,#fff);--rb-map:url(assets/ribbons-2-light.webp);}
/* Which of the three generated pairs (layout.ribbons, vvv-cms#764): the
   second as shipped, and for any word that fits none of these rules. */
.ribbons-1 .ribbons .rb-mid{--rb-map:url(assets/ribbons-1-mid.webp);}
.ribbons-1 .ribbons .rb-light{--rb-map:url(assets/ribbons-1-light.webp);}
.ribbons-2 .ribbons .rb-mid{--rb-map:url(assets/ribbons-2-mid.webp);}
.ribbons-2 .ribbons .rb-light{--rb-map:url(assets/ribbons-2-light.webp);}
.ribbons-3 .ribbons .rb-mid{--rb-map:url(assets/ribbons-3-mid.webp);}
.ribbons-3 .ribbons .rb-light{--rb-map:url(assets/ribbons-3-light.webp);}
/* The first and the third pair lay a bright fold behind the lower values
   of the hero on the wide screen too (4.34:1, measured): a light veil of
   the ground at the right edge keeps them readable. The narrower screens
   have their own, stronger one below. */
@media (min-width:1281px){
  .ribbons-1 .ribbons::after,.ribbons-3 .ribbons::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(to right,transparent 80%,color-mix(in srgb,var(--paper) 40%,transparent) 85%);
  }
}
/* Shrunk, the bright sheet of the right half comes to lie behind the
   values of the hero, which stand at the right edge: a veil of the
   ground keeps them readable there. The wide screen of the reference
   needs none, its values stand in the dark (DESIGN-01). */
@media (max-width:1280px){
  /* And the shrunk band ends inside the hero: its dark ground fades out
     over the last third instead of standing as a stripe behind it. */
  .backdrop-ribbons .ribbons{background:linear-gradient(color-mix(in srgb,var(--paper) 55%,#000) 60%,transparent);}
  .backdrop-ribbons .ribbons span{--rb-fade:linear-gradient(#000 45%,transparent 82%);}
  .backdrop-ribbons .ribbons::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(to right,transparent 62%,color-mix(in srgb,var(--paper) 88%,transparent) 80%);
  }
}

/* On a telephone the band of the reference, 32 per cent of the width, is
   a strip of 120 points above the headline, and the ribbons are gone
   (vvv-cms#735). The same one picture is laid out again by the
   stylesheet alone, no second file and no script: the band grows with
   the width of the screen until it reaches down behind the buttons, the
   picture is scaled to the width of the screen and set below the
   headline, cut at the sides so the bright fold of the right half stays
   in view, and the satin fades in only under the headline and its
   subtitle: the heading stands on the dark ground, as the brightest
   point behind it is measured (tests/rahmen.sh). */
@media (max-width:600px){
  .backdrop-ribbons .ribbons{height:150vw;background:linear-gradient(color-mix(in srgb,var(--paper) 55%,#000) 55%,transparent);}
  .ribbons span{mask-size:auto 100vw,100% 100%;mask-position:78% 50vw,0 0;}
  .backdrop-ribbons .ribbons span{--rb-fade:linear-gradient(transparent 38%,#000 55%,#000 80%,transparent 98%);}
  .backdrop-ribbons .ribbons::after{
    background:linear-gradient(to bottom,transparent 60%,color-mix(in srgb,var(--paper) 40%,transparent) 85%);
  }
}

/* ---------- The bar of the approved homepage (#750) ----------

   Name on the left, the menu in the middle of the page, the buttons on
   the right; a larger mark, the suffix in the accent, the current entry
   underlined. Only where there is room for it: below 1281 points the
   bar is the classic one, with the menu folding into its button at 860
   as always. */
.bar-classic .brand-suffix{color:inherit;}
.bar-centred .brand-suffix{color:var(--brick);}
/* Between the telephone and the wide screen the menu, the larger
   buttons and the name do not fit in one row: the menu folds into its
   button already here, as it does below 860 everywhere. */
@media (min-width:861px) and (max-width:1439px){
  .bar-centred .links{
    position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;display:none;
    padding:6px 24px 16px;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:var(--shadow);
  }
  .bar-centred .links.open{display:flex;}
  .bar-centred .links a{padding:14px 0;border-bottom:1px solid var(--line);display:block;}
  .bar-centred .nav-toggle{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;}
}
@media (min-width:1440px){
  /* The two outer columns never shrink below what stands in them
     (nowrap makes that the whole brand and both buttons), so the menu is
     centred where there is room and never sits on either; the gaps give
     way first, then the compact bar above takes over (vvv-cms#870). */
  .bar-centred .nav{display:grid;grid-template-columns:minmax(max-content,1fr) auto minmax(max-content,1fr);align-items:center;column-gap:24px;padding:12px 40px;}
  /* Gap, name and line are looks of their own (vvv-cms#869): one coupled
     logo size cannot say "larger name, same mark". Unset they are what
     they were: 16, 40 and 11, declared with the others in :root. */
  .bar-centred .brand{gap:var(--brand-gap);justify-self:start;}
  .bar-centred .brand .mark{height:min(calc(var(--logo-size) * .3053),90px);width:auto;}
  .bar-centred .brand-label{font-size:var(--brand-name-size);line-height:1;font-weight:600;}
  .bar-centred .brand-tagline{font-size:var(--brand-tagline-size);}
  .bar-centred .links{gap:clamp(40px,calc(40px + (100vw - 1440px) * .0729),47px);}
  .bar-centred .links a{
    font-size:15px;font-weight:400;padding:6px 0 11px;
    color:color-mix(in srgb,var(--ink) 88%,var(--bar));
  }
  .bar-centred .links a:hover{color:var(--ink);border-color:rgba(var(--rye-bright-rgb),.5);}
  .bar-centred .links a.current,.bar-centred .links a[aria-current="page"]{color:var(--ink);border-color:var(--rye-bright);font-weight:500;}
  /* Measured on the reference: 99 from the menu to the first button,
     136 and 168 wide, 49 between them (DESIGN-02). */
  .bar-centred .nav-actions{justify-self:end;gap:clamp(29px,calc(29px + (100vw - 1440px) * .2083),49px);}
  .bar-centred .nav-actions .btn{min-height:42px;padding:0 19px;font-size:15px;font-weight:500;border-radius:10px;}
  .bar-centred .nav-actions .btn-primary{box-shadow:none;}
  .bar-centred .nav-actions .btn-outline{
    border-radius:999px;padding:0 12px 0 9px;gap:7px;background:transparent;box-shadow:none;
    border-color:rgba(var(--rye-bright-rgb),.5);color:var(--rye-bright);font-size:13px;
  }
}
/* A label of a button is one line at every width; two buttons that do
   not fit stand in a row of their own on a telephone, never broken
   inside a word (vvv-cms#870). */
.bar-centred .nav-actions .btn{white-space:nowrap;}
/* The badge stands before the word, as a ring, and the word keeps the
   normal weight — at every width: below 1281 the badge came after the
   word, in bold, the other way round from the wide bar (DESIGN-02). */
.bar-centred .nav-actions .btn-outline{font-weight:400;}
.bar-centred .action-badge{
  order:-1;display:inline-grid;place-items:center;width:26px;height:26px;margin:0;padding:0;
  border-radius:50%;font-size:12px;font-weight:500;
}
/* The brand is mark, name with suffix and the line under it at every
   width. The classic bar drops the line below 1281 and the suffix on a
   telephone; this one has room for both, because its buttons take a
   row of their own there (DESIGN-02). */
@media (max-width:1439px){
  .bar-centred .brand-tagline{display:block;}
}
/* Up to 860 the buttons take a row of their own, as they do up to 560 on
   the classic bar: brand and menu button share the first (vvv-cms#870). */
@media (max-width:860px){
  .bar-centred .nav{flex-wrap:wrap;}
  .bar-centred .nav-actions{display:contents;}
  .bar-centred .nav-actions > .btn{order:5;flex:1 1 auto;justify-content:center;padding:9px 10px;font-size:14px;}
  .bar-centred .nav:has(.nav-actions > .btn)::after{content:"";order:4;flex-basis:100%;}
  /* Basis 0: the row is broken by what the brand needs at least, not by the line under its name. */
  .bar-centred .brand{margin-right:auto;flex:1 1 0;}
}
/* Above a telephone the buttons keep their own width, so the ring stays at the front of its word. */
@media (min-width:561px) and (max-width:860px){
  .bar-centred .nav-actions > .btn{flex:0 0 auto;}
}
@media (max-width:430px){
  .bar-centred .brand-suffix{display:inline;}
  .bar-centred .brand-tagline{font-size:10px;letter-spacing:.08em;}
}
/* The wordmark is what identifies the site on a telephone: the inherited
   rule dropped it below 370 points and left the line standing alone. The
   line goes first, and where it does not fit the box clips it. */
@media (max-width:370px){
  .bar-centred .brand-label{display:block;}
  .bar-centred .brand-tagline{display:none;}
}
.bar-centred .brand-words{overflow:hidden;}

/* ---------- The type of the approved homepage (#752) ----------

   A high-contrast serif for the headings, the kickers spaced out in the
   sans and in the muted lavender, the headline of the hero large and
   tight. The face lies in assets/fonts like the others. */
.type-classic .eyebrow{font-family:var(--mono);}
.sans-worksans{--sans:'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;}
.sans-inter{--sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;}
.type-display{--serif:'Playfair Display', Georgia, 'Times New Roman', serif;}
.type-display .eyebrow{font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.25em;color:var(--sky);}
.type-display .hero-title{font-size:clamp(40px,5.2vw,80px);line-height:.97;letter-spacing:-.01em;font-weight:600;}
/* The quieter words of the hero, the line, the values and the outlined
   button, in the light lavender of the reference: the accent drawn
   toward the writing, so a light theme keeps them dark. */
.type-display{--quiet-accent:color-mix(in srgb,var(--rye-bright) 40%,var(--ink));}
.type-display .hero-subtitle{font-size:clamp(18px,1.7vw,26px);letter-spacing:.12em;color:var(--quiet-accent);}

/* The rest of the hero as the reference measures it (DESIGN-04, -12).
   The headline breaks into even lines — „Dein Raum für“ over „offene
   Begegnungen.“ and not one word later —, in a lavender-tinted white, its cap
   45 points under the bar and the whole column 24 points inside the
   edge of the search below. The values are a quiet column at the right
   edge: larger outline symbols, both lines alike in weight and colour.
   No glow under the filled button, and the outlined one in the normal
   weight. */
.type-display .hero{padding:35px 12px 27px 24px;}
.type-display .hero-title{text-wrap:balance;color:color-mix(in srgb,var(--ink) 75%,var(--pine));}
/* The line under the headline 26 above the buttons and not 14: the
   headline gives 11 and the buttons keep their place (whole page of
   14.10.2026). */
.type-display .hero-title{margin-bottom:11px;}
.type-display .hero-subtitle{margin-bottom:0;line-height:1.2;}
.type-display .hero .cta-row{gap:21px;margin-top:20px;}
.type-display .hero .btn-primary{box-shadow:none;}
.type-display .hero .btn-outline{font-weight:500;}
.type-display .hero-with-values .hero-values{justify-self:end;}
.type-display .hero-values .feature{gap:22px;}
.type-display .hero-values .feature-icon{width:28px;height:28px;margin-top:4px;color:var(--rye-bright);}
.type-display .hero-values .feature-words strong,
.type-display .hero-values .feature-words span{font-size:14px;font-weight:400;color:var(--quiet-accent);line-height:1.4;}
.type-display.cards-outlined .hero .btn-outline:not(:hover){color:var(--quiet-accent);}
/* The rhythm under the hero: 34 points to the search and 23 from the
   search to the cap of the next heading. A piece of a module brings no
   air of its own inside a box here; the boxes carry it. Said as the
   distance of a box to the one above (#753), so it is counted once with
   the gap and not on top of it: 7 under the hero, which keeps 27 of its
   own, and 10 between two pieces of a module, as the search and its
   list on the reference. `:where` leaves the distance an operator
   gives one box in front. */
:where(.type-display .box-grid > .box[data-box^="module:"]){--box-space:7px;}
:where(.type-display .box-grid > .box[data-box^="module:"] + .box[data-box^="module:"]){--box-space:10px;}
.type-display .box-grid > .box[data-box^="module:"] > *{margin-block:0;}
.type-display .section-link{font-size:14px;text-decoration:none;color:color-mix(in srgb,var(--sky) 40%,var(--ink));}
/* One column on a telephone: no inset, and the values under the words. */
@media (max-width:760px){
  .type-display .hero{padding:24px 0;}
  .type-display .hero-with-values .hero-values{justify-self:start;}
}

/* A picture of the media library behind one section (vvv-cms#733).
   The frame puts an empty layer first in the box; the page writes its
   picture, place, size, opacity and overlay as rules for that one box.
   The layer lies behind the content of its own box and in front of the
   page — `isolation` keeps the negative z-index inside the box —, takes
   no pointer, and the overlay sits inside it, so the text above is
   never dimmed. `inset` and `overflow`: a picture larger than the box
   is cut at its edge, never a horizontal scrollbar. */
.has-bg{isolation:isolate;}
.box-grid > .has-bg{position:relative;}
.section-bg{
  position:absolute;inset:0;z-index:-1;
  pointer-events:none;overflow:hidden;border-radius:inherit;
}
/* The picture before, the overlay after: each with its own opacity, so
   fading the picture does not fade the overlay with it. */
.section-bg::before,.section-bg::after{content:"";position:absolute;inset:0;}
.section-bg::before{background-position:center;background-size:cover;background-repeat:no-repeat;}
.section-bg::after{opacity:0;}

/* How far the layer reaches sideways (vvv-cms#790). The layer is a child
   of its box, the box is a grid item of `.wrap`, and `.wrap` has a maximum
   width (`--wrap`): with `inset:0` the layer can be no wider than the
   content column however wide the screen is, and `cover` fills that
   rectangle only. `reach-viewport` — a class `SectionBackground::
   layerClass()` puts on the layer — lets it out on both sides by the same
   distance. `calc(50% - 50vw)` from the edge of the box is the middle of
   the box less half the window, so the layer is as wide as the window and
   sits on the middle of its box. That is the middle of the page whenever
   the box stands alone in its row: `.wrap` is centred (`margin:0 auto`,
   equal padding) and a box of twelve twelfths takes all of it. The rule is
   therefore for exactly those boxes — twelve twelfths on a wide screen,
   and every box up to 860 points, where `.box` takes a whole row and the
   free area is a column. A box beside another one, and a box on the free
   area of a wide screen, keep the width of their own box, because their
   middle is not the middle of the page.

   Nothing of the content moves: the layer is out of the flow, so the box
   keeps its column, its maximum width and its alignment, and the layer
   stays behind it (`z-index:-1`) and out of the way of the pointer.

   `50vw` counts the scrollbar of the window, which the page does not
   have. With a classic scrollbar the layer therefore overshoots the page
   by half the width of that scrollbar on each side: on the left, where
   nothing scrolls to, and on the right, where the page would grow a
   horizontal scrollbar. `main` is the one element exactly as wide as the
   page, so on a page that has such a layer it cuts off what sticks out.
   `clip` and not `hidden`: clip makes no scroll container, so the header
   and everything sticky stays stuck to the window and no margin collapses
   differently. A page without such a layer is not touched. At 403 points
   (overlay scrollbar, none to count) the layer is the window exactly,
   from 0 to 403, and there is nothing to cut. */
@media (min-width:861px){
  .box-grid > .box.span-12 > .section-bg.reach-viewport{inset-inline:calc(50% - 50vw);border-radius:0;}
}
@media (max-width:860px){
  .box > .section-bg.reach-viewport{inset-inline:calc(50% - 50vw);border-radius:0;}
}
main:has(.section-bg.reach-viewport){overflow-x:clip;}

/* A soft edge (vvv-cms#790): the picture and its overlay fade out to the
   left and the right over 12 per cent of the layer each — a mask of the
   layer, so both fade together. For either reach: at the width of the
   content it softens the column, at the width of the window the edge of
   the page. */
.section-bg.edge-soft{mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);}

/* ------------------------------------------------------------------
   THE BOXES OF THE FRONT PAGE

   Twelve columns, and every box says how many of them it takes. Which
   boxes there are, in which order and how wide, is a value of this
   installation — src/Design/Boxes.php answers it, admin/layout.php sets
   it, index.php draws it.

   On a narrow screen every box is whole again. A third of a phone is not
   a column, it is a word per line.
   ------------------------------------------------------------------ */

/* Advertising: the box of the core and the unit at the end of a page (vvv-cms#702, #714) */
.advert-box,.page-advert{min-width:0;overflow:hidden;}
.page-advert{margin:24px 0;}
/* The unit of 300x250 holds its place before it loads, so the page below it does not jump, and it is never clipped
   (vvv-cms#888): where the content width is under 300 points (a 320 point screen with its two margins) the box is
   not shown at all, the approved alternative to a cut-off unit. */
.advert-box,.page-advert{min-height:250px;}
@media (max-width:339px){.advert-box,.page-advert{display:none;}}

/* The area in the middle: one picture, one sentence, and nothing else.
   With the menu bar and the footer switched off this is the whole page,
   so it carries its own air instead of relying on a header above it. */
.blank-area{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:24px;
  min-height:min(70vh,640px);
  text-align:center;
}
.blank-image{max-width:min(100%,520px);height:auto;border-radius:var(--radius,14px);}
.blank-title{margin:0;}
.blank-text{max-width:60ch;}

/* A module's piece inside a text, Vorgang 301. Without a width it fills the
   line; with one it takes that many twelfths, so two halves stand side
   by side. Under 860 pixels every piece is the whole width — two
   columns of a third are two columns of nothing on a telephone. */
.piece{
  display:inline-block;
  vertical-align:top;
  width:calc(var(--span,12) / 12 * 100%);
  margin:var(--section-gap,32px) 0;
}
.piece > section{margin:0;}
@media (max-width:860px){
  .piece{width:100%;}
}

/* The free area, Vorgang 300. Every box lies where it was dropped — in
   shares, not in pixels, so the same arrangement looks the same on 1100
   and on 1600 pixels. The height of the area grows with what lies in
   it: the page sets `--canvas-h` from the lowest box.

   Under 860 pixels it becomes one column, in reading order. That is not
   a fallback: an area built on 1400 pixels is no area on 390, and what
   lay bottom right would be gone. */
/* States a script sets — as a class and not as a declaration on the
   element. A nonce holds for an element, never for a property (#169),
   so a browser refuses `element.style.x = …`; the lightbox therefore
   always showed its arrows and never locked the scrolling (#437). */
.is-away{display:none;}
body.is-locked{overflow:hidden;}
.is-offscreen{position:fixed;opacity:0;pointer-events:none;}

.box-canvas{
  position:relative;
  min-height:var(--canvas-h,60vh);
}
.box-canvas > .box{
  position:absolute;
  /* The reading position, as a value and no longer as a declaration in
     the rule the page writes. Everything that reaches a scoped rule is
     a custom property now, and the rule itself is built in one place
     that checks both halves (#521). */
  order:var(--box-order,0);
  left:calc(var(--box-x,0) / 10 * 1%);
  top:calc(var(--box-y,0) / 10 * 1%);
  width:calc(var(--box-w,1000) / 10 * 1%);
  min-height:calc(var(--box-h,200) / 10 * 1%);
  /* The box's own padding, not nought: this rule stands later in the
     file than the one that reads `--box-gap`, so `padding:0` here threw
     away what an operator had set (#521). Nought stays the fallback. */
  padding:var(--box-gap,0);
}
/* While a box is being dragged: the grid it lands on, and the box a
   little lifted. Both belong to the administration — a visitor never
   sees them, because nothing switches these classes on out there. */
.box-canvas.shows-grid{
  background-image:linear-gradient(to right,var(--line) 1px,transparent 1px),
                   linear-gradient(to bottom,var(--line) 1px,transparent 1px);
  background-size:5% 5%;
}
.box-canvas > .box.is-dragged{opacity:.85;cursor:grabbing;
  box-shadow:0 10px 30px rgba(0,0,0,.18);}
.box-canvas > .box{cursor:grab;}

@media (max-width:860px){
  .box-canvas{min-height:0;display:flex;flex-direction:column;gap:var(--section-gap,32px);}
  .box-canvas > .box{position:static;width:auto;min-height:0;}
  /* A box with a background stays the box its layer is measured
     against; static, the layer took the whole area and lay over the
     boxes below it (#733). */
  .box-canvas > .box.has-bg{position:relative;left:auto;top:auto;}
}

/* **One rhythm for every box, counted once** (vvv-cms#753). The gap
   between two rows of boxes is the spacing of the sections, whether a
   box comes from the core or from a module. Until 2.45 it was 0, half
   and a whole spacing by kind of box, and three spacings between two
   module pieces: the padding of `.box` was cancelled by the box's own
   look (`.box[data-box]`, #521) for every box, the module boxes got a
   margin of their own for it (#644), and their pieces added theirs on
   top. A grid gap is the one place that knows both neighbours. */
.box-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--section-gap,32px) 32px;
  align-items:start;
  /* The last row stands one spacing above the footer, as each row
     stands one below the row before; nothing else gives it that air. */
  padding-block-end:var(--section-gap,32px);
}
.box{grid-column:span var(--span,12);}
/* The box owns the gap at its edges, and its piece adds none there: the
   intent of `.box section` above, for pieces that are no section — the
   pieces of a module carry a margin for the middle of a text. */
.box[data-box] > :first-child,.box[data-box] > .section-bg + *{margin-block-start:0;}
.box[data-box] > :last-child{margin-block-end:0;}
/* A box that was told its own distance to the box above (`space`,
   `Design\BoxStyle`) stands that far from it instead of one spacing.
   The first box has nothing above it. */
.box-grid > .box[data-box]{margin-block-start:calc(var(--box-space,var(--section-gap,32px)) - var(--section-gap,32px));}
/* Nor has its neighbour in the first row of a wide screen: told 0, it
   rose a spacing above the grid into the header (review of vvv-cms#753).
   `Design\BoxFrames` gives it `--box-space-wide`; stacked on a telephone
   it is the second row, and there its own distance counts. */
@media (min-width:861px){
  .box-grid > .box[data-box]{margin-block-start:var(--box-space-wide,calc(var(--box-space,var(--section-gap,32px)) - var(--section-gap,32px)));}
}
.box-grid > .box:first-of-type{margin-block-start:0;}
/* The four widths a box or a piece can have, as classes.
   `Cms\Design\Boxes::WIDTHS` says which four, and there are only four —
   so the value belongs in the stylesheet and not in a style attribute
   at the place of use. An attribute is what no nonce can reach, and
   the rule below asked for one by name (#169). */
.span-4{--span:4;}
.span-6{--span:6;}
.span-8{--span:8;}
.span-12{--span:12;}
/* A box beside another one carries its own air on the side, or two
   half-width boxes touch at the seam. */
.box:not(.span-12){min-width:0;}
/* Stacked on a telephone the rows keep the same spacing between them;
   only the columns go (#644). */
@media (max-width:860px){
  .box{grid-column:span 12;}
  .box-grid{column-gap:0;}
}
/* The caption beside a picture a model made or changed — no switch, it
   is the disclosure a reader is owed (#812). Cms\Images\SyntheticMarks. */
.media-ai-mark{
  display:block;margin:4px 0 12px;font-size:13px;line-height:1.4;
  color:var(--ink-soft);font-style:italic;
}