/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("assets/fonts/546fb0ff-f0c0-418e-bb0c-a200adf436ac.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("assets/fonts/cf44af65-346d-4300-b812-5af6f52215db.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("assets/fonts/72e7c2b4-4790-4b6e-a357-0eed7c2fe226.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("assets/fonts/608b7f7e-1952-4a83-aba6-921e254ea539.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/546fb0ff-f0c0-418e-bb0c-a200adf436ac.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/cf44af65-346d-4300-b812-5af6f52215db.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/72e7c2b4-4790-4b6e-a357-0eed7c2fe226.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/608b7f7e-1952-4a83-aba6-921e254ea539.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/546fb0ff-f0c0-418e-bb0c-a200adf436ac.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/cf44af65-346d-4300-b812-5af6f52215db.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/72e7c2b4-4790-4b6e-a357-0eed7c2fe226.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/608b7f7e-1952-4a83-aba6-921e254ea539.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/546fb0ff-f0c0-418e-bb0c-a200adf436ac.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/cf44af65-346d-4300-b812-5af6f52215db.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/72e7c2b4-4790-4b6e-a357-0eed7c2fe226.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/608b7f7e-1952-4a83-aba6-921e254ea539.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/546fb0ff-f0c0-418e-bb0c-a200adf436ac.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/cf44af65-346d-4300-b812-5af6f52215db.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/72e7c2b4-4790-4b6e-a357-0eed7c2fe226.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/608b7f7e-1952-4a83-aba6-921e254ea539.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("assets/fonts/546fb0ff-f0c0-418e-bb0c-a200adf436ac.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("assets/fonts/cf44af65-346d-4300-b812-5af6f52215db.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("assets/fonts/72e7c2b4-4790-4b6e-a357-0eed7c2fe226.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("assets/fonts/608b7f7e-1952-4a83-aba6-921e254ea539.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;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/af4d8483-4c1d-49e5-b4b5-4a87dadbae1c.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/02fdc52a-3dd3-4551-8793-9d4ea88f691a.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/822f333b-ae12-46b3-ade5-28077c02bced.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;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/53713f95-c333-4d08-8507-1d296828fc10.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/de69b31e-27c6-4ce3-a3c2-2050f9163584.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/23c6a1e2-94e4-4482-9b33-28b323497fb8.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;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/53713f95-c333-4d08-8507-1d296828fc10.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/de69b31e-27c6-4ce3-a3c2-2050f9163584.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/23c6a1e2-94e4-4482-9b33-28b323497fb8.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;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/53713f95-c333-4d08-8507-1d296828fc10.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/de69b31e-27c6-4ce3-a3c2-2050f9163584.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/23c6a1e2-94e4-4482-9b33-28b323497fb8.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;
}


/* ============ APP / LAYOUT ============ */


/* Weicher Uebergang zur eigenen Markt-Seite und zurueck. */
@view-transition{navigation:auto}
/* Markt in der App: der Rahmen fuellt alles zwischen Kopf und unterer Leiste,
   die Seite dahinter scrollt nicht. Siehe renderMarkt(). */
.markt-rahmen{position:fixed;left:0;top:var(--mk-oben,75px);width:100%;border:0;display:block;background:var(--paper);z-index:1;
  height:calc(100vh - var(--mk-oben,75px) - var(--mk-unten,0px));height:calc(100dvh - var(--mk-oben,75px) - var(--mk-unten,0px))}
body.auf-markt{overflow:hidden}
body.auf-markt #markt .wrap{padding:0}
/* Die Einblend-Animation der Seiten setzt ein transform, das wuerde den festen
   Rahmen an die Seite binden. Darum blendet hier der Rahmen selbst gleich ein. */
body.auf-markt #markt.page{transform:none!important;animation:none!important;filter:none!important}
body.auf-markt .markt-rahmen{animation:fade .5s ease both}
:root{
  /* — aus dem Screenshot übernommen — */
  --paper:        #FBFAF7;   /* warmes Off-White, Papierton */
  --paper-2:      #F4F2EC;   /* leicht abgesetzte Fläche */
  --ink:          #1A1A17;   /* fast-schwarz, Headlines */
  --ink-soft:     #6E6E67;   /* Grau, Fliesstext */
  --faint:        #ABAAA2;   /* gesperrte Labels, Ziffern */
  --line:         #E4E1D9;   /* Haarlinie */
  --line-2:       #D2CFC6;   /* etwas kräftiger */
  /* — zurückhaltende Akzente für Stat-Kacheln — */
  --green:        oklch(0.50 0.085 150);
  --red:          oklch(0.515 0.135 28);
  --gold:         #9a7b3f;   /* Akzent für Gratis-Label, Member-Knopf */
  --letter-blau:  #1E3A5F;   /* das Blau der Titelbilder, Merkmal "Letter" */
  /* Die Merkmale des Kalenders. Blau ist schon da, das Gelb ist ein
     eigener Ton und nicht --gold: der steht auf hellen Flaechen als Schrift
     und darf sich nicht mitverschieben. */
  --kurz-lila:    #6B4E9B;   /* Merkmal "Update" */
  /* Merkmal "Special". Bewusst ins Magenta gezogen und satter als das
     --kurz-lila darueber: als 6px-Punkt im Blatt muessen die beiden Violetts
     auf einen Blick zu unterscheiden sein. */
  --special-lila: #9B2F86;
  /* Das Blau der Membership. Genau der Ton von mitglied-werden.html,
     damit der Weg vom Knopf zur Kaufseite eine Farbe hat. */
  --member-blau:  #0B2FC2;
  --mu-gelb:      #B98A1E;   /* Merkmal "Marktupdate" */
  /* Merkmal "Bericht". Ein Gruenton, weil Blau, Gelb, die zwei Violetts und
     das Rot schon vergeben sind und im 16x4-Balken der Legende alle sechs
     nebeneinander unterscheidbar bleiben muessen. */
  --bericht-gruen:#2E6F5E;
  --live-rot:     #B4453F;   /* Merkmal "Live Desk ist offen" */
  /* Die Gattung "Morning Briefing". Deutlich dunkler und satter als das
     --kurz-lila oben und weit weg vom Magenta des --special-lila: die drei
     Violetts stehen nie im selben Bild, aber verwechselbar sollen sie trotzdem
     nicht sein. Dieselbe gedeckte Tiefe wie --letter-blau und
     --bericht-gruen, damit es sich nicht vordraengt. */
  --morning-violett:#5A32A8;
  --serif:'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --surface:      #ffffff;   /* Karten / erhabene Flächen */
  --surface-soft: #fffdfa;   /* Eingabefelder */
  --hl:           #F6E6A2;   /* Markierungs-Gelb */
  --hl-green:     #BCE3C2;   /* Markierungs-Grün */
  --hl-red:       #F4C3BE;   /* Markierungs-Rot */
  --read-scale: 1;           /* Schriftgrösse im Reader */
  --pill-bg:      #1A1A17;   /* schwebende Leisten/Buttons, immer kontrastreich */
  --pill-fg:      #F4F2EC;
  /* Tabellen. Ein Hauch Blau aus der Letter-Familie, nie laut: die Zahlen
     sollen vorne stehen, das Raster nur ordnen. */
  --tab-kopf:     #EFF4FD;   /* Kopfzeile */
  --tab-kopf-fg:  #3C5FA6;   /* Spaltenbeschriftung */
  --tab-linie:    #DCE6F8;   /* Trennlinien und Rahmen */
  --tab-zebra:    #F9FBFE;   /* jede zweite Zeile */
}
/* — Sepia-Lesemodus — */
body.theme-sepia{
  --paper:#F3E9D2; --paper-2:#EBDFC2; --ink:#3A2E1C; --ink-soft:#6B5C42;
  --faint:#A89673; --line:#E0D2B4; --line-2:#CFBD98;
  --surface:#FBF3DF; --surface-soft:#FBF3DF; --hl:#E9CF86; --hl-green:#CBDDB4; --hl-red:#E8C0AC;
  --pill-bg:#3A2E1C; --pill-fg:#F3E9D2;
  /* Im Sepia bleibt das Blau gebrochen, sonst sticht es aus dem warmen Papier */
  --tab-kopf:#EDE3CB; --tab-kopf-fg:#5A6E93; --tab-linie:#D6C8A8; --tab-zebra:#F7EFDA;
}
/* — Dunkler Lesemodus — */
body.theme-dark{
  --paper:#15151A; --paper-2:#1E1E25; --ink:#ECEAE3; --ink-soft:#A8A59C;
  --faint:#6C6A64; --line:#2B2B33; --line-2:#3A3A44;
  --surface:#1C1C23; --surface-soft:#20202a; --hl:#6a5a1f; --hl-green:#2f5236; --hl-red:#5e2f2c;
  --green:oklch(0.72 0.11 150); --red:oklch(0.68 0.15 28);
  --letter-blau:#8FB4DC;   /* im dunklen Lesemodus aufgehellt, sonst unlesbar */
  --kurz-lila:#B39BDD; --mu-gelb:#D9B25C;   /* beide aus demselben Grund aufgehellt */
  --special-lila:#E88FD0;  /* dito, und weiter ins Rosa als --kurz-lila daneben */
  --bericht-gruen:#7FC0AC; /* dito, das satte Gruen verschwaende im Dunkeln */
  --member-blau:#5B86F5;   /* aufgehellt, sonst verschwindet der Kicker im Dunkeln */
  --live-rot:#E88079;      /* dito, das satte Rot verschwände im Dunkeln */
  --morning-violett:#AE93F2; /* dito, und bewusst blauer als das --kurz-lila */
  --pill-bg:#ECEAE3; --pill-fg:#15151A;
  --tab-kopf:#1B2130; --tab-kopf-fg:#7FA0D9; --tab-linie:#2A3245; --tab-zebra:#191A21;
}
body.theme-dark img.app-logo,body.theme-dark .article img,body.theme-dark .chart-ph img,body.theme-dark .exp-article img{filter:brightness(.92)}
*{margin:0;padding:0;box-sizing:border-box;border-radius:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-weight:400;
  font-feature-settings:"tnum","zero";
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  line-height:1.5;
}
.tnum{font-variant-numeric:tabular-nums slashed-zero}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input{font-family:inherit}
a{color:inherit;text-decoration:none}
::selection{background:var(--ink);color:var(--paper)}

/* ——— Bausteine ——— */
.label{
  font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--faint);
}
.label .dot-sep{padding:0 .55em;color:var(--line-2)}
.rule{height:1px;background:var(--line);border:0;width:100%}
.rule-strong{height:2px;background:var(--ink);border:0;width:100%}
.serif{font-family:var(--serif)}

.page{display:none;animation:fade .5s ease both}
.page.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.wrap{max-width:1180px;margin:0 auto;padding:0 48px}
@media(max-width:720px){.wrap{padding:0 22px}}

/* ===========================================================
   LOGIN
   =========================================================== */
/* Zwei Spalten: links das Titelbild, rechts das Formular. Das Bild traegt
   keine Aussage, es steht als Hintergrund im Markup und ist `aria-hidden`.
   Unter 900px wird daraus ein Band ueber dem Formular, sonst bliebe fuer
   die Eingaben kein Platz mehr. */
#login{min-height:100vh;display:none;background:var(--paper)}
#login.active{display:grid;grid-template-columns:1fr 1fr}
.login-bild{
  background:#0A0A0F url('assets/login-bild.jpg') center 44%/cover no-repeat;
  border-right:1px solid var(--line);
}
.login-spalte{display:flex;flex-direction:column;min-height:100vh}
.login-mid{flex:1;display:flex;align-items:center;justify-content:center;padding:40px 22px}
.login-box{width:100%;max-width:404px}
.login-mark{
  font-family:var(--serif);font-weight:500;font-size:30px;letter-spacing:.02em;
  text-align:center;line-height:1.1;
}
.login-mark .sm{
  display:block;font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.42em;text-transform:uppercase;color:var(--faint);margin-top:14px;
  padding-left:.42em;
}
.login-rule{display:flex;align-items:center;gap:16px;margin:30px 0 34px}
.login-rule .rule{flex:1}
.login-rule .num{font-family:var(--serif);font-size:13px;color:var(--faint);font-style:italic}
.field{margin-bottom:20px}
.field label{display:block;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:9px}
.field input{
  width:100%;background:transparent;border:none;border-bottom:1px solid var(--line-2);
  padding:9px 2px;font-size:16px;color:var(--ink);transition:border-color .2s;
}
.field input::placeholder{color:var(--faint)}
.field input:focus{outline:none;border-bottom-color:var(--ink)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--ink);color:var(--paper);font-size:13px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;padding:15px 22px;width:100%;
  transition:background .18s,transform .05s;
}
.btn:hover{background:#000}
.btn:active{transform:translateY(1px)}
.btn .arr{font-family:var(--sans);font-weight:400}
.login-forgot{text-align:center;margin-top:22px}
.login-forgot a{font-size:13px;color:var(--ink-soft);border-bottom:1px solid var(--line-2);padding-bottom:1px;transition:color .2s,border-color .2s}
.login-forgot a:hover{color:var(--ink);border-color:var(--ink)}
.login-forgot-t{margin:8px auto 0;max-width:30em;font-size:12.5px;line-height:1.5;color:var(--ink-soft)}
.login-wege{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.login-wege a{font-size:13px;color:var(--ink-soft);padding:6px 0;border-bottom:1px solid transparent}
.login-wege a:hover{color:var(--ink);border-color:var(--line-2)}
@media(max-width:900px){
  #login.active{grid-template-columns:1fr;grid-template-rows:200px 1fr}
  /* Im schmalen Band bleibt nur ein Streifen des Bildes stehen. 30% legt den
     Kopf der Zeitung hinein, sonst sieht man bloss die Muenze. */
  .login-bild{background-position:center 30%;border-right:none;border-bottom:1px solid var(--line)}
  .login-spalte{min-height:0}
}

/* ===========================================================
   TOPBAR (Übersicht / Archiv)
   =========================================================== */
.topbar{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.topbar-inner{max-width:1180px;margin:0 auto;padding:20px 48px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{font-family:var(--serif);font-weight:500;font-size:18px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.brand b{font-weight:500}
.nav{display:flex;align-items:center;gap:30px}
.nav a{
  font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);
  position:relative;padding:4px 0;transition:color .18s;
}
.nav a:hover{color:var(--ink)}
.nav a.active{color:var(--ink)}
.nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:-21px;height:2px;background:var(--ink)}
.nav a.logout{color:var(--faint)}
.nav a.logout:hover{color:var(--red)}

/* ---- Aufklapper unter Research und Mein Bereich ----
   Was auf dem Telefon eine Ebene tiefer liegt, liegt hier eine Ebene tiefer.
   Ein schlichtes Blatt: Papier, eine Haarlinie, rechte Winkel, kein Schatten.
   Der Kopfpunkt bleibt ein echter Link auf die Seite, der Aufklapper ist nur
   die Abkuerzung. Wo es keinen Zeiger gibt, erscheint er gar nicht erst, dort
   fuehrt der Weg ueber die Seite und ihre eigene zweite Ebene. */
.nav-grp{position:relative;display:inline-flex;align-items:center}
.nav-auf{display:none}
@media(hover:hover) and (min-width:861px){
  .nav-auf{
    display:flex;flex-direction:column;position:absolute;top:100%;left:-16px;z-index:50;
    min-width:190px;margin-top:21px;padding:6px 0;
    background:var(--paper);border:1px solid var(--line);
    opacity:0;visibility:hidden;transform:translateY(-4px);
    transition:opacity .13s,transform .13s,visibility 0s .13s;
  }
  /* Der Streifen zwischen Schrift und Blatt gehoert zur Gruppe, sonst faellt
     der Aufklapper zu, sobald die Maus die Luecke quert. */
  .nav-grp::after{content:"";position:absolute;top:100%;left:0;right:0;height:21px}
  .nav-grp:hover .nav-auf,.nav-grp:focus-within .nav-auf{
    opacity:1;visibility:visible;transform:none;transition-delay:0s;
  }
  .nav-auf a{width:100%;padding:9px 18px;font-size:11.5px;white-space:nowrap}
  .nav-auf a:hover{background:var(--surface-soft);color:var(--ink)}
  /* Der Unterstrich der Hauptleiste haette hier nichts zu unterstreichen. */
  .nav-auf a.active{color:var(--ink)}
  .nav-auf a.active::after{display:none}
}
@media (prefers-reduced-motion: reduce){ .nav-auf{transition:none} }

.burger{display:none;flex-direction:column;gap:5px;padding:6px}
.burger span{width:22px;height:2px;background:var(--ink);display:block}
@media(max-width:860px){
  .topbar-inner{padding:18px 22px}
  .nav{position:fixed;inset:0 0 auto 0;top:calc(58px + env(safe-area-inset-top,0px));flex-direction:column;align-items:flex-start;gap:0;
       background:var(--paper);border-bottom:1px solid var(--line);padding:8px 22px 18px;display:none}
  .nav.open{display:flex}
  .nav a{width:100%;padding:14px 0;border-bottom:1px solid var(--line);font-size:14px}
  .nav a.active::after{display:none}
  /* Burger und Glocke sind auf Mobile Geschichte: navigiert wird unten,
     die Mitteilungen stehen im Punkt "Updates". Oben bleibt nur die Marke. */
  .burger{display:none}
  body .tb-right{display:none}
}

/* ===========================================================
   UNTERE NAVIGATION (nur Mobile)
   Fuenf feste Punkte: Home · Research · Markt · Suche · Mein
   Bereich. Weisses Band, feine Trennlinie, Icons in einer
   Familie, aktiver Punkt schwarz mit warmer Pill dahinter.
   Desktop sieht davon nichts.
   =========================================================== */
.bnav{display:none}

/* Die Filterzeile der Research-Seite: links die Themen, rechts der Zugang.
   Sie steht unter der Ueberschrift der Seite, auf der man gerade ist, nicht
   ueber ihr, und gilt auf beiden Geraeten.

   Die beiden liegen in einer Zeile, teilen sich aber die Linie: die Themen
   scrollen darauf, das Zugangsfeld sitzt rechts daneben und scrollt nie mit.
   Wird es eng, rutscht das Feld unter die Themen statt sie zu quetschen. */
.rfilter{display:flex;align-items:flex-end;gap:24px;margin:14px 0 0}
.rfilter[hidden]{display:none}
/* min-width:0 ist die halbe Miete: ohne das waechst ein Flex-Kind ueber seinen
   Inhalt hinaus und die Leiste scrollt nicht, sie sprengt die Seite. */
.rfilter .rseg{flex:1 1 auto;min-width:0;margin:0}
.zfilter{flex:none;padding-bottom:9px;border-bottom:1px solid var(--line);margin-bottom:-1px}
.zfilter select{
  -webkit-appearance:none;appearance:none;border:0;background:transparent;cursor:pointer;
  font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);padding:0 16px 0 0;
  /* Der kleine Winkel rechts. Als Hintergrundbild gezeichnet, damit kein
     zweites Element noetig ist und die Farbe dem Rest folgt. */
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23ABAAA2' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right center;
  transition:color .16s}
.zfilter select:hover{color:var(--ink)}
.zfilter select:focus{outline:none;color:var(--ink)}
/* Steht ein Filter, wird das Feld schwarz. Sonst merkt niemand, dass der
   Bestand gerade beschnitten ist, und wundert sich ueber die leere Seite. */
.zfilter.an select{color:var(--ink)}
@media(max-width:600px){
  .rfilter{flex-wrap:wrap;gap:0}
  .rfilter .rseg{flex:1 0 100%}
  .zfilter{border-bottom:0;margin:0;padding:12px 2px 0}
}

.rseg{display:flex;gap:26px;overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  margin:14px 0 0;
  /* Eine Haarlinie als Schiene, auf der die Reiter stehen. Der aktive deckt sie
     mit einem schwarzen Balken zu. Vorher hing der Balken frei und traf zwei
     Pixel darunter auf die fette Linie des Kachelrasters, zwei Striche fast
     aufeinander. Jetzt ist es ein Strich, und er sagt etwas. */
  border-bottom:1px solid var(--line)}
.rseg::-webkit-scrollbar{display:none}
.rseg a{flex:none;display:inline-flex;align-items:center;
  /* 44px hoch, das Daumenmass. Waagrecht bleibt der Reiter so breit wie sein
     Wort, damit der erste buendig unter der Ueberschrift steht. */
  min-height:44px;font-size:15px;font-weight:500;letter-spacing:0;
  color:var(--faint);white-space:nowrap;
  border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color .16s,border-color .16s}
.rseg a:hover{color:var(--ink-soft)}
.rseg a.active{color:var(--ink);border-bottom-color:var(--ink)}
.rseg[hidden]{display:none}
/* Passt die Leiste nicht ins Fenster, franst die Seite aus, an der es
   weitergeht. Ohne das Zeichen sieht niemand, dass da noch ein Reiter liegt.
   Die Klassen setzt `rsegRand()` beim Schieben und beim Seitenwechsel. */
.rseg.mehr-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 46px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 46px),transparent)}
.rseg.mehr-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 46px);
  mask-image:linear-gradient(90deg,transparent,#000 46px)}
.rseg.mehr-l.mehr-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 46px,#000 calc(100% - 46px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 46px,#000 calc(100% - 46px),transparent)}
@media (prefers-reduced-motion: reduce){ .rseg a{transition:none} }

@media(max-width:860px){
  .bnav{position:fixed;left:0;right:0;bottom:0;z-index:80;display:flex;align-items:stretch;
    background:var(--paper);border-top:1px solid var(--line);
    box-shadow:0 -8px 26px rgba(26,26,23,.06);
    padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px))}
  .bnav-it{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;
    background:none;border:none;padding:4px 2px;cursor:pointer;color:var(--faint);
    font-family:inherit;-webkit-tap-highlight-color:transparent;
    transition:color .22s cubic-bezier(.22,.61,.36,1),transform .16s cubic-bezier(.22,.61,.36,1)}
  .bnav-it:active{transform:scale(.96)}
  .bnav-ic{position:relative;width:46px;height:28px;display:flex;align-items:center;justify-content:center}
  .bnav-ic::before{content:"";position:absolute;inset:0;background:var(--paper-2);border-radius:999px;
    opacity:0;transform:scale(.72);
    transition:opacity .22s cubic-bezier(.22,.61,.36,1),transform .22s cubic-bezier(.22,.61,.36,1)}
  .bnav-ic svg{position:relative;display:block}
  .bnav-tx{font-size:10px;font-weight:600;letter-spacing:.05em;line-height:1.2;
    max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* Sehr schmale Geraete: "Mein Bereich" muss ganz hinpassen. */
  @media(max-width:355px){ .bnav{padding-left:2px;padding-right:2px} .bnav-tx{font-size:9px;letter-spacing:.01em} }
  /* Fabian hat einen Punkt mehr. Sechs statt fuenf heisst enger, sonst
     beschneidet die Leiste die Beschriftungen. */
  .bnav.hat-admin{padding-left:2px;padding-right:2px}
  .bnav.hat-admin .bnav-it{padding-left:0;padding-right:0}
  .bnav.hat-admin .bnav-ic{width:40px}
  .bnav.hat-admin .bnav-tx{font-size:9px;letter-spacing:.01em}
  .bnav-it.active{color:var(--ink)}
  .bnav-it.active .bnav-ic::before{opacity:1;transform:scale(1)}
  /* Ungelesene Mitteilungen: die Glocke ist auf Mobile weg, der Hinweis
     sitzt jetzt am Punkt "Updates". */
  .bnav-dot{position:absolute;top:2px;right:9px;width:7px;height:7px;border-radius:50%;
    background:var(--red);box-shadow:0 0 0 2px var(--paper)}

  /* Auf den Bestandsseiten traegt die Seite selbst ihren Titel. Eine leere
     Markenzeile darueber waere nur ein Streifen, darum faellt sie hier weg. */
  body.is-research .topbar{display:none}
  body.is-research #app{padding-top:env(safe-area-inset-top,0px)}

  /* Der Inhalt endet nie unter der Leiste. */
  #app .page{padding-bottom:calc(78px + env(safe-area-inset-bottom,0px))}
  /* Schwebende Elemente ueber die Leiste heben. Das body-Praefix gewinnt
     gegen die spaeter im Blatt stehenden Grundregeln dieser Klassen. */
  body .toast{bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  body .resume{bottom:calc(92px + env(safe-area-inset-bottom,0px))}
  body .install-bar{bottom:calc(86px + env(safe-area-inset-bottom,0px))}
  /* Lesemodus ohne Ablenkung: auch die Leiste tritt ab. */
  body.focus-mode .bnav{display:none}
}


/* Kurzupdates: ein Strom, nach Tagen gebuendelt. Die Zeit steht zuerst, weil
   bei einer Beobachtung zaehlt, wann sie gemacht wurde. Gleiche Typografie
   wie der Rest des Hauses, nur enger gesetzt. */
/* Eine Spalte, nicht die ganze Breite. Ein Satz ueber 1000 Pixel liest niemand. */
.kurz-head,.kurz-filter,#kurzList{max-width:760px}
.kurz-head{padding:26px 0 0}
.kurz-head h1{font-family:var(--serif);font-weight:500;font-size:clamp(34px,5vw,52px);letter-spacing:-.01em;line-height:1.02}
.kurz-head .sub{margin-top:10px;font-size:16px;line-height:1.5;color:var(--ink-soft)}
.kurz-filter{display:flex;gap:9px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  margin:22px 0 0;padding:0 0 2px}
.kurz-filter::-webkit-scrollbar{display:none}
.kurz-filter .chip{border-radius:999px;white-space:nowrap;flex:none;text-transform:none;letter-spacing:.01em;font-size:13.5px;font-weight:500;padding:7px 14px}
.kurz-filter:empty{display:none}
#kurzList{border-top:1px solid var(--line);margin:20px 0 40px}
/* Tagesmarke. "Heute" und "Gestern" sagen mehr als ein Datum. */
.kz-group{padding:24px 4px 4px;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.kurz-item{position:relative;padding:16px 40px 22px 4px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .16s}
.kurz-item:hover{background:var(--paper-2)}
.kurz-item .kz-meta{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.kurz-item .kz-topic{color:var(--ink-soft)}
.kurz-item .kz-topic.t0{color:var(--letter-blau)}
.kurz-item .kz-topic.t1{color:var(--green)}
.kurz-item .kz-topic.t2{color:var(--gold)}
.kurz-item .kz-title{font-family:var(--serif);font-size:21px;line-height:1.26;color:var(--ink);margin:8px 0 6px;display:flex;align-items:baseline;gap:9px}
.kurz-item.unread .kz-title::before{content:"";width:7px;height:7px;background:var(--red);border-radius:50%;flex:none;align-self:center}
/* Genau ein Satz. Er soll neugierig machen, nicht die Meldung ersetzen.
   Darum auch kein Umbruch ueber mehrere Zeilen als Absatz. */
.kurz-item .kz-body{font-size:15px;line-height:1.6;color:var(--ink-soft)}
/* Das Bild einer Meldung. Es kommt vom Endpunkt an_bild und liegt dort auf
   320px heruntergerechnet. Darum wird es nie ueber die Lesespalte aufgeblasen,
   sonst stuende es matschig da. Die Hoehe kommt aus dem Bild selbst, damit
   nichts beschnitten wird: eine Heatmap ohne Rand ist keine Heatmap mehr. */
.kurz-item .kz-bild{margin:12px 0 2px;max-width:320px;border:1px solid var(--line-2);
  border-radius:10px;overflow:hidden;background:var(--paper-2)}
.kurz-item .kz-bild img{display:block;width:100%;height:auto}
/* Der Rest der Meldung. Er liegt bereit und kommt erst auf "Öffnen" hervor. */
.kurz-item .kz-rest{display:none;margin-top:8px;font-size:15px;line-height:1.6;color:var(--ink-soft)}
.kurz-item.offen .kz-rest{display:block}
.kurz-item .kz-link{margin-top:12px;display:flex;align-items:center;gap:9px;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.kurz-item .kz-link span{font-size:14px;letter-spacing:0;transition:transform .18s}
.kurz-item:hover .kz-link span{transform:translateX(4px)}
/* Merken sitzt aussen rechts, damit es die Schrift nie einengt. */
.kz-mark{position:absolute;top:14px;right:0;padding:4px;color:var(--line-2);background:none;border:none;cursor:pointer;transition:color .16s}
.kz-mark:hover{color:var(--ink-soft)}
.kz-mark.on{color:var(--ink)}
.kurz-leer{padding:54px 4px;color:var(--faint)}
/* Der Hinweis auf die Neuerungen-Seite. Er steht unter der Ueberschrift der
   Updates, weil die Seite genau dorthin gehoert: eine Aenderung an der
   Plattform, nur ausfuehrlicher als eine Meldung. */
.kurz-head .nu-weg{display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  font-size:13.5px;font-weight:600;color:var(--member-blau);cursor:pointer}
.kurz-head .nu-weg span{transition:transform .18s}
.kurz-head .nu-weg:hover span{transform:translateX(4px)}

/* ═══ Neuerungen, 19. September 2026 ═══════════════════════════════════
   Eine einzelne, datierte Ansage. Sie liegt in der App und nicht daneben,
   damit die untere Leiste, die Oberleiste und die drei Lesemodi mitgehen.
   Eigene Farben hat sie darum keine, nur die des Hauses. Alles haengt unter
   #neuerungen, damit nichts davon nach aussen faerbt. */
#neuerungen{--nu-spalte:680px;--nu-luft:clamp(30px,5vw,44px);
  --nu-blau-weich:rgba(11,47,194,.08);--nu-blau-linie:rgba(11,47,194,.22);
  /* Was auf dem Blau steht. Im dunklen Modus ist das Blau aufgehellt und
     traegt Weiss nicht mehr, darum kippt die Schrift dort auf den Papierton. */
  --nu-auf-blau:#ffffff}
body.theme-dark #neuerungen{--nu-auf-blau:#15151A;
  --nu-blau-weich:rgba(91,134,245,.12);--nu-blau-linie:rgba(91,134,245,.32)}
#neuerungen .nu-bahn{max-width:var(--nu-spalte);margin:0 auto}

#neuerungen .nu-kicker{display:flex;align-items:center;gap:13px;padding-top:26px;
  font-size:11px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--member-blau);margin-bottom:clamp(20px,4vw,28px)}
#neuerungen .nu-kicker .strich{flex:1;height:1px;background:var(--line-2)}
#neuerungen .nu-kicker .datum{color:var(--faint);letter-spacing:.12em;white-space:nowrap}
#neuerungen h1{font-family:var(--serif);font-weight:400;
  font-size:clamp(33px,6.4vw,50px);line-height:1.06;letter-spacing:-.018em;
  margin-bottom:clamp(20px,3.4vw,26px);text-wrap:balance}
#neuerungen .nu-vorspann p{font-size:clamp(16.5px,2.2vw,18.5px);line-height:1.62;
  color:var(--ink-soft);margin-bottom:14px}
#neuerungen .nu-vorspann p:last-child{margin-bottom:0}
#neuerungen .nu-vorspann strong{color:var(--ink);font-weight:600}

/* Sprungliste. Knoepfe und keine Anker: in einer App mit echten Adressen
   haette eine Raute in der Adresszeile nichts verloren. */
#neuerungen .nu-sprung{margin-top:clamp(30px,5vw,44px);padding-top:22px;border-top:1px solid var(--line)}
#neuerungen .nu-sprung .titel{font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);margin-bottom:14px}
#neuerungen .nu-sprung ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
#neuerungen .nu-sprung button{display:inline-flex;align-items:baseline;gap:7px;
  font-size:13.5px;color:var(--ink-soft);background:var(--surface);
  border:1px solid var(--line);border-radius:999px;padding:7px 14px;
  transition:border-color .15s ease,color .15s ease,background .15s ease}
#neuerungen .nu-sprung button .n{font-family:var(--serif);font-size:12px;
  color:var(--member-blau);font-variant-numeric:tabular-nums}
#neuerungen .nu-sprung button:hover{border-color:var(--nu-blau-linie);color:var(--ink);background:var(--nu-blau-weich)}

#neuerungen .nu-blocks{padding-top:clamp(40px,7vw,68px)}
#neuerungen .nu-block{position:relative;padding:var(--nu-luft) 0;border-top:1px solid var(--line);scroll-margin-top:80px}
#neuerungen .nu-block:first-child{border-top:none;padding-top:0}
#neuerungen .nu-nr{font-family:var(--serif);font-size:13px;color:var(--faint);
  font-variant-numeric:tabular-nums;letter-spacing:.06em;
  margin-bottom:12px;display:flex;align-items:center;gap:10px}
#neuerungen .nu-nr::after{content:"";flex:1;height:1px;background:var(--line);max-width:30px}
#neuerungen .nu-chip{display:inline-flex;align-items:center;gap:7px;
  font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;margin-bottom:14px;
  color:var(--member-blau);background:var(--nu-blau-weich);border:1px solid var(--nu-blau-linie)}
#neuerungen .nu-chip .pkt{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
#neuerungen .nu-chip.ruhig{color:var(--ink-soft);background:var(--paper-2);border-color:var(--line-2)}
#neuerungen h2{font-family:var(--serif);font-weight:500;
  font-size:clamp(25px,4.2vw,34px);line-height:1.12;letter-spacing:-.012em;
  margin-bottom:clamp(12px,2vw,16px);text-wrap:balance}
#neuerungen .nu-block p{font-size:17px;line-height:1.62;color:var(--ink-soft);margin-bottom:14px}
#neuerungen .nu-block p:last-child{margin-bottom:0}
#neuerungen .nu-block p strong{color:var(--ink);font-weight:600}
/* Ein Satz, der fuer sich allein steht. */
#neuerungen .nu-pointe{font-family:var(--serif);font-weight:400;font-style:italic;
  font-size:clamp(21px,3.4vw,27px) !important;line-height:1.3;color:var(--ink) !important;
  margin:clamp(18px,3vw,24px) 0 !important;
  padding-left:clamp(16px,3vw,22px);border-left:2px solid var(--member-blau)}
/* Der eingeschobene Kasten unter dem Live Desk. */
#neuerungen .nu-einschub{margin-top:clamp(24px,4vw,32px);background:var(--surface);
  border:1px solid var(--line);border-radius:14px;padding:clamp(22px,4vw,30px)}
#neuerungen .nu-einschub h3{font-family:var(--serif);font-weight:500;
  font-size:clamp(19px,3vw,23px);line-height:1.2;margin-bottom:12px}
#neuerungen .nu-einschub p{font-size:16px;margin-bottom:12px}
#neuerungen .nu-einschub p:last-child{margin-bottom:0}
#neuerungen .nu-einschub .nu-pointe{font-size:clamp(19px,3vw,23px) !important;margin:16px 0 !important}

/* ── Feedback ── */
#neuerungen .nu-schluss{margin-top:clamp(40px,7vw,64px);padding-top:clamp(36px,6vw,52px);
  border-top:2px solid var(--ink);scroll-margin-top:80px}
#neuerungen .nu-schluss h2{margin-bottom:16px}
/* Nur die eigenen Absaetze. Ohne das ">" faerbt diese Zeile auch den Zaehler,
   die Notiz und die Fehlermeldung im Formular grau ein. */
#neuerungen .nu-schluss > p{font-size:17px;line-height:1.62;color:var(--ink-soft);margin-bottom:14px}
#neuerungen .nu-zusage{font-family:var(--serif);font-size:clamp(20px,3.4vw,25px) !important;
  font-style:italic;color:var(--ink) !important;margin:22px 0 0 !important}
#neuerungen form{margin-top:clamp(28px,5vw,38px)}
#neuerungen form.weg{display:none}
#neuerungen .nu-feld{margin-bottom:18px}
#neuerungen .nu-feld label{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:9px}
#neuerungen .nu-feld label .opt{font-weight:500;letter-spacing:.04em;text-transform:none;color:var(--faint)}
#neuerungen input[type=text],#neuerungen textarea{width:100%;font-family:var(--sans);
  /* Nie unter 16px: sonst zoomt iOS beim Antippen in das Feld hinein. */
  font-size:16px;line-height:1.55;color:var(--ink);
  background:var(--surface-soft);border:1px solid var(--line-2);border-radius:12px;padding:14px 16px;
  transition:border-color .15s ease,box-shadow .15s ease}
#neuerungen input[type=text]:focus,#neuerungen textarea:focus{outline:none;
  border-color:var(--member-blau);box-shadow:0 0 0 3px var(--nu-blau-weich)}
#neuerungen textarea{min-height:190px;resize:vertical;display:block}
#neuerungen .nu-zaehler{font-size:12.5px;color:var(--faint);text-align:right;margin-top:7px;
  font-variant-numeric:tabular-nums}
/* Das Feld, das nur Maschinen ausfuellen. */
#neuerungen .nu-falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#neuerungen .nu-knopf{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  width:100%;font-size:16px;font-weight:600;color:var(--nu-auf-blau);background:var(--member-blau);
  border:none;border-radius:999px;padding:16px 26px;
  transition:transform .14s ease,box-shadow .14s ease,opacity .14s ease}
#neuerungen .nu-knopf:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(11,47,194,.24)}
#neuerungen .nu-knopf:disabled{opacity:.6;cursor:default;transform:none;box-shadow:none}
#neuerungen .nu-knopf svg{width:17px;height:17px;flex:none}
#neuerungen .nu-notiz{font-size:13px;color:var(--faint);margin-top:14px;text-align:center}
#neuerungen .nu-fehler{display:none;font-size:14.5px;color:var(--red);margin-top:14px;
  background:var(--hl-red);border:1px solid var(--line-2);border-radius:12px;padding:13px 16px}
#neuerungen .nu-fehler.an{display:block}
#neuerungen .nu-danke{display:none;margin-top:clamp(28px,5vw,38px);background:var(--surface);
  border:1px solid var(--line);border-radius:16px;padding:clamp(28px,5vw,40px);text-align:center}
#neuerungen .nu-danke.an{display:block}
#neuerungen .nu-danke .siegel{display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:50%;color:var(--nu-auf-blau);background:var(--member-blau);margin-bottom:18px}
#neuerungen .nu-danke .siegel svg{width:22px;height:22px}
#neuerungen .nu-danke h3{font-family:var(--serif);font-weight:500;font-size:clamp(23px,4vw,28px);margin-bottom:10px}
#neuerungen .nu-danke p{font-size:15.5px;color:var(--ink-soft);max-width:44ch;margin:0 auto}
#neuerungen .nu-fuss{margin-top:clamp(48px,8vw,80px);padding:26px 0 40px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px}
#neuerungen .nu-fuss .nm{font-family:var(--serif);font-size:18px}
#neuerungen .nu-fuss .rl{font-size:12.5px;color:var(--faint);letter-spacing:.04em}

/* Auf breiten Schirmen wandert die Nummer in den linken Rand, damit die
   Textspalte oben wie unten gleich breit bleibt und die Trennlinien mit dem
   Text fluchten. Darunter steht sie schlicht ueber der Ueberschrift. */
@media(min-width:1180px){
  #neuerungen .nu-bahn{max-width:calc(var(--nu-spalte) + 108px);padding-left:108px}
  #neuerungen .nu-block > .nu-nr{position:absolute;left:-108px;top:calc(var(--nu-luft) + 5px);
    width:78px;margin:0;justify-content:flex-end;padding-right:30px}
  #neuerungen .nu-block:first-child > .nu-nr{top:5px}
  #neuerungen .nu-block > .nu-nr::after{display:none}
}
@media(max-width:420px){
  #neuerungen .nu-block p,#neuerungen .nu-schluss > p{font-size:16.5px}
  #neuerungen .nu-kicker{gap:9px;font-size:10px;letter-spacing:.14em}
  #neuerungen .nu-sprung ol{gap:7px}
  #neuerungen .nu-sprung button{font-size:13px;padding:6px 12px}
}
@media(prefers-reduced-motion:reduce){
  #neuerungen *{transition:none !important}
}

/* Suche: das Feld zuerst, darunter das, womit man anfangen kann. Drei Bloecke,
   durch eine Haarlinie getrennt, in derselben Lesespalte wie die Kurzupdates. */
.such-head,.such-block,#suchErg{max-width:760px}
.such-head{padding:26px 0 0}
.such-head h1{font-family:var(--serif);font-weight:500;font-size:clamp(34px,5vw,52px);letter-spacing:-.01em;line-height:1.02}
.such-head .sub{margin-top:10px;font-size:16px;line-height:1.5;color:var(--ink-soft)}
/* Rundes Feld, weil es ein Eingabefeld ist und keine Ueberschrift. */
.sfeld{display:flex;align-items:center;gap:14px;margin-top:24px;padding:15px 20px;
  border:1px solid var(--line-2);border-radius:999px;transition:border-color .16s}
.sfeld:focus-within{border-color:var(--ink)}
.sfeld svg{flex:none;color:var(--ink-soft)}
.sfeld input{flex:1;min-width:0;border:none;background:transparent;font-size:16px;color:var(--ink)}
.sfeld input:focus{outline:none}
.sfeld input::placeholder{color:var(--faint)}
.sf-x{flex:none;padding:0 2px;font-size:22px;line-height:1;color:var(--faint);background:none;border:none;cursor:pointer;transition:color .16s}
.sf-x:hover{color:var(--ink)}
/* Ohne Treffer nimmt die Trefferliste keinen Platz weg. */
#suchErg:empty{display:none}
.such-block{border-top:1px solid var(--line);margin-top:32px;padding-top:30px}
.such-block:last-child{margin-bottom:40px}
.such-block h2{font-family:var(--serif);font-weight:500;font-size:27px;letter-spacing:-.01em;line-height:1.15}
.such-block .sub{margin-top:7px;font-size:15px;line-height:1.5;color:var(--ink-soft)}
/* Drei nebeneinander, wie im Entwurf. Lange Woerter brechen nicht, sie
   verkleinern die Schrift nicht: das Raster gibt jedem gleich viel Platz. */
.sthemen{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px}
.sthemen button{padding:13px 8px;border:1px solid var(--line-2);border-radius:999px;
  font-size:14px;color:var(--ink);background:none;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:border-color .16s,background .16s}
.sthemen button:hover{border-color:var(--ink);background:var(--paper-2)}
.sbtn{display:flex;align-items:center;gap:15px;width:100%;margin-top:20px;padding:16px 22px;
  border:1px solid var(--line-2);border-radius:999px;font-size:16px;color:var(--ink);
  background:none;cursor:pointer;text-align:left;transition:border-color .16s,background .16s}
.sbtn:hover{border-color:var(--ink);background:var(--paper-2)}
.sbtn svg{flex:none}
.sverlauf{margin-top:16px}
.sv-row{display:flex;align-items:center;gap:16px;padding:14px 4px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .16s}
.sv-row:hover{background:var(--paper-2)}
.sv-thumb{flex:none;width:88px;aspect-ratio:4/3;overflow:hidden;background:var(--paper-2)}
.sv-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.sv-thumb.noimg{display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:22px;color:var(--faint);border:1px solid var(--line)}
.sv-main{flex:1;min-width:0}
.sv-title{font-family:var(--serif);font-size:19px;line-height:1.25;color:var(--ink)}
.sv-meta{margin-top:6px;font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv-go{flex:none;font-size:20px;color:var(--ink)}

/* Support: dieselbe Lesespalte und dieselben Haarlinien wie die Suche.
   Alles Eingebbare ist rund, alles Gelesene eckig. */
.sup-head,.sup-block{max-width:760px}
.sup-head{padding:26px 0 0}
.sup-head h1{font-family:var(--serif);font-weight:500;font-size:clamp(34px,5vw,52px);letter-spacing:-.01em;line-height:1.02}
.sup-head .sub{margin-top:10px;font-size:16px;line-height:1.5;color:var(--ink-soft)}
.sup-hinweis{display:flex;align-items:center;gap:14px;margin-top:24px;padding:16px 20px;
  border:1px solid var(--line);border-radius:14px;background:var(--paper-2);
  font-size:14.5px;line-height:1.45;color:var(--ink-soft)}
.sup-hinweis svg{flex:none;color:var(--ink)}
.sup-block{border-top:1px solid var(--line);margin-top:32px;padding-top:30px}
.sup-block:last-child{margin-bottom:40px}
.sup-block h2{font-family:var(--serif);font-weight:500;font-size:27px;letter-spacing:-.01em;line-height:1.15}
.sup-block .sub{margin-top:7px;font-size:15px;line-height:1.5;color:var(--ink-soft)}
/* Ueberschrift links, Anzahl rechts, auf derselben Grundlinie. */
.sup-bh{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.sup-bh .idx{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--faint)}
/* Jede Pille so breit wie ihr Wort, der Rest bricht um. Ein festes Raster
   wuerde "Sonstiges" genauso breit machen wie "Frage zum Letter". */
.sup-themen{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.sup-themen button{padding:12px 20px;border:1px solid var(--line-2);border-radius:999px;
  font-size:14px;color:var(--ink);background:none;cursor:pointer;
  white-space:nowrap;transition:border-color .16s,background .16s,color .16s}
.sup-themen button:hover{border-color:var(--ink);background:var(--paper-2)}
.sup-themen button.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.sup-feld{width:100%;margin-top:14px;padding:16px 20px;border:1px solid var(--line-2);border-radius:14px;
  background:transparent;font-family:var(--sans);font-size:15.5px;line-height:1.55;color:var(--ink);
  resize:vertical;transition:border-color .16s}
.sup-feld:focus{outline:none;border-color:var(--ink)}
.sup-feld::placeholder{color:var(--faint)}
select.sup-feld{resize:none;-webkit-appearance:none;appearance:none;cursor:pointer;padding-right:44px;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-soft) 50%),linear-gradient(135deg,var(--ink-soft) 50%,transparent 50%);
  background-position:calc(100% - 24px) 50%,calc(100% - 18px) 50%;background-size:6px 6px;background-repeat:no-repeat}
/* Die Datei-Zeile ist ein Label ueber einem versteckten Feld: ein Klick
   irgendwo auf der Zeile oeffnet die Dateiwahl. */
.sup-datei{display:flex;align-items:center;gap:14px;margin-top:12px;padding:15px 20px;
  border:1px solid var(--line-2);border-radius:999px;font-size:15px;color:var(--ink-soft);
  cursor:pointer;transition:border-color .16s,background .16s}
.sup-datei:hover{border-color:var(--ink);background:var(--paper-2)}
.sup-datei svg{flex:none}
.sup-datei .sd-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sup-datei.hat .sd-name{color:var(--ink)}
.sup-datei input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.sd-x{flex:none;padding:0 2px;font-size:20px;line-height:1;color:var(--faint);background:none;border:none;cursor:pointer}
.sd-x:hover{color:var(--ink)}
.sup-send{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin-top:16px;
  padding:17px 20px;border:1px solid var(--ink);border-radius:999px;background:var(--ink);color:var(--paper);
  font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;
  transition:opacity .16s}
.sup-send:hover{opacity:.84}
.sup-send:disabled{opacity:.5;cursor:default}
.sup-send span{font-size:14px;letter-spacing:0;transition:transform .18s}
.sup-send:hover:not(:disabled) span{transform:translateX(4px)}
/* Eine Anfrage als Karte. Der Pfeil klappt den Verlauf darunter auf. */
.sup-karte{border-bottom:1px solid var(--line);padding:18px 4px;cursor:pointer;transition:background .16s}
.sup-karte:hover{background:var(--paper-2)}
.sk-top{display:flex;align-items:center;gap:12px}
/* Der Zustand steht in normaler Schrift, nicht in Versalien: er ist eine
   Auskunft, keine Rubrik. Der erste Buchstabe gross, der Rest wie geschrieben. */
.sk-zustand{font-size:12px;letter-spacing:.01em;padding:4px 11px;border-radius:999px;
  background:var(--paper-2);color:var(--ink-soft);white-space:nowrap}
.sk-zustand::first-letter{text-transform:uppercase}
.sk-zustand.gut{background:#eaf3ec;color:#2c6e49}
.sk-datum{margin-left:auto;font-size:12.5px;color:var(--faint);white-space:nowrap}
.sk-body{display:flex;align-items:center;gap:16px;margin-top:10px}
.sk-main{flex:1;min-width:0}
.sk-title{font-family:var(--serif);font-size:20px;line-height:1.25;color:var(--ink);display:flex;align-items:baseline;gap:9px}
.sup-karte.unread .sk-title::before{content:"";width:7px;height:7px;background:var(--red);border-radius:50%;flex:none;align-self:flex-start;margin-top:.55em}
.sk-sub{margin-top:5px;font-size:14px;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sk-go{flex:none;font-size:20px;color:var(--ink);transition:transform .18s}
.sup-karte.offen .sk-go{transform:rotate(90deg)}
.sk-verlauf{padding:4px 4px 22px}
/* Anhaenge: eine Zeile je Datei, nie ein Bild in Originalgroesse. */
.sup-anh{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.sup-anh a{display:inline-flex;align-items:center;gap:8px;max-width:100%;padding:7px 13px;
  border:1px solid var(--line-2);border-radius:999px;font-size:13px;color:var(--ink-soft);
  text-decoration:none;transition:border-color .16s,color .16s}
.sup-anh a:hover{border-color:var(--ink);color:var(--ink)}
.sup-anh a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:400px){
  .sup-themen button{padding:12px 16px;font-size:13.5px}
}

/* ===========================================================
   STARTSEITE
   Drei Abschnitte in einer Lesespalte: die neueste Ausgabe als
   Karte, darunter die letzten Marktupdates, danach Weiterlesen.
   Alles ist entweder eine Karte oder eine Zeile. Nichts liegt
   uebereinander, jedes Bild steht neben der Schrift.
   =========================================================== */
/* `.hero-kicker` und `.issue-no` bleiben hier stehen, weil die
   Verwaltungsseiten und der Bereich sie weiterhin als Ueberschriftzeile
   verwenden. Der alte Hero der Startseite ist damit nicht gemeint. */
.hero-kicker{display:flex;align-items:center;gap:18px;margin-bottom:30px}
.hero-kicker .rule{max-width:120px}
.issue-no{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--faint);white-space:nowrap}

/* Lesebreite. `.hnext` stand hier frueher nicht drin und lief darum am
   Rechner ueber die volle Wrapbreite, waehrend alles andere bei 760px
   endete. Dieselbe Kante fuer alle drei. */
.hcards,.hsec,.hnext,.hjoin{max-width:760px}
.hcards[hidden],.hsec[hidden]{display:none}
.hcards{display:flex;flex-direction:column;gap:16px;margin-top:24px}
/* Am Rechner stehen die zwei Gastkarten nebeneinander. Sonst wuerde das
   Titelbild ueber die volle Lesebreite 427px hoch und die zweite Karte
   fiele unter den Falz. Nebeneinander ist es so gross wie auf dem Telefon
   und beide sind auf einen Blick da. Eine einzelne Karte (Member) wird
   nicht ueber die halbe Breite gezogen, sondern bleibt in ihrem Mass. */
@media(min-width:861px){
  .hcards{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
  .hcards .hcard:only-child{grid-column:1 / -1;max-width:480px}
}

/* ---- Eine Ausgabe als Karte ----
   Das Titelbild ist der Inhalt, nicht die Dekoration: es traegt bereits
   den Kicker ("MARKTUPDATE - KW 36"), das Merkmal ("GRATIS"), den Titel
   und beim Letter sogar den Anriss. Darum laeuft es gross und randlos
   ueber die volle Kartenbreite, und darunter steht nur noch, was NICHT
   im Bild steht: Lesezeit, Datum und der Weg hinein.
   Kurz wird die Karte also durch Weglassen, nicht durch Schrumpfen. */
.hcard{border:1px solid var(--line);border-radius:16px;
  background:var(--surface);overflow:hidden}
/* Volle Breite im eigenen Seitenverhaeltnis (1600x900). `phHTML` setzt das
   aspect-ratio aus den echten Bildmassen, darum steht die Hoehe vor dem
   Laden fest und beim Nachladen springt nichts. Kein `contain`, kein
   Leerraum an den Seiten: das Bild fuellt den Rahmen randlos aus. */
.hc-bild{display:block;width:100%;padding:0;border:none;
  border-bottom:1px solid var(--line);background:var(--paper-2);cursor:pointer}
.hc-bild .ph{display:block;width:100%}
.hc-bild .ph > img{display:block;width:100%;height:100%;object-fit:cover}
.hc-in{padding:14px 20px 16px}
/* Abstaende haengen unten an den Teilen, nicht oben an der Kopfzeile. So
   sitzt es richtig, egal ob Titel und Anriss folgen oder direkt der Knopf. */
.hc-top{display:flex;align-items:center;flex-wrap:wrap;gap:7px 9px}
/* Der Kopf der Karte traegt dieselbe Zeile wie jede Kachel im Archiv:
   FORMAT - THEMA - ZUGANG, gelb fuer offen, blau fuer Member. Die Klassen
   kommen unveraendert von dort (.tile-meta und Geschwister, siehe Bestand),
   damit Startseite und Archiv nie auseinanderlaufen. Nur der obere Abstand
   faellt weg: hier sitzt die Zeile schon am oberen Rand.
   Frueher standen hier ein Kicker von Hand ("Neuestes Marktupdate") und ein
   Merkmal je Format. Beides sagte etwas anderes als das Archiv und musste
   bei jedem neuen Format nachgepflegt werden. */
.hc-top.tile-meta,.hr-kick.tile-meta{margin-top:0}
/* Titel und Anriss stehen nur dort, wo KEIN Titelbild sie schon traegt. */
.hcard h1{margin-top:10px;font-family:var(--serif);font-weight:500;font-size:clamp(24px,5vw,32px);
  line-height:1.12;letter-spacing:-.012em;text-wrap:balance}
.hc-meta{margin-top:9px;font-size:12px;color:var(--faint)}
.hc-meta .dot-sep{padding:0 .45em;color:var(--line-2)}
.hc-lead{margin-top:10px;font-size:15px;line-height:1.5;color:var(--ink-soft);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* Knopf links, Datum und Lesezeit rechts daneben. Beides in einer Zeile,
   damit die Karte kurz bleibt und zwei Karten auf einen Blick passen. */
.hc-foot{margin-top:14px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.hc-btn{display:inline-flex;align-items:center;gap:10px;
  background:var(--ink);color:var(--paper);font-family:inherit;
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:12px 17px;border:none;border-radius:9px;cursor:pointer;white-space:nowrap;
  transition:background .18s,transform .05s}
.hc-btn:hover{background:#000}
.hc-btn:active{transform:translateY(1px)}
.hc-datum{text-align:right;font-size:11.5px;line-height:1.4;color:var(--faint)}
.hc-datum span{display:block;white-space:nowrap}

/* ---- Abschnitt aus Zeilen ---- */
.hsec{margin-top:40px}
/* Luft am Fussende. Frueher haeng sie als `margin-bottom` am letzten
   Abschnitt; seit die Abschnitte in zwei Spalten liegen, gibt es zwei
   letzte, und einer davon steht mittendrin. Darum sitzt die Luft jetzt
   am Blatt statt am Abschnitt. */
#overview .wrap{padding-bottom:22px}
.hsec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-bottom:12px;border-bottom:1px solid var(--line)}
.hsec-head h2{font-family:var(--serif);font-weight:500;font-size:20px;letter-spacing:.01em}
.hsec-all{background:none;border:none;padding:0;font-family:inherit;cursor:pointer;
  font-size:12.5px;color:var(--ink-soft);white-space:nowrap;transition:color .18s}
.hsec-all:hover{color:var(--ink)}

.hrow{display:grid;grid-template-columns:96px minmax(0,1fr) auto;align-items:center;gap:16px;
  width:100%;padding:16px 2px;text-align:left;background:none;font-family:inherit;cursor:pointer;
  border:none;border-bottom:1px solid var(--line);transition:background .16s}
.hrow:hover{background:var(--paper-2)}
.hrow.ohne-bild{grid-template-columns:minmax(0,1fr) auto}
/* Zeilen und Karten der Startseite sind echte Links: kein Unterstrich, Farbe wie vorher. */
a.hrow{color:inherit;text-decoration:none}
a.hc-bild,a.hc-btn,a.hsec-all{text-decoration:none}
/* Das Seitenverhaeltnis kommt aus den echten Bildmassen, darum wird nichts
   beschnitten und beim Laden springt keine Zeile. */
.hr-bild{border:1px solid var(--line-2);border-radius:8px;overflow:hidden;background:var(--paper-2)}
.hr-bild .ph{display:block;width:100%}
.hr-bild img{display:block;width:100%;height:auto}
.hr-txt{min-width:0}
.hr-kick{display:block;font-size:10px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--faint)}
.hr-t{display:block;margin-top:5px;font-family:var(--serif);font-weight:500;font-size:18px;
  line-height:1.22;letter-spacing:-.005em;color:var(--ink)}
.hr-s{margin-top:5px;font-size:13px;color:var(--ink-soft);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hr-go{display:block;font-size:17px;color:var(--faint);transition:transform .18s,color .18s}
.hrow:hover .hr-go{transform:translateX(3px);color:var(--ink)}
/* Lesestand: Balken unter dem Titel, der Anteil in Zahlen daneben. */
.hr-bar{margin-top:9px;display:flex;align-items:center;gap:10px}
.hr-track{flex:1;height:3px;border-radius:999px;background:var(--line);overflow:hidden}
.hr-track i{display:block;height:100%;border-radius:999px;background:var(--ink)}
.hr-pct{font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--ink-soft);
  white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---- Live Updates ----
   Kurze laufende Meldungen, kein Research. Darum keine Zeile mit Titelbild und
   Pfeil, sondern Uhrzeit und Titel: eine Nachrichtenzeile. Der Punkt zwischen
   beiden steht in der Regel, nicht im Markup, sonst haette die letzte Zeile
   ohne Uhrzeit einen Punkt ins Leere. */
.hu-row{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:8px;
  width:100%;padding:12px 2px;text-align:left;background:none;font-family:inherit;cursor:pointer;
  border:none;border-bottom:1px solid var(--line);transition:background .16s}
.hu-row:hover{background:var(--paper-2)}
.hu-zeit{font-size:11.5px;font-weight:700;letter-spacing:.06em;color:var(--faint);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.hu-zeit::after{content:'·';padding-left:8px;color:var(--line-2)}
.hu-t{min-width:0;font-size:14px;line-height:1.4;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---- Membership am Fuss der Startseite ----
   Ein eigener Bogen, aber kein Fremdkoerper: dieselbe Serifenschrift, dieselbe
   helle Flaeche, dieselben Haarlinien wie ueberall. Was ihn traegt, ist die
   Ueberschrift, nicht die Farbe.
   Aufbau: oben Text und Zeichnung nebeneinander, unten der Knopf und drei
   Spalten, die durch senkrechte Linien getrennt sind. Auf dem Telefon faellt
   beides untereinander und die Linien werden waagerecht. */
/* Einmaliger Hinweis nach dem Kauf (willkommen.php -> /?neu=1) oder wenn ein
   Member noch einmal in die Kasse wollte (kasse.php -> /?already=1). */
.h-hallo{margin:0 0 30px;padding:24px 26px;border:1px solid var(--line);border-top:3px solid var(--member-blau);border-radius:4px;background:var(--paper-2);position:relative}
.h-hallo[hidden]{display:none}
.h-hallo .hh-k{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--member-blau)}
.h-hallo h2{font-family:var(--serif);font-weight:500;font-size:26px;line-height:1.15;margin:8px 0 8px;padding-right:34px}
.h-hallo p{font-size:15px;line-height:1.6;color:var(--ink-soft);max-width:42em;margin:0}
.h-hallo .hh-go{display:inline-block;margin-top:16px;padding:12px 18px;background:var(--member-blau);color:#fff;border-radius:3px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
.h-hallo .hh-go:focus-visible,.h-hallo .hh-zu:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.h-hallo .hh-zu{position:absolute;top:12px;right:12px;width:40px;height:40px;border:0;background:none;font-size:24px;line-height:1;color:var(--ink-soft);cursor:pointer}
.hjoin{margin-top:34px}
.hjoin[hidden]{display:none}
.hj-box{background:var(--paper-2);border:1px solid var(--line);border-radius:14px;
  padding:24px 20px 20px}
.hj-kopf{display:grid;gap:16px}
.hj-kick{display:block;font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft)}
.hj-txt h2{margin:9px 0 0;font-family:var(--serif);font-weight:400;
  font-size:clamp(23px,4vw,29px);line-height:1.14;letter-spacing:-.02em;color:var(--ink)}
.hj-txt p{margin:10px 0 0;max-width:54ch;font-size:13.5px;line-height:1.5;color:var(--ink-soft)}
/* Die Federzeichnung liegt als Tinte auf Durchsichtigem in assets/berge.png.
   Darum braucht sie keine eigene Flaeche und keine zweite Fassung: im dunklen
   Thema wird sie umgedreht, aus schwarzer Tinte wird helle, der Grund bleibt
   der Karton der Karte. Die blaue Scheibe liegt dahinter und kommt aus CSS,
   nicht aus dem Bild, sonst muesste sie bei jeder Farbaenderung neu gemalt
   werden. */
.hj-bild{display:none;position:relative}
.hj-bild::before{content:'';position:absolute;left:44%;top:-24%;width:34%;aspect-ratio:1;
  border-radius:50%;background:var(--member-blau);opacity:.26}
.hj-bild img{position:relative;display:block;width:100%;height:auto}
body.theme-dark .hj-bild img{filter:invert(1)}

.hj-fuss{margin-top:22px;display:grid;gap:18px}
.hj-cta{display:inline-flex;align-items:center;gap:11px;text-decoration:none;
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:14px 21px;border-radius:10px;transition:filter .18s,transform .05s}
.hj-cta:active{transform:translateY(1px)}
.hj-preis{margin:10px 0 0;font-size:12px;color:var(--faint)}
.hj-preis .sep{padding:0 7px;color:var(--line-2)}

/* Die drei Spalten sind eine Beschreibungsliste, damit der Vorleser Titel und
   Erklaerung zusammen haelt. `text-wrap:balance` verteilt die zwei Zeilen
   gleichmaessig, sonst haengt in einer Spalte ein einzelnes Wort unten. */
.hj-nutzen{margin:0;display:grid;gap:14px}
.hj-nutzen > div{min-width:0;padding-top:13px;border-top:1px solid var(--line)}
.hj-nutzen dt{font-size:10.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink)}
.hj-nutzen dd{margin:5px 0 0;font-size:13px;line-height:1.45;color:var(--ink-soft);
  text-wrap:balance}

/* Ab hier ist Platz fuer die Zeichnung neben dem Text und fuer die drei
   Spalten nebeneinander. Die Trennlinien stehen dann senkrecht.
   `align-items:center` statt `start`: links stehen Knopf und Preis, rechts nur
   zwei Zeilen Text. Oben buendig sahen die Spalten hochgerutscht aus. */
@media(min-width:760px){
  .hj-box{padding:30px 28px 26px}
  .hj-kopf{grid-template-columns:minmax(0,1fr) 232px;align-items:center;gap:30px}
  .hj-bild{display:block}
  .hj-fuss{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:30px}
  .hj-nutzen{grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
  /* Rechts genauso viel Luft wie links, sonst stoesst das letzte Wort einer
     Zeile an die Trennlinie der naechsten Spalte. */
  .hj-nutzen > div{padding:2px 20px;border-top:none;border-left:1px solid var(--line)}
}

/* ---- Kalender ----
   Die Gattungen tragen ihre Farbe ueber eine Klasse. Jede Regel hier zieht sie
   aus `--kal`, gesetzt wird `--kal` nur an den Stellen unten. Wer eine weitere
   Gattung braucht, ergaenzt dort eine Zeile und sonst nichts. */
.is-letter     {--kal:var(--letter-blau)}
.is-marktupdate{--kal:var(--mu-gelb)}
.is-bericht    {--kal:var(--bericht-gruen)}
.is-kurz       {--kal:var(--kurz-lila)}
.is-special    {--kal:var(--special-lila)}
/* Nicht `--faint`: die Farbe traegt jetzt auch die Ziffer im Blatt, und in
   `--faint` waere sie auf der eingefaerbten Zelle nicht mehr zu lesen. */
.is-sonstiges  {--kal:var(--ink-soft)}

.kal-legende{display:flex;flex-wrap:wrap;gap:8px 18px;margin:28px 0 22px}
.kal-leg{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-soft)}
/* Dieselbe Form wie ein Streifen im Blatt, damit Legende und Raster dieselbe
   Sprache sprechen. Frueher war es ein 7px-Punkt und sagte nichts. */
.kal-pkt{flex:none;width:16px;height:4px;border-radius:2px;background:var(--kal,var(--ink-soft))}

/* Die Breite ist gedeckelt: die Zellen sind quadratisch, ein Blatt ueber die
   volle Schreibtischbreite haette Zellen von 150px und wuerde auseinanderfallen. */
.kal-blatt{max-width:460px;border:1px solid var(--line);border-radius:12px;padding:16px 14px 10px;background:var(--surface)}
.kal-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.kal-monat{font-family:var(--serif);font-weight:500;font-size:19px;letter-spacing:.01em}
.kal-pfeil{flex:none;width:34px;height:34px;border:1px solid var(--line-2);border-radius:9px;
  background:none;font-family:inherit;font-size:18px;line-height:1;color:var(--ink-soft);
  cursor:pointer;transition:background .16s,color .16s}
.kal-pfeil:hover{background:var(--paper-2);color:var(--ink)}
.kal-wtage,.kal-raster{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.kal-wtage{margin-bottom:4px}
.kal-wtage span{text-align:center;font-size:9.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--faint)}
/* Jede Zelle ist quadratisch, damit das Blatt beim Monatswechsel nicht springt.
   `overflow:hidden` laesst das Band unten der Rundung der Zelle folgen. */
.kal-tag{position:relative;aspect-ratio:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;border-radius:9px;overflow:hidden;
  border:none;background:none;font-family:inherit;font-size:13.5px;color:var(--ink);
  font-variant-numeric:tabular-nums}
.kal-tag.leer{visibility:hidden}
.kal-tag.aus{color:var(--faint)}
/* Ein Tag mit Termin faerbt die ganze Zelle ein und schreibt die Zahl in der
   Farbe der Gattung. Vorher lag dort ein Punkt von 4px, den man auf dem Blatt
   kaum sah. So erkennt man die Woche schon aus dem Augenwinkel. */
.kal-tag.hat{cursor:pointer;font-weight:700;color:var(--kal,var(--ink));
  background:color-mix(in srgb,var(--kal,var(--ink-soft)) 15%,transparent);
  transition:background .16s}
.kal-tag.hat:hover{background:color-mix(in srgb,var(--kal,var(--ink-soft)) 30%,transparent)}
/* Der heutige Tag ist gefuellt, wie im Entwurf, und schlaegt die Einfaerbung. */
.kal-tag.heute{background:var(--ink);color:var(--paper);font-weight:700}
.kal-tag.heute:hover{background:var(--ink)}
/* Unten ein Streifen je Gattung ueber die volle Zellenbreite: bei einer Gattung
   ein durchgehender Balken, bei mehreren ein geteilter. */
.kal-band{position:absolute;left:0;right:0;bottom:0;display:flex;gap:1px;height:4px}
.kal-band i{flex:1 1 0;background:var(--kal,var(--ink-soft))}
/* Auf dem gefuellten Heute-Tag liegt das Band auf Schwarz. Das dunkle Blau des
   Letters waere dort verschwunden, darum gegen das Papier aufgehellt. */
.kal-tag.heute .kal-band i{background:color-mix(in srgb,var(--kal,var(--ink-soft)) 65%,var(--paper))}

/* Zeile im Abschnitt "Demnaechst": Datum links, Titel in der Mitte, Bild
   rechts. Genau andersherum als .hrow, darum eine eigene Klasse. */
.krow{display:grid;grid-template-columns:44px minmax(0,1fr) 64px;align-items:center;gap:14px;
  width:100%;padding:16px 2px;text-align:left;background:none;font-family:inherit;
  border:none;border-bottom:1px solid var(--line)}
.krow.klick{cursor:pointer;transition:background .16s}
.krow.klick:hover{background:var(--paper-2)}
.kr-datum{text-align:center;line-height:1.15;font-variant-numeric:tabular-nums}
.kr-wt{display:block;font-size:9.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--faint)}
.kr-zahl{display:block;margin:2px 0 1px;font-family:var(--serif);font-size:23px;font-weight:500}
.kr-mon{display:block;font-size:10px;letter-spacing:.06em;color:var(--ink-soft)}
.kr-txt{min-width:0}
.kr-flag{display:inline-flex;align-items:center;border-radius:999px;padding:3px 9px;
  font-size:9px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--kal,var(--ink-soft));background:color-mix(in srgb,var(--kal,var(--faint)) 12%,transparent)}
.kr-t{display:block;margin-top:7px;font-family:var(--serif);font-weight:500;font-size:17px;
  line-height:1.25;letter-spacing:-.005em;color:var(--ink)}
.kr-tags{margin-top:5px;font-size:11.5px;color:var(--faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kr-bild{border:1px solid var(--line-2);border-radius:8px;overflow:hidden;background:var(--paper-2)}
.kr-bild img{display:block;width:100%;height:auto}
/* Ohne Titelbild faellt die Spalte weg, statt ein leeres Kaestchen zu zeigen. */
.krow.ohne-bild{grid-template-columns:44px minmax(0,1fr)}

/* ---- Der Kalender auf der Uebersicht ----
   Dasselbe Blatt wie auf der Kalenderseite, nur schmaler und ohne Legende.
   Die Zellen kommen aus denselben Regeln (.kal-wtage, .kal-raster, .kal-tag),
   damit beide Ansichten nie auseinanderlaufen. Darunter stehen die naechsten
   Termine im Klartext, denn Punkte allein sagen nicht, was kommt. */
.hnext{margin-top:36px;border:1px solid var(--line);border-radius:12px;
  padding:16px 18px;background:var(--surface)}
.hn-kick{font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint)}
.hn-go{margin-top:12px;background:none;border:none;padding:0;font-family:inherit;cursor:pointer;
  font-size:12.5px;color:var(--ink-soft);transition:color .18s}
.hn-go:hover{color:var(--ink)}

/* Gedeckelt, weil die Zellen quadratisch sind: auf der vollen Lesebreite
   waeren sie sonst 100px gross und das Blatt fiele auseinander. */
.hk-blatt{max-width:340px;margin-top:12px}
.hk-kopf{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:11px}
.hk-monat{font-family:var(--serif);font-weight:500;font-size:16.5px;letter-spacing:.01em}
.hk-pfeil{flex:none;width:28px;height:28px;border:1px solid var(--line-2);border-radius:8px;
  background:none;font-family:inherit;font-size:16px;line-height:1;color:var(--ink-soft);
  cursor:pointer;transition:background .16s,color .16s}
.hk-pfeil:hover{background:var(--paper-2);color:var(--ink)}
.hk-liste{margin-top:15px;border-top:1px solid var(--line)}
.hk-row{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:11px;
  width:100%;padding:11px 0;text-align:left;background:none;border:none;
  border-bottom:1px solid var(--line);font-family:inherit;color:inherit}
.hk-row:last-child{border-bottom:none}
.hk-row.klick{cursor:pointer}
.hk-row.klick:hover .hk-t{color:var(--ink-soft)}
.hk-tag{font-variant-numeric:tabular-nums;font-size:11px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--faint);white-space:nowrap}
.hk-t{display:flex;align-items:center;gap:8px;min-width:0;font-size:13.5px;line-height:1.35;
  color:var(--ink);transition:color .16s}
.hk-t i{flex:none;width:6px;height:6px;border-radius:50%;background:var(--kal,var(--faint))}
.hk-t span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hk-leer{padding:14px 0 2px;font-size:12.5px;color:var(--faint)}

/* ---- Die Startseite als Blatt ----
   Das Telefon bleibt, wie es ist: eine Spalte, dieselbe Folge wie bisher.
   Die beiden Gruppen im Markup verschwinden dafuer ueber `display:contents`,
   die vier Abschnitte sind also weiterhin direkt Kinder von `.wrap`, und
   `order` bringt sie in die alte Reihenfolge zurueck.
   Flex statt Block heisst: Abstaende fallen nicht mehr ineinander. Das
   aendert nichts, weil keiner der Abschnitte einen unteren Abstand traegt —
   bis auf die 4px unter der Live-Tafel, die darum oben auf 0 stehen. */
#overview .wrap{display:flex;flex-direction:column}
.hd-main,.hd-side{display:contents}
/* Der Research steht direkt unter den Karten, nicht hinter den Nebenspalten.
   Was jemand auf dem Telefon sucht, ist das Neue, nicht der Kalender. */
#hdLive{order:0}
#hcards{order:1}
#hResearch{order:2}
#hNext{order:3}
#hWeiter{order:4}
#hUpdates{order:5}
#hJoin{order:6}

/* Ein leiser Hinweis, dass die Karte anklickbar ist. Nur dort, wo es einen
   Zeiger gibt, und nur als Kante — kein Schatten, kein Anheben. */
@media(hover:hover) and (min-width:861px){
  .hcard{transition:border-color .2s}
  .hcard:hover{border-color:var(--line-2)}
}

/* ---- Zwei Spalten am Rechner ----
   Ab hier reicht die Breite fuer eine zweite Spalte. Links steht der
   Research: die zwei neuesten Veroeffentlichungen gross und darunter der
   Strom. Rechts steht das Persoenliche und das Einordnende: der Kalender,
   das Angefangene und die laufenden Kurzmeldungen.
   Darunter waere fuer beides zu wenig da, dann bleibt es untereinander.
   Die Live-Tafel laeuft ueber beide Spalten, sie gilt fuer die ganze Seite.
   Die Schwelle ist 1180px, weil `.wrap` genau dort seine Hoechstbreite
   erreicht. Ab da steht die Aufteilung fest bei 706 zu 330, gleich wie breit
   das Fenster noch wird. Laege die Schwelle tiefer, gaebe es dazwischen einen
   Bereich, in dem die Hauptspalte schrumpft, waehrend die schmale ihre 330px
   behaelt — bei 1140px waeren das 63 statt 65 Prozent. */
@media(min-width:1180px){
  #overview .wrap{display:grid;grid-template-columns:minmax(0,1fr) 330px;
    column-gap:48px;align-items:start}
  .hd-main,.hd-side{display:flex;flex-direction:column;min-width:0}
  .hd-live{grid-column:1 / -1}
  /* Die Membership schliesst die Seite ab und laeuft darum, wie die
     Live-Tafel, ueber beide Spalten. */
  .hjoin{grid-column:1 / -1}
  /* Beide Spalten fangen auf derselben Hoehe an. Die Abstaende der Abschnitte
     sind fuers Untereinander gedacht und setzten die rechte Spalte sonst
     12px tiefer als die linke. */
  .hd-main > :first-child,.hd-side > :first-child{margin-top:24px}
  /* Die Breite gibt jetzt das Raster vor, nicht mehr die feste Lesekante. */
  #overview .hcards,#overview .hsec,#overview .hnext,#overview .hjoin{max-width:none}
  /* Eine einzelne Karte fuellt die Hauptspalte. Die 480px von vorhin galten
     fuer die volle Lesebreite, wo dieselbe Karte sonst 760px breit und
     das Titelbild 427px hoch geworden waere. Hier ist sie der Aufmacher. */
  .hcards .hcard:only-child{max-width:none}
  /* Zeilen in der schmalen Spalte: kleineres Bild, kein Pfeil. Der Pfeil
     kostet dort mehr Breite, als er sagt; angeklickt wird ohnehin die
     ganze Zeile. */
  .hd-side .hrow{grid-template-columns:78px minmax(0,1fr);gap:13px;padding:14px 2px}
  .hd-side .hrow.ohne-bild{grid-template-columns:minmax(0,1fr)}
  .hd-side .hr-go{display:none}
  .hd-side .hsec-head h2{font-size:18px}
  .hd-side .hr-t{font-size:16px}
  .hd-side .hr-s{font-size:12.5px}
}

/* ---- Gastknoepfe in der Kopfzeile, nur Mobile ----
   Am Desktop traegt die Navigation beide Wege bereits, dort bleiben sie weg.
   Auf dem Telefon sind sie der einzige Weg hinein: Burger und Glocke sind dort
   ausgeblendet, und ein Band unten gibt es nicht mehr.
   Bewusst ohne `data-guest`, denn diese Schaltung gilt nur unter 860px. */
.tb-gast{display:none}
@media(max-width:860px){
  body.is-guest .tb-gast{display:flex;align-items:center;gap:7px;margin-left:auto;flex:none}
  .tbg-join,.tbg-in{display:inline-flex;align-items:center;border-radius:8px;
    font-size:11.5px;font-weight:600;letter-spacing:.01em;padding:8px 11px;
    text-decoration:none;white-space:nowrap}
  .tbg-join{background:var(--ink);color:var(--paper)}
  .tbg-in{background:var(--surface);border:1px solid var(--line-2);color:var(--ink)}
  /* Rechts bleibt sichtbar Luft, auch neben der Rundung des Geraets. */
  body.is-guest .topbar-inner{gap:12px;padding-right:max(18px,env(safe-area-inset-right,0px))}
  /* Eng wird es an der Marke, nicht an den Knoepfen: ohne die Knoepfe kaeme
     der Gast nicht hinein, der Name steht ohnehin gross auf der Seite. */
  body.is-guest .topbar-inner .brand{min-width:0;overflow:hidden}
  body.is-guest .topbar-inner .brand b{font-size:12.5px;letter-spacing:.1em;
    display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media(max-width:400px){
  body.is-guest .tb-gast{gap:5px}
  .tbg-join,.tbg-in{font-size:10.5px;padding:7px 9px}
  body.is-guest .topbar-inner{gap:8px}
  body.is-guest .topbar-inner .brand b{font-size:11px;letter-spacing:.06em}
}

@media(max-width:400px){
  .hc-in{padding:13px 16px 15px}
  .hc-foot{gap:10px}
  .hc-btn{padding:11px 14px;font-size:10.5px;letter-spacing:.08em;gap:8px}
  .hc-datum{font-size:11px}
  .hrow{grid-template-columns:76px minmax(0,1fr) auto;gap:12px;padding:14px 0}
  .hr-t{font-size:16.5px}
}

/* Stat-Kacheln */
.stats{
  margin-top:46px;display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);border-left:1px solid var(--line);
}
.stat{
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:24px 24px 26px;background:var(--paper);
}
.stat .num{font-size:clamp(30px,3.4vw,40px);font-weight:500;letter-spacing:-.01em;line-height:1;display:flex;align-items:baseline;gap:8px}
.stat .num small{font-size:.5em;font-weight:600;letter-spacing:.04em}
.stat.pos .num{color:var(--green)}
.stat.neg .num{color:var(--red)}
.stat .cap{margin-top:14px;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.stat .cap em{font-style:normal;color:var(--faint);display:block;margin-top:3px;letter-spacing:.16em}
@media(max-width:720px){.stats{grid-template-columns:repeat(2,1fr)}}

.btn-inline{
  display:inline-flex;align-items:center;gap:12px;background:var(--ink);color:var(--paper);
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:15px 26px;
  transition:background .18s,transform .05s;
}
.btn-inline:hover{background:#000}
.btn-inline:active{transform:translateY(1px)}
/* CTA-Button im Fliesstext: [[Text](https://…)] */
.lt-btn, .prose a.lt-btn, .article-lead a.lt-btn, .article-intro a.lt-btn, .fazit .prose a.lt-btn{
  display:inline-flex;align-items:center;gap:12px;background:var(--ink);color:var(--paper);
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:15px 26px;
  margin:8px 0;text-decoration:none;transition:background .18s,transform .05s;
}
.lt-btn:hover, .prose a.lt-btn:hover, .article-lead a.lt-btn:hover, .article-intro a.lt-btn:hover, .fazit .prose a.lt-btn:hover{background:#000;color:var(--paper);text-decoration:none}
.lt-btn:active{transform:translateY(1px)}
.lt-btn .lt-btn-arrow{font-weight:400;letter-spacing:0}
/* Button allein im Absatz → als zentrierter CTA */
.prose p:has(> .lt-btn:only-child){text-align:center;margin:26px 0}

/* Section heading */
.sec-head{display:flex;align-items:center;gap:18px;margin:0 0 4px}
.sec-head h2{font-family:var(--serif);font-weight:500;font-size:22px;letter-spacing:.01em;white-space:nowrap}
.sec-head .rule{flex:1}
.sec-head .idx{font-family:var(--serif);font-style:italic;color:var(--faint);font-size:14px}

.block{padding:54px 0}

/* ===========================================================
   ARCHIV
   =========================================================== */
.arch-head{padding:60px 0 34px}
.arch-kicker{margin-bottom:0}
.arch-head h1{font-family:var(--serif);font-weight:500;font-size:clamp(34px,5vw,58px);letter-spacing:-.01em;line-height:1.02;margin-top:16px}
.arch-head .sub{margin-top:14px;font-size:16px;color:var(--ink-soft);max-width:54ch}

/* Kicker links, die beiden Nebenwege rechts auf derselben Linie. Sie sind
   bewusst klein und grau: PDF-Archiv und Kalender sind Werkzeuge, keine
   Themen, und dürfen mit Bitcoin oder Makro nicht auf eine Stufe rutschen. */
.arch-top{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap}
.arch-neben{display:flex;gap:20px;flex:none}
.arch-neben a{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);transition:color .16s}
.arch-neben a:hover{color:var(--ink)}
/* Die Zahl steht unter dem Untertitel und ist absichtlich unscheinbar.
   Sie kommt aus dem Bestand, nie aus einer festen Zahl im Quelltext. */
.arch-zahl{margin-top:18px;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}

/* Nur für Vorleseprogramme: die Beschriftung des Zugangsfelds. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.search{display:flex;align-items:center;gap:14px;border-bottom:2px solid var(--ink);padding:14px 2px;margin-top:6px}
.search svg{flex:none;color:var(--ink-soft)}
.search input{flex:1;border:none;background:transparent;font-size:18px;color:var(--ink)}
.search input:focus{outline:none}
.search input::placeholder{color:var(--faint)}
.search .clear{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);display:none}
.search .clear:hover{color:var(--ink)}

.chip{
  font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  padding:9px 16px;border:1px solid var(--line-2);color:var(--ink-soft);transition:all .16s;
}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}

.arch-meta{display:flex;justify-content:space-between;align-items:baseline;margin:40px 0 0}
.arch-meta .count{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}

/* Gesucht wird über den eigenen Punkt „Suche". Das Feld hier griff auf
   dieselbe Volltextsuche zu, war also ein zweiter Weg zum selben Ziel. Gilt
   auf beiden Geräten, das Telefon macht es seit je so. Das Markup bleibt
   stehen, `wireUI()` hängt daran. Die zwei Zeilen unter der Überschrift sind
   seit dem Umbau wieder da: sie sagen in einem Satz, was diese Seite ist. */
.arch-head .search,.arch-meta{display:none}

.list{border-top:2px solid var(--ink);margin-bottom:80px}
.row{
  display:grid;grid-template-columns:24px 78px 132px 1fr auto 40px;align-items:center;gap:22px;
  padding:22px 6px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .16s;
}
.row:hover{background:var(--paper-2)}
.read-dot{width:8px;height:8px;border:1.5px solid var(--ink);background:var(--ink);justify-self:center;transition:background .18s}
.row.read .read-dot{background:transparent;border-color:var(--line-2)}
.row .rno{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--faint)}
.row .rdate{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.row .rmain{min-width:0}
.row .rtitle{font-size:18px;font-weight:500;color:var(--ink);letter-spacing:-.005em}
.row.read .rtitle{color:var(--ink-soft);font-weight:400}
.row .rtags{margin-top:6px;display:flex;flex-wrap:wrap;gap:0}
.row .rtags span{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.row .rtags span+span::before{content:"·";padding:0 .5em;color:var(--line-2)}
.bookmark{justify-self:end;color:var(--line-2);transition:color .18s,transform .1s;padding:6px}
.bookmark:hover{color:var(--ink-soft)}
.bookmark.on{color:var(--ink)}
.bookmark:active{transform:scale(.9)}
@media(max-width:860px){
  .row{grid-template-columns:18px 1fr 40px;gap:6px 14px;padding:20px 4px}
  .row .rno{grid-column:2;font-size:14px}
  .row .rdate{grid-column:2;font-size:11px}
  .row .rmain{grid-column:2;order:5}
  .read-dot{grid-row:1 / span 3}
  .bookmark{grid-column:3;grid-row:1 / span 3;align-self:start}
}

/* Toast */
.toast{
  position:fixed;left:50%;bottom:30px;transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:var(--paper);font-size:12px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;padding:13px 22px;opacity:0;pointer-events:none;transition:all .3s;z-index:90;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* #37 Versionsverlauf-Modal */
.ver-ov{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(20,20,22,.55);backdrop-filter:blur(3px)}
.ver-ov.show{display:flex}
.ver-card{background:var(--surface,#fff);border:1px solid var(--line);border-radius:16px;max-width:640px;width:100%;max-height:82vh;overflow:auto;padding:28px 30px;box-shadow:0 24px 60px rgba(0,0,0,.28)}
.ver-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:6px}
.ver-head h2{font-size:22px;margin:0}
.ver-list{display:flex;flex-direction:column;gap:10px}
.ver-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;border:1px solid var(--line);border-radius:10px;padding:12px 16px;background:var(--paper-2)}
.ver-title{font-weight:600;font-size:15px;color:var(--ink)}
.ver-meta{font-size:12.5px;color:var(--faint);display:flex;gap:6px;margin-top:2px}

/* ===========================================================
   READER (Ausgabe lesen)
   =========================================================== */
.reading-progress{position:fixed;top:0;left:0;height:2px;background:var(--ink);z-index:50;width:0;transition:width .1s linear}
.reader-bar{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.reader-bar-inner{max-width:1180px;margin:0 auto;padding:16px 48px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.rb-back{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);transition:color .18s}
.rb-back:hover{color:var(--ink)}
.rb-brand{font-family:var(--serif);font-size:15px;letter-spacing:.16em;text-transform:uppercase}
.rb-bm{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);transition:color .18s}
.rb-bm:hover{color:var(--ink-soft)}
.rb-bm.on{color:var(--ink)}
@media(max-width:720px){.reader-bar-inner{padding:14px 22px}.rb-brand{display:none}}

.article{max-width:824px;margin:0 auto;padding:0 48px}
@media(max-width:720px){.article{padding:0 22px}}
.article-mast{padding:60px 0 0}
.article-runhead{display:flex;align-items:center;gap:18px;margin-bottom:34px}
.article-runhead .rn{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--faint);white-space:nowrap}
.article-runhead .rh{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
.article-title{font-family:var(--serif);font-weight:500;font-size:clamp(34px,5.4vw,58px);line-height:1.05;letter-spacing:-.01em;margin:18px 0 0;text-wrap:balance}
.article-lead{margin-top:24px;font-size:calc(20px * var(--read-scale,1));color:var(--ink-soft);line-height:1.55;max-width:60ch}
.article-byline{margin-top:30px;padding-bottom:30px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:13px}
.author-photo{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:none;border:1px solid var(--line-2);background:var(--paper-2)}
.reader-stats{margin-top:0;margin-bottom:0;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.article-byline + .reader-stats{margin-top:34px;border-top:none}
.article-intro{margin-top:34px}
.article-intro p{font-size:calc(20px * var(--read-scale,1));color:var(--ink);line-height:1.55;max-width:62ch}
.chart-ph{margin:38px 0}
.chart-ph-box{height:240px;border:1px solid var(--line-2);background-color:var(--paper-2);
  background-image:repeating-linear-gradient(135deg,transparent,transparent 9px,rgba(26,26,23,.045) 9px,rgba(26,26,23,.045) 10px);
  display:flex;align-items:center;justify-content:center}
.chart-ph-tag{font-family:ui-monospace,'SFMono-Regular',Menlo,monospace;font-size:12px;letter-spacing:.1em;color:var(--faint);text-transform:uppercase}
.chart-ph figcaption{margin-top:12px;font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--ink-soft);font-family:ui-monospace,'SFMono-Regular',Menlo,monospace}
.chart-ph.has-img img{display:block;width:100%;height:auto;border:1px solid var(--line-2)}
.fazit{margin-top:56px;border-top:2px solid var(--ink);padding-top:22px}
.fazit-head{display:flex;align-items:center;gap:18px;margin-bottom:18px}
.fazit-head .label{color:var(--ink)}
.fazit-head .rule{flex:1}
.fazit h3,.fazit h2.ch-h{font-weight:800;font-size:clamp(24px,3.4vw,34px);line-height:1.14;letter-spacing:-.018em;max-width:20ch;text-wrap:balance}
.fazit .prose p{max-width:64ch}
.chapter{margin-top:60px}
.chapter-head{display:flex;align-items:center;gap:18px;margin-bottom:26px}
.chapter-head .cn{font-family:var(--serif);font-style:italic;color:var(--faint);font-size:16px;white-space:nowrap}
.chapter-head .cl{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
.chapter h3,.chapter h2.ch-h{font-weight:800;font-size:clamp(25px,3.6vw,37px);line-height:1.13;letter-spacing:-.018em;max-width:19ch;text-wrap:balance}
.prose p{font-size:calc(19px * var(--read-scale,1));color:var(--ink-soft);line-height:1.62;margin-top:22px;max-width:64ch}
.prose p strong{color:var(--ink);font-weight:600}
.callout{margin:40px 0;border-top:2px solid var(--ink);border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr)}
.callout .ci{padding:22px 22px 24px;border-right:1px solid var(--line)}
.callout .ci:last-child{border-right:none}
.callout .cv{font-size:clamp(24px,3vw,32px);font-weight:500;letter-spacing:-.01em;line-height:1}
.callout .cv.pos{color:var(--green)}.callout .cv.neg{color:var(--red)}
.callout .ck{margin-top:12px;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.pull{font-family:var(--serif);font-style:italic;font-size:clamp(18px,2.1vw,22px);line-height:1.4;color:var(--ink);margin:34px 0;padding-left:20px;border-left:2px solid var(--ink);max-width:34ch}
.article-end{margin:62px 0 30px}
.article-end .rule-strong{margin-bottom:18px}
@media(max-width:600px){.callout{grid-template-columns:1fr}.callout .ci{border-right:none;border-bottom:1px solid var(--line)}.callout .ci:last-child{border-bottom:none}}

/* ===========================================================
   GENERISCHE INNENSEITEN (Mein Bereich / Cockpit / Makro)
   =========================================================== */
.inner-head{padding:58px 0 4px}
.inner-head h1{font-family:var(--serif);font-weight:500;font-size:clamp(32px,4.6vw,52px);line-height:1.04;letter-spacing:-.01em}
.inner-head .sub{margin-top:15px;font-size:16px;color:var(--ink-soft);max-width:54ch;line-height:1.55}

.acct{margin-top:42px;border-top:2px solid var(--ink);display:grid;grid-template-columns:repeat(2,1fr)}
.acct .ai{padding:22px 24px 24px;border-bottom:1px solid var(--line)}
.acct .ai:nth-child(odd){border-right:1px solid var(--line)}
.acct .ak{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.acct .av{margin-top:9px;font-size:18px}
@media(max-width:600px){.acct{grid-template-columns:1fr}.acct .ai:nth-child(odd){border-right:none}}

.peg{margin-top:30px;border-top:1px solid var(--line)}
.peg-row{padding:20px 4px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:210px 1fr 96px;gap:24px;align-items:center}
.peg-row .pk{font-size:14px;font-weight:600;letter-spacing:.01em}
.peg-row .pk em{display:block;font-style:normal;font-weight:400;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-top:4px}
.peg-track{height:6px;background:var(--paper-2);position:relative}
.peg-fill{position:absolute;left:0;top:0;bottom:0;background:var(--ink)}
.peg-fill.pos{background:var(--green)}.peg-fill.neg{background:var(--red)}
.peg-row .pv{text-align:right;font-size:18px;font-weight:500;font-variant-numeric:tabular-nums}
.peg-row .pv.pos{color:var(--green)}.peg-row .pv.neg{color:var(--red)}
@media(max-width:600px){.peg-row{grid-template-columns:1fr auto;gap:8px 16px}.peg-track{grid-column:1 / -1;order:3}}

.cal{margin-top:30px;border-top:2px solid var(--ink)}
.cal-row{display:grid;grid-template-columns:118px 1fr auto;gap:24px;align-items:center;padding:22px 4px;border-bottom:1px solid var(--line)}
.cal-row .cd{font-family:var(--serif);font-style:italic;color:var(--faint);font-size:16px;white-space:nowrap}
.cal-row .ct{font-size:17px;font-weight:500}
.cal-row .ct em{display:block;font-style:normal;font-weight:400;font-size:13.5px;color:var(--ink-soft);margin-top:4px;letter-spacing:0;text-transform:none}
.cal-row .imp{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:7px 12px;border:1px solid var(--line-2);color:var(--ink-soft);white-space:nowrap}
.cal-row .imp.hi{background:var(--ink);color:var(--paper);border-color:var(--ink)}
@media(max-width:600px){.cal-row{grid-template-columns:1fr auto;gap:6px 14px}.cal-row .cd{grid-column:1;font-size:14px}.cal-row .imp{grid-row:1 / span 2}}

.bm-list{margin-top:24px;border-top:1px solid var(--line)}
.bm-empty{padding:42px 4px}

/* Composer */
.composer{margin-top:40px;border-top:2px solid var(--ink);padding-top:30px}
.cf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:600px){.cf-grid{grid-template-columns:1fr}}
.cf-grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media(max-width:600px){.cf-grid2{grid-template-columns:1fr}}
/* Themen als Kaestchen statt als Liste, weil ein Beitrag mehrere tragen darf. */
.cf-themen{display:flex;flex-wrap:wrap;gap:8px}
.cf-themen label{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  background:var(--paper-2);border:1px solid var(--line-2);padding:9px 13px;
  font-size:13.5px;color:var(--ink);transition:border-color .16s}
.cf-themen label:hover{border-color:var(--ink-soft)}
.cf-themen input{width:auto;margin:0;padding:0;accent-color:var(--member-blau)}
.cf{display:block;margin-bottom:20px}
.cf > span{display:block;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px}
.cf > span em{font-style:normal;color:var(--faint);letter-spacing:.06em}
.cf input,.cf textarea{width:100%;background:var(--paper-2);border:1px solid var(--line-2);padding:11px 13px;font-size:15px;color:var(--ink);font-family:var(--sans)}
.cf input:focus,.cf textarea:focus{outline:none;border-color:var(--ink);background:var(--paper)}
.cf textarea{resize:vertical;line-height:1.5}
.cf-sec{font-family:var(--serif);font-size:19px;margin:30px 0 16px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.cf-sec em{font-family:var(--sans);font-style:normal;font-size:12px;letter-spacing:.04em;color:var(--faint);font-weight:400}
.cf-stat{display:grid;grid-template-columns:1fr 1.4fr 1.4fr auto;gap:12px;margin-bottom:12px;align-items:center}
.cf-stat input{width:100%;background:var(--paper-2);border:1px solid var(--line-2);padding:9px 11px;font-size:14px;color:var(--ink);font-family:var(--sans)}
.cf-stat input:focus{outline:none;border-color:var(--ink);background:var(--paper)}
.cf-stat select{background:var(--paper-2);border:1px solid var(--line-2);padding:9px 8px;font-size:12px;font-family:var(--sans);color:var(--ink)}
@media(max-width:600px){.cf-stat{grid-template-columns:1fr 1fr}}
.cf-chapter{border:1px solid var(--line-2);padding:20px;margin-bottom:16px;position:relative;background:var(--paper)}
.cf-chapter .cf-chno{font-family:var(--serif);font-style:italic;color:var(--faint);font-size:14px;margin-bottom:14px;display:block}
.cf-chapter .cf-del{position:absolute;top:16px;right:16px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.cf-chapter .cf-del:hover{color:var(--red)}
.cf-add{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);border:1px dashed var(--line-2);padding:12px 18px;width:100%;justify-content:center;transition:all .16s}
.cf-add:hover{border-color:var(--ink);color:var(--ink)}
.cf-actions{display:flex;align-items:center;gap:22px;margin-top:30px;flex-wrap:wrap}
.cf-ghost{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);border-bottom:1px solid var(--line-2);padding-bottom:2px}
.cf-ghost:hover{color:var(--ink);border-color:var(--ink)}
/* Bildvorschau im Mitteilungs-Formular. So gross wie in der Liste, damit
   man vorher sieht, wie der Beschnitt wirkt. */
.an-bildvor{display:flex;align-items:center;gap:16px;margin:-4px 0 6px}
.an-bildvor img{width:74px;height:74px;border-radius:10px;object-fit:cover;background:var(--paper-2)}
.cf-hint{margin-top:16px;font-size:13px;color:var(--ink-soft);min-height:18px}
.cf-hint.err{color:var(--red)}
.cf-hint.ok{color:var(--green)}
.cf-restore{margin-bottom:16px}
.cf-restore-inner{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;background:var(--paper-2);border:1px solid var(--gold);border-radius:10px;padding:12px 16px}
.cf-restore-txt{font-size:13px;color:var(--ink)}
.cf-restore-btns{display:flex;align-items:center;gap:16px}
.cf-tool-preview{margin-left:auto}
.cf-preview{position:fixed;top:0;right:0;width:min(560px,50vw);height:100vh;background:var(--paper);border-left:1px solid var(--line);box-shadow:-8px 0 40px rgba(0,0,0,.14);transform:translateX(101%);transition:transform .28s ease;z-index:120;display:flex;flex-direction:column}
.cf-preview.on{transform:none}
.cf-preview-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 22px;border-bottom:1px solid var(--line);flex:0 0 auto}
.cf-preview-head .label{color:var(--gold)}
.cf-preview-close{font-size:26px;line-height:1;color:var(--ink-soft);background:none;border:0;cursor:pointer;padding:0 4px}
.cf-preview-close:hover{color:var(--ink)}
.cf-preview-body{overflow:auto;padding:30px 34px 90px;flex:1 1 auto}
.cf-preview-body:empty::before{content:"Noch nichts zum Anzeigen. Schreib links los.";color:var(--faint);font-size:14px}
@media(min-width:1180px){body.cf-preview-open #compose>.wrap{margin-left:max(24px,calc(50vw - 560px - 460px));transition:margin .28s ease}}
@media(max-width:720px){.cf-preview{width:100vw}}
.cf-imgprev:not(:empty){margin:0 0 20px}
.cf-imgprev img{display:block;max-width:100%;height:auto;border:1px solid var(--line-2)}
.cf-imgdel{margin-top:8px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.cf-imgdel:hover{color:var(--red)}
.cf input[type=file]{padding:9px 11px;font-size:13px;background:var(--paper-2);border:1px solid var(--line-2);width:100%}

/* ===== #90 Mobile-Optimierung: Editor & Admin ===== */
@media(max-width:600px){
  /* iOS zoomt beim Fokus rein, wenn Felder < 16px sind — verhindern */
  .cf input,.cf textarea,.cf select,.cf-stat input,.cf-stat select{font-size:16px}
  .cf-stat input{padding:11px 12px}
  /* Werkzeugleiste: gut tippbar, Vorschau-Button nicht nach rechts drängen */
  .cf-tools{gap:8px}
  .cf-tool-preview{margin-left:0}
  .cf-tool{padding:10px 14px;font-size:12.5px}
  /* Aktionen: Haupt-Button volle Breite, Rest gross genug für den Daumen */
  .cf-actions{gap:14px 20px}
  .cf-actions .btn-inline{width:100%;justify-content:center;padding:15px 20px}
  .cf-ghost{padding:8px 0}
  /* Kapitel: etwas weniger Innenabstand, Löschen bleibt erreichbar */
  .cf-chapter{padding:16px 14px}
  /* Live-Vorschau nutzt auf Handy die volle Breite (siehe .cf-preview @720px) */
  .cf-preview-body{padding:22px 16px 90px}
}

/* ===== Editor: mehrere Bilder pro Kapitel ===== */
.cf-imglabel{font-size:13px;color:var(--ink-soft,#55534c);margin:14px 0 6px;letter-spacing:.01em}
.cf-imglabel em{font-style:normal;color:var(--faint,#abaaa2)}
.cf-images{display:flex;flex-direction:column;gap:12px}
.cf-imgrow{display:grid;grid-template-columns:1fr auto;gap:8px 12px;align-items:start;padding:12px;border:1px solid var(--line-2,#e4e1d9);border-radius:6px;background:var(--surface)}
.cf-imgrow input[type=file]{grid-column:1/2;font-size:13px}
.cf-imgrow .cf-imgcap{grid-column:1/2;width:100%;padding:8px 10px;border:1px solid var(--line-2,#e4e1d9);border-radius:4px;font:inherit;font-size:13px}
.cf-imgrow .cf-imgdel{grid-column:2/3;grid-row:1/4;align-self:start;background:none;border:1px solid var(--line-2,#e4e1d9);border-radius:4px;padding:6px 10px;font-size:12px;color:#b4453f;cursor:pointer}
.cf-imgrow .cf-imgprev{grid-column:1/2}
.cf-imgrow .cf-imgprev img{max-width:100%;border-radius:4px;display:block}
.cf-addimg{margin:10px 0 4px;background:none;border:1px dashed var(--line-2,#c9c6bd);border-radius:6px;padding:8px 14px;font-size:13px;color:var(--ink,#1a1a17);cursor:pointer}
.cf-addimg:hover{background:var(--surface)}

/* ===== Anklickbare Erklärungs-Verweise im Artikel ===== */
.explain-links{display:flex;flex-direction:column;gap:10px;margin:26px 0 6px}
.explain-link{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--surface);border:1px solid var(--line-2,#e4e1d9);border-radius:8px;padding:14px 16px;cursor:pointer;transition:border-color .15s,transform .05s}
.explain-link:hover{border-color:var(--ink,#1a1a17)}
.explain-link:active{transform:translateY(1px)}
.explain-link .el-ic{flex:0 0 auto;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--ink,#1a1a17);display:flex;align-items:center;justify-content:center;font-family:Georgia,serif;font-style:italic;font-size:14px}
.explain-link .el-t{flex:1;display:flex;flex-direction:column;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint,#abaaa2)}
.explain-link .el-t em{font-style:normal;text-transform:none;letter-spacing:0;font-size:15px;color:var(--ink,#1a1a17);margin-top:2px;font-weight:500}
.explain-link .el-go{flex:0 0 auto;font-size:18px;color:var(--ink,#1a1a17)}

/* ===== Erklärungs-Archiv ===== */
.exp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-top:8px}
.exp-card{text-align:left;background:var(--surface);border:1px solid var(--line-2,#e4e1d9);border-radius:10px;padding:20px;cursor:pointer;transition:border-color .15s,transform .05s;display:flex;flex-direction:column;gap:8px}
.exp-card:hover{border-color:var(--ink,#1a1a17)}
.exp-card:active{transform:translateY(1px)}
.exp-card .ec-term{font-family:Georgia,serif;font-size:20px;color:var(--ink,#1a1a17)}
.exp-card .ec-sub{font-size:13.5px;line-height:1.5;color:var(--ink-soft,#55534c)}
.exp-card .ec-go{margin-top:4px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint,#abaaa2)}

/* ===== Inhaltsverzeichnis ===== */
.toc{margin:34px 0 8px;padding:22px 24px;border:1px solid var(--line-2,#e4e1d9);border-radius:10px;background:var(--surface)}
.toc-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.toc-list{display:flex;flex-direction:column;gap:10px}
.toc-i{display:flex;align-items:baseline;gap:14px}
.toc-r{font-size:15px;color:var(--faint,#abaaa2);min-width:28px}
.toc-t{font-size:15px;color:var(--ink,#1a1a17)}

/* ===== Kurzfassung (TL;DR) ===== */
.tldr{margin:30px 0 8px;padding:20px 24px;border:1px solid var(--ink,#1a1a17);border-radius:10px;background:var(--surface)}
.tldr-head{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.tldr .prose p{margin:0 0 10px;font-size:calc(16px * var(--read-scale,1));line-height:1.55}
.tldr .prose p:last-child{margin-bottom:0}
.tldr-time{margin-left:auto;font-size:11px;letter-spacing:.04em;color:var(--faint,#abaaa2);white-space:nowrap}
.tldr[hidden]{display:none}
.tldr-toggle{display:inline-flex;align-items:center;gap:11px;margin:28px 0 8px;font:inherit;font-size:13.5px;letter-spacing:.02em;color:var(--paper);background:var(--ink);border:1px solid var(--ink);border-radius:999px;padding:12px 21px;cursor:pointer;transition:opacity .15s}
.tldr-toggle:hover{opacity:.9}
.tldr-toggle .tt-min{font-size:11px;letter-spacing:.06em;opacity:.68;padding-left:11px;margin-left:2px;border-left:1px solid rgba(255,255,255,.28)}
.tldr-toggle .tt-ch{transition:transform .2s;font-size:11px;opacity:.8}
.tldr-toggle.on .tt-ch{transform:rotate(180deg)}

/* ===== Interaktive Erklärungs-Widgets ===== */
.xw-scale{background:var(--surface);border:1px solid var(--line-2,#e4e1d9);border-radius:12px;padding:18px 20px;margin:26px 0 8px}
.xw-scale-row{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.xw-scale-row .xw-end{font-size:12px;color:var(--faint);white-space:nowrap}
.xw-scale-row input[type=range]{flex:1;min-width:0}
.xw-scale-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.xw-metric{background:var(--paper,#fbfaf7);border:1px solid var(--line);border-radius:8px;padding:12px 14px}
.xw-mlabel{font-size:12px;color:var(--faint);margin-bottom:4px}
.xw-mval{font-family:var(--serif,Georgia,serif);font-size:26px;line-height:1}
.xw-state{font-size:16px;font-weight:500}
.xw-read{font-size:14.5px;line-height:1.6;color:var(--ink-soft);margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.xw-tabs{margin-top:26px}
.xw-tabbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.xw-tab{font:inherit;font-size:13px;background:transparent;border:1px solid var(--line-2,#e4e1d9);border-radius:8px;padding:8px 14px;cursor:pointer;color:var(--ink-soft)}
.xw-tab.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.xw-panel p{margin:0 0 14px}
.xw-panel p:last-child{margin-bottom:0}
.xw-rel{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.xw-chip{font:inherit;font-size:13px;background:var(--surface);border:1px solid var(--line-2,#e4e1d9);border-radius:999px;padding:7px 14px;cursor:pointer;color:var(--ink-soft)}
.xw-chip:hover{border-color:var(--ink)}
.xw-phases{background:var(--surface);border:1px solid var(--line-2,#e4e1d9);border-radius:12px;padding:18px 20px;margin:26px 0 8px}
.xw-ph-bar{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.xw-ph-step{display:flex;align-items:center;gap:8px;font:inherit;font-size:13px;background:transparent;border:1px solid var(--line-2,#e4e1d9);border-radius:999px;padding:6px 14px 6px 6px;cursor:pointer;color:var(--ink-soft)}
.xw-ph-step.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.xw-ph-no{flex:none;width:21px;height:21px;border-radius:50%;background:var(--paper,#fbfaf7);color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:12px;font-family:var(--serif,Georgia,serif)}
.xw-ph-step.on .xw-ph-no{background:var(--gold);color:#fff}
.xw-ph-panel{font-size:14.5px;line-height:1.65;color:var(--ink-soft)}
.xw-ph-panel p{margin:0}

/* ===== Erklärungs-Übersicht (neu, klarer) ===== */
.exp-cat{margin:0 0 40px}
.exp-cat-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.exp-cat-name{font-size:23px;color:var(--ink);letter-spacing:-.01em}
.exp-cat-rule{flex:1;height:1px;background:var(--line-2);border:none}
.exp-cat-count{font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}
.exp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:14px}
.exp-card{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:8px;background:var(--surface);border:1px solid var(--line-2);border-radius:12px;padding:18px 18px 15px;cursor:pointer;font:inherit;transition:border-color .15s,transform .15s}
.exp-card:hover{border-color:var(--ink);transform:translateY(-2px)}
.ec-top{display:flex;align-items:center;gap:10px;width:100%}
.ec-term{font-size:19px;line-height:1.15;color:var(--ink)}
.ec-tag{margin-left:auto;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold);border-radius:999px;padding:3px 8px;white-space:nowrap}
.ec-sub{font-size:13.5px;line-height:1.5;color:var(--ink-soft)}
.ec-go{margin-top:4px;font-size:12px;letter-spacing:.04em;color:var(--faint)}
.exp-card:hover .ec-go{color:var(--ink)}
.ec-arr{display:inline-block;transition:margin .15s}
.exp-card:hover .ec-arr{margin-left:3px}
.exp-stats{display:flex;gap:30px;padding:2px 0 22px;margin-bottom:30px;border-bottom:1px solid var(--line)}
.es-i{display:flex;flex-direction:column}
.es-n{font-size:32px;line-height:1;color:var(--ink);letter-spacing:-.01em}
.es-l{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-top:6px}
.exp-cat{margin:0 0 44px}
.exp-cat-head{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.exp-cat-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--gold)}
.exp-cat-count{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);font-variant-numeric:tabular-nums;white-space:nowrap}
.exp-card{position:relative;overflow:hidden}
.exp-card::after{content:"";position:absolute;left:0;top:0;height:100%;width:3px;background:var(--gold);transform:scaleY(0);transform-origin:top;transition:transform .18s}
.exp-card:hover::after{transform:scaleY(1)}

/* ===== Abschnitts-Divider ===== */
.sec-divider{display:flex;align-items:center;gap:18px;margin:54px 0 8px}
.sec-divider .sd-r{font-size:30px;color:var(--ink,#1a1a17);line-height:1}
.sec-divider .sd-t{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft,#55534c);white-space:nowrap}
.sec-divider .rule{flex:1}

/* ===== Callout mit Beschreibung ===== */
.callout.callout-desc{grid-template-columns:1fr;gap:0;border:1px solid var(--line-2,#e4e1d9);border-radius:10px;overflow:hidden;background:var(--surface)}
.callout.callout-desc .ci{display:grid;grid-template-columns:auto 1fr;gap:4px 18px;padding:16px 20px;border-bottom:1px solid var(--line-2,#e4e1d9);text-align:left}
.callout.callout-desc .ci:last-child{border-bottom:none}
.callout.callout-desc .cv{grid-row:1/3;align-self:center;font-family:Georgia,serif;font-size:22px}
.callout.callout-desc .ck{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint,#abaaa2)}
.callout.callout-desc .cd{font-size:13.5px;line-height:1.5;color:var(--ink-soft,#55534c)}

/* ===== Levels-Grid (Einschätzung) ===== */
.levelgrid{margin:30px 0 6px;border:1px solid var(--ink,#1a1a17);border-radius:10px;overflow:hidden}
.levelgrid .lg-title{display:block;padding:14px 20px;border-bottom:1px solid var(--line-2,#e4e1d9);background:var(--surface)}
.lg-items{display:grid;grid-template-columns:1fr 1fr}
.lg-i{padding:16px 20px;border-bottom:1px solid var(--line-2,#e4e1d9);border-right:1px solid var(--line-2,#e4e1d9);background:var(--surface)}
.lg-i:nth-child(2n){border-right:none}
.lg-k{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint,#abaaa2);margin-bottom:5px}
.lg-v{font-family:Georgia,serif;font-size:19px;color:var(--ink,#1a1a17)}

/* Erklär-Link Untertitel */
.explain-link .el-sub{display:block;text-transform:none;letter-spacing:0;font-size:12.5px;line-height:1.45;color:var(--ink-soft,#55534c);margin-top:4px}
@media(max-width:560px){ .lg-items{grid-template-columns:1fr} .lg-i{border-right:none} }

.article-subtitle{font-family:Georgia,serif;font-size:21px;line-height:1.35;color:var(--ink-soft,#55534c);margin:6px 0 14px;font-style:italic}

/* ===== Der Fuss unter jedem Beitrag =====================================
   Ein einziger Bausatz für Bericht, Marktupdate, Deep Dive und Letter.
   Vorher wuchs hier für jede Gattung etwas anderes: erst ein Daumen, dann
   Emojis, dann ein Kasten, jeder mit eigenem Rahmen und eigener Mitte.
   Jetzt eine Ordnung, vier Abschnitte, zwischen ihnen nur eine Haarlinie:

     Membership (nur unter offenen Beiträgen) · Weiterlesen · Reaktion
     und Teilen · Frage an Fabian

   Linksbündig, weil der Artikel darüber linksbündig ist. Eine zentrierte
   Insel am Ende einer linksbündigen Spalte sieht immer eingesetzt aus. */
.artfoot{margin-top:56px}
.artfoot-sec{padding:26px 0;border-top:1px solid var(--line,#e4e1d9)}
.artfoot-sec:last-child{padding-bottom:8px}
.artfoot-h{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--faint,#abaaa2);margin:0 0 16px}

/* Membership. Kein schwarzer Kasten mehr: der stand am Ende jedes offenen
   Beitrags wie eine Anzeige und riss den Lesefluss ab. Eine Zeile reicht. */
.af-join{display:flex;align-items:baseline;justify-content:space-between;gap:18px;flex-wrap:wrap}
.af-join p{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink-soft,#55534c);max-width:56ch}
.af-join a{flex:none;font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.04em;
  color:var(--member-blau,#0B2FC2);text-decoration:none;border-bottom:1px solid currentColor;
  padding-bottom:2px;white-space:nowrap}
.af-join a:hover{color:var(--ink,#1a1a17)}
.af-join a:focus-visible{outline:2px solid var(--member-blau,#0B2FC2);outline-offset:3px;border-radius:2px}

/* Weiterlesen. Zeilen, keine Kacheln: die Kacheln stehen im Bestand, hier
   geht es nur um drei Titel, an denen der Leser hängen bleiben darf. */
.af-rel{display:block}
.af-rel-i{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line,#e4e1d9);
  padding:14px 0;font:inherit;cursor:pointer;color:inherit}
/* Seit Phase 2 ein echter Link statt eines Knopfs: sieht genauso aus. */
a.af-rel-i{text-decoration:none;color:inherit}
.af-rel-i:last-child{border-bottom:0;padding-bottom:0}
.af-rel-i:hover .af-rel-t{color:var(--member-blau,#0B2FC2)}
/* Der Ring liegt nach innen, sonst überdeckt er die Trennlinie der
   Nachbarzeile und sieht aus wie ein Fehler statt wie eine Auswahl. */
.af-rel-i:focus-visible{outline:2px solid var(--member-blau,#0B2FC2);outline-offset:-2px;border-radius:3px}
.af-rel-m{display:block;font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint,#abaaa2);margin-bottom:5px}
.af-rel-m .sep{padding:0 .5em;opacity:.55}
/* Mehr zum Thema: eine leise Zeile unter den drei Titeln, Links auf die
   Themenseiten. Gleicher Ton wie die Kopfzeile darüber. */
.af-themen{margin:18px 0 0;font-family:var(--sans);font-size:13px;color:var(--faint,#abaaa2)}
.af-themen a{color:var(--ink-soft,#55534c);text-decoration:none;border-bottom:1px solid var(--line-2,#d2cfc6)}
.af-themen a:hover{color:var(--member-blau,#0B2FC2);border-color:currentColor}
.af-themen .sep{padding:0 .5em;opacity:.55}
.af-rel-t{display:block;font-family:var(--serif);font-size:18px;line-height:1.3;color:var(--ink,#1a1a17);
  transition:color .12s}

.af-teilen-btns{display:flex;flex-wrap:wrap;gap:8px}
.af-sb{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:9px 15px;
  border:1px solid var(--line-2,#d2cfc6);border-radius:999px;background:var(--surface,#fff);
  font:inherit;font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.01em;
  color:var(--ink-soft,#55534c);cursor:pointer;transition:border-color .12s,color .12s}
.af-sb:hover{border-color:var(--member-blau,#0B2FC2);color:var(--member-blau,#0B2FC2)}
.af-sb:focus-visible{outline:2px solid var(--member-blau,#0B2FC2);outline-offset:2px}
.af-sb.ok{border-color:var(--member-blau,#0B2FC2);color:var(--member-blau,#0B2FC2)}

/* Teilen im Kopf des Beitrags. Sekundär: es steht in der Byline-Zeile,
   nicht neben dem Titel, und trägt die Farbe der Kleinschrift. */
.art-share{margin-left:auto;display:inline-flex;align-items:center;gap:6px;background:none;border:0;
  font:inherit;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint,#abaaa2);cursor:pointer;padding:8px 2px;transition:color .12s}
.art-share:hover{color:var(--member-blau,#0B2FC2)}
.art-share:focus-visible{outline:2px solid var(--member-blau,#0B2FC2);outline-offset:3px;border-radius:3px}
.art-share .as-pfeil{font-size:13px;line-height:1}

/* #49 Emoji-Reaktionen */
.reactions{display:flex;flex-direction:column;align-items:center;gap:12px;margin:16px 0 8px}
.reactions .rx-q{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint,#8a887f)}
/* Im Fuss trägt die Abschnittszeile die Beschriftung, und alles steht links. */
.artfoot .reactions{align-items:flex-start;margin:0;gap:0}
.artfoot .reactions .rx-q{display:none}
.artfoot .rx-btns{justify-content:flex-start}
.rx-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.rx-btn{display:flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid var(--line-2,#e4e1d9);border-radius:999px;background:var(--surface);cursor:pointer;transition:all .12s;line-height:1}
.rx-btn:hover{border-color:var(--ink,#1a1a17);transform:translateY(-1px)}
.rx-btn:active{transform:translateY(0)}
.rx-emoji{font-size:19px}
.rx-count{font-size:13px;font-variant-numeric:tabular-nums;color:var(--ink-soft,#55534c);min-width:8px}
.rx-btn:not(.has) .rx-count{color:var(--faint,#b3b1a8)}
.rx-btn.on{background:var(--gold-tint,#f5efe0);border-color:var(--gold,#b8912f)}
/* Die gewählte Reaktion liegt in jedem Thema auf demselben hellen Sandton,
   also braucht die Zahl darauf eine feste dunkle Tinte. Mit `--ink` war sie
   im dunklen Thema hell auf hell und damit unsichtbar. */
.rx-btn.on .rx-count{color:#1a1a17}

/* Admin: Feedback-Zähler in der Ausgaben-Liste */
.fb-count{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:12px;letter-spacing:.02em;white-space:nowrap;margin-right:6px}
.fb-count .fbc-up{color:#2c6e49}
.fb-count .fbc-down{color:#b4453f}

/* ===== Stripe-Dashboard ===== */
.stripe-nav{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 26px}
.snav{background:none;border:1px solid var(--line-2,#e4e1d9);border-radius:8px;padding:8px 16px;font:inherit;font-size:13.5px;color:var(--ink-soft,#55534c);cursor:pointer;transition:all .12s}
.snav:hover{border-color:var(--ink,#1a1a17);color:var(--ink,#1a1a17)}
.snav.on{background:var(--ink,#1a1a17);border-color:var(--ink,#1a1a17);color:#fff}
.stripe-count{margin:0 0 12px;color:var(--faint,#abaaa2)}
.stable-wrap{overflow-x:auto;border:1px solid var(--tab-linie,#e4e1d9);border-radius:10px;background:var(--surface)}
.stable{width:100%;border-collapse:collapse;font-size:13.5px}
.stable thead{background:var(--tab-kopf,#f6f5f0)}
.stable th{text-align:left;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--tab-kopf-fg,#abaaa2);font-weight:600;padding:13px 16px;border-bottom:1px solid var(--tab-linie,#e4e1d9);white-space:nowrap}
.stable td{padding:13px 16px;border-bottom:1px solid var(--tab-linie,#e4e1d9);color:var(--ink,#1a1a17);vertical-align:top}
.stable tbody tr:nth-child(even){background:var(--tab-zebra,transparent)}
/* Die erste Spalte benennt die Zeile und darf etwas fester stehen. */
.stable tbody td:first-child{font-weight:600}
.stable tr:last-child td{border-bottom:none}
.stable .sub2{display:block;font-size:11.5px;color:var(--faint,#abaaa2)}
.stable .sub2i{font-size:11px;color:var(--faint,#abaaa2)}
.sbadge{display:inline-block;font-size:11px;letter-spacing:.03em;padding:2px 8px;border-radius:20px;background:#f0efe9;color:var(--ink-soft,#55534c);margin-left:4px;white-space:nowrap}
.sbadge.pos{background:#eaf3ec;color:#2c6e49}
.sbadge.neg{background:#f7ecea;color:#b4453f}
.slink{color:var(--ink,#1a1a17);text-decoration:underline;font-size:12.5px;white-space:nowrap}
.stripe-setup{border:1px solid var(--line-2,#e4e1d9);border-radius:10px;padding:26px 28px;background:var(--surface);max-width:620px}
.stripe-setup .ss-h{font-family:Georgia,serif;font-size:20px;margin-bottom:10px}
.stripe-setup p{color:var(--ink-soft,#55534c);font-size:14px;line-height:1.6;margin:8px 0}
.stripe-setup code{background:#f5f4ef;border:1px solid var(--line-2,#e4e1d9);padding:1px 6px;border-radius:4px;font-size:12.5px}

/* ===== Admin-Reiter: standardmässig versteckt, nur für Admins sichtbar ===== */
.nav a[data-admin]{display:none !important}
body.is-admin .nav a[data-admin]{display:block !important}

.stripe-filter{display:inline-block;margin:0 0 14px;padding:6px 14px;border:1px solid var(--line-2,#e4e1d9);border-radius:20px;background:var(--surface);font-size:12.5px;color:var(--ink-soft,#55534c)}
.stripe-filter strong{color:var(--ink,#1a1a17)}

/* ===== Stripe-Kennzahlen ===== */
.smetrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:8px}
.smetric{border:1px solid var(--line-2,#e4e1d9);border-radius:12px;padding:20px;background:var(--surface)}
.smetric.hl{background:var(--ink,#1a1a17);border-color:var(--ink,#1a1a17)}
.smetric .sm-v{font-family:Georgia,serif;font-size:26px;line-height:1.1;color:var(--ink,#1a1a17)}
.smetric.hl .sm-v{color:#fff}
.smetric .sm-k{margin-top:8px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint,#abaaa2)}
.smetric.hl .sm-k{color:rgba(255,255,255,.6)}
.smetric .sm-k em{display:block;font-style:normal;letter-spacing:.02em;text-transform:none;font-size:12px;color:var(--faint,#abaaa2);margin-top:3px}
.smetric.hl .sm-k em{color:rgba(255,255,255,.5)}
.snav-reload{margin-left:auto}

/* ============================================================
   MOBILE-RESPONSIVE FEINSCHLIFF
   ============================================================ */

/* Admin-Zeilen (Veröffentlichte Ausgaben, Member) — umbruchfähig */
.adm-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:16px 0;border-bottom:1px solid var(--line,#ece9e1)}
.adm-row:last-child{border-bottom:none}
.adm-row .adm-main{flex:1 1 220px;min-width:0}
.adm-row .adm-actions{display:flex;gap:8px;flex-wrap:wrap}
.adm-row .fb-count{flex:0 0 auto}
@media(max-width:640px){
  .adm-row .adm-actions{flex:1 1 100%;justify-content:flex-start;margin-top:4px}
  .adm-row .adm-actions .cf-ghost{flex:1 1 auto;text-align:center}
  .adm-row .fb-count{flex-direction:row;gap:12px}
}

/* ---- Kalender-Verwaltung ----
   Links das Blatt, rechts das Formular. Der Sinn ist der Blick: wer einen
   Termin setzt, sieht im selben Moment, was in dem Monat schon steht und was
   auf dem gewaehlten Tag liegt. Das Blatt und das Datumsfeld sind dieselbe
   Angabe in zwei Formen und halten sich gegenseitig auf Stand. */
.pl-raum{display:grid;grid-template-columns:320px minmax(0,1fr);gap:34px;align-items:start;margin-bottom:36px}
/* `.composer` bringt sonst 40px Abstand mit und senkte die rechte Spalte gegen
   das Blatt ab. Nebeneinander sollen beide oben auf derselben Linie stehen. */
.pl-raum > .composer{margin-top:0}
@media(max-width:860px){ .pl-raum{grid-template-columns:minmax(0,1fr);gap:26px} }
.pl-blatt{border:1px solid var(--line);border-radius:12px;padding:16px 14px 14px;background:var(--surface)}
.pl-blatt .kal-tag{font-size:13px}
/* Der gewaehlte Tag ist umrandet, nicht gefuellt: gefuellt ist heute. */
.pl-blatt .kal-tag.wahl{box-shadow:inset 0 0 0 2px var(--ink)}
.pl-legende{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px;padding-top:12px;
  border-top:1px solid var(--line)}
.pl-tagliste{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.pl-tag-kopf{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint);margin-bottom:9px}
.pl-tag-leer{font-size:12.5px;color:var(--faint)}
.pl-tag-zeile{display:flex;align-items:center;flex-wrap:wrap;gap:4px 9px;padding:7px 0;font-size:13px}
.pl-tag-zeile > i{flex:none;width:6px;height:6px;border-radius:50%;background:var(--kal,var(--faint))}
.pl-tag-zeile > span{flex:1 1 120px;min-width:0;color:var(--ink)}
.pl-raus{flex:none;font-style:normal;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.pl-mini{flex:none;background:none;border:none;padding:0;font-family:inherit;font-size:11.5px;
  color:var(--ink-soft);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.pl-mini:hover{color:var(--ink)}
.pl-mini.rot{color:var(--red)}

/* Die Gattung als Farbplaketten statt als Auswahlfeld: sie ist im ganzen
   Kalender eine Farbe, also soll man sie hier auch als Farbe waehlen. */
.pl-chips{display:flex;flex-wrap:wrap;gap:8px}
.pl-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-2);
  border-radius:999px;padding:8px 14px;background:none;font-family:inherit;font-size:12.5px;
  color:var(--ink-soft);cursor:pointer;transition:border-color .16s,background .16s,color .16s}
.pl-chip i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--kal,var(--faint))}
.pl-chip:hover{border-color:var(--kal,var(--line-2))}
.pl-chip.an{border-color:var(--kal,var(--ink));color:var(--ink);
  background:color-mix(in srgb,var(--kal,var(--faint)) 12%,transparent)}

/* Die Serie: ein Schalter, und erst wenn er an ist, erscheinen die Felder.
   Geschlossen kostet sie eine Zeile, offen loest sie den Wochenrhythmus. */
.pl-serie{margin-top:20px;border:1px solid var(--line);border-radius:10px;padding:14px 16px;
  background:var(--paper-2)}
.pl-schalter{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink);cursor:pointer}
.pl-schalter input{width:16px;height:16px;accent-color:var(--ink);cursor:pointer}
.pl-serie-felder{display:grid;grid-template-columns:minmax(0,1fr) 110px;gap:14px;margin-top:14px}
/* `hidden` allein reicht nicht: die Regel darueber ist staerker als die des
   Browsers und liesse das Feld trotzdem stehen. */
.pl-serie-felder[hidden]{display:none}
@media(max-width:520px){ .pl-serie-felder{grid-template-columns:minmax(0,1fr)} }
.pl-serie-vor{margin-top:10px;font-size:12.5px;color:var(--ink-soft);min-height:18px}

/* Die Liste darunter nach Monat gebuendelt. Ein Termin ohne seinen Monat
   ist eine Zahl ohne Ort. */
.pl-mkopf{margin:26px 0 2px;font-size:11px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--faint)}
.pl-mkopf:first-child{margin-top:0}
.adm-row.pl-vorbei{opacity:.55}
/* `.rtags` ist im Haus nur unter `.row` gesetzt und bliebe in einer Admin-Zeile
   ohne Trennung: Datum, Gattung und Schlagworte liefen zu einem Wort zusammen.
   Hier dieselbe Schreibweise wie in den Leselisten, mit Punkt dazwischen. */
#planList .rtags{margin-top:6px;display:flex;flex-wrap:wrap;gap:0}
#planList .rtags span{font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint)}
#planList .rtags span+span::before{content:"·";padding:0 .5em;color:var(--line-2)}
/* Die Notiz steht eine Zeile tiefer und im Klartext: sie ist ein Satz, kein
   Merkmal, und in Versalien waere sie nicht mehr zu lesen. */
.pl-notiz{margin-top:5px;font-size:12.5px;line-height:1.4;color:var(--ink-soft)}

/* Abschnitts-Trenner: Titel darf auf schmal umbrechen */
@media(max-width:600px){
  .sec-divider{gap:12px;margin:40px 0 6px}
  .sec-divider .sd-r{font-size:24px}
  .sec-divider .sd-t{white-space:normal}
  .toc{padding:18px 18px}
  .levelgrid .lg-items{grid-template-columns:1fr}
  .lg-i{border-right:none}
  .article-subtitle{font-size:18px}
}

/* Erklär-Links + Beitragsfuss auf schmal.
   Die Knöpfe wachsen hier, nicht schrumpfen: 44px ist das Mindestmass für
   einen Daumen, und am Telefon wird dieser Fuss am häufigsten angefasst. */
@media(max-width:600px){
  .explain-link{padding:13px 14px;gap:11px}
  .explain-link .el-t em{font-size:14px}
  .exp-grid{grid-template-columns:1fr}
  .artfoot{margin-top:40px}
  .artfoot-sec{padding:22px 0}
  .af-sb{min-height:44px;padding:11px 16px;font-size:13.5px}
  .af-teilen-btns{gap:9px}
  .artfoot .rx-btn{min-height:44px;padding:8px 14px}
  .af-join{gap:12px}
  .af-join a{padding-bottom:4px}
  .af-rel-t{font-size:17px}
}

/* Stripe: Tabellen scrollen horizontal, kompaktere Zellen, Kacheln & Nav */
@media(max-width:700px){
  .stable th,.stable td{padding:11px 12px;font-size:13px}
  .stripe-nav{gap:6px}
  .snav{padding:7px 12px;font-size:12.5px}
  .snav-reload{margin-left:0;flex:1 1 100%}
  .smetric .sm-v{font-size:22px}
}

/* Tabellen auf dem Handy: seitliches Schieben ist zum Lesen unbrauchbar,
   vor allem bei drei oder vier Spalten. Darum wird jede Zeile eine Karte.
   Die erste Zelle ist die Überschrift der Karte, die übrigen stehen
   darunter. Liefert das Markup `data-k` mit, steht die Spaltenbeschriftung
   als Kicker über dem Wert — ohne `data-k` fällt sie einfach weg. */
@media(max-width:560px){
  .stable-wrap{overflow-x:visible;border:none;background:none;border-radius:0}
  .stable{display:block;font-size:14px}
  .stable thead{display:none}
  .stable tbody{display:block}
  .stable tbody tr{display:block;background:var(--surface);
    border:1px solid var(--tab-linie,#e4e1d9);border-radius:10px;
    padding:13px 15px;margin-bottom:10px}
  .stable tbody tr:nth-child(even){background:var(--tab-zebra,var(--surface))}
  .stable tbody tr:last-child{margin-bottom:0}
  .stable td,.stable tr:last-child td{display:block;padding:0;border-bottom:none;
    font-size:14px;line-height:1.5}
  .stable tbody td+td{margin-top:9px}
  .stable tbody tr td:first-child,
  .stable tbody tr:last-child td:first-child{font-weight:600;font-size:14.5px;
    padding-bottom:9px;margin-bottom:2px;
    border-bottom:1px solid var(--tab-linie,#e4e1d9)}
  .stable td[data-k]:not(:first-child)::before{content:attr(data-k);display:block;
    font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:600;
    color:var(--tab-kopf-fg,#abaaa2);margin-bottom:3px}
}
@media(max-width:420px){
  .smetrics{grid-template-columns:1fr 1fr}
}

/* Editor: Bildzeilen + Stat-Felder auf schmal */
@media(max-width:600px){
  .cf-imgrow{grid-template-columns:1fr}
  .cf-imgrow .cf-imgdel{grid-column:1;grid-row:auto;justify-self:start}
  .cf-stat{grid-template-columns:1fr}
  .stripe-filter{display:block}
}

/* Reader-Bilder & allgemeine Medien immer fluid */
.article img,.exp-article img,.chart-ph img{max-width:100%;height:auto}

/* Login-Box etwas Luft auf Mini-Screens */
@media(max-width:420px){
  .wrap{padding:0 16px}
  .login-mid{padding:0 16px}
}

/* ===== Mobile: lange Labels umbrechen + Überlauf-Schutz ===== */
@media(max-width:640px){
  .chapter-head{flex-wrap:wrap;gap:6px 10px}
  .chapter-head .cl,
  .article-runhead .rh,
  .sec-head h2,
  .sec-divider .sd-t{white-space:normal}
  .chapter-head .cl{letter-spacing:.12em}
}
/* Sicherheitsnetz: nie horizontal über den Bildschirm hinaus.
   overflow-x:clip statt hidden, damit die sticky-Topbar weiter funktioniert. */
html,body{max-width:100%;overflow-x:clip}
.prose,.rtitle,.article-lead,.article-subtitle,h1,h2,h3{overflow-wrap:break-word}

/* ===== Frage/Kommentar-Box (Reader) =====
   Im Beitragsfuss trägt der Abschnitt die Haarlinie, darum fällt der
   eigene Rahmen weg. Vier gerahmte Kästen untereinander wären kein Fuss. */
.cbox{margin:0;padding:0;border:0;background:none}
.cinput{width:100%;padding:13px 14px;border:1px solid var(--line-2,#e4e1d9);border-radius:8px;font:inherit;font-size:15px;line-height:1.55;resize:vertical;background:var(--surface-soft);color:var(--ink,#1a1a17)}
.cinput:focus{outline:none;border-color:var(--ink,#1a1a17)}
.my-comments{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.my-comments .mc-h{margin-bottom:2px}
.mc-i{border-left:2px solid var(--line-2,#e4e1d9);padding:4px 0 4px 14px}
.mc-meta{font-size:11.5px;letter-spacing:.04em;color:var(--faint,#abaaa2)}
.mc-body{font-size:14.5px;line-height:1.55;color:var(--ink-soft,#55534c);margin-top:3px;white-space:pre-wrap}

/* ===== Admin-Posteingang (Fragen) ===== */
.q-count{margin:0 0 16px;color:var(--faint,#abaaa2)}
.q-item{border:1px solid var(--line-2,#e4e1d9);border-radius:10px;padding:18px 20px;margin-bottom:12px;background:var(--surface)}
.q-item.is-new{border-color:var(--ink,#1a1a17);box-shadow:inset 3px 0 0 var(--ink,#1a1a17)}
.q-top{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;margin-bottom:8px}
.q-from{font-weight:500;color:var(--ink,#1a1a17)}
.q-letter{font-size:12px;letter-spacing:.04em;color:var(--ink-soft,#55534c)}
.q-date{font-size:11.5px;color:var(--faint,#abaaa2);margin-left:auto}
.q-body{font-size:15px;line-height:1.6;color:var(--ink,#1a1a17);white-space:pre-wrap;margin-bottom:14px}
.q-actions{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:600px){ .q-date{margin-left:0} .q-actions .cf-ghost{flex:1 1 auto;text-align:center} }

/* ===== Support: Verlaeufe, Kacheln, Mailzeile ===== */
.nav-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--red,#b4453f);vertical-align:middle;margin-left:2px}
.sup-thread{border:1px solid var(--line-2,#e4e1d9);border-radius:12px;padding:18px 20px;margin-bottom:14px;background:var(--surface)}
.sup-thread.is-new{border-color:var(--ink,#1a1a17);box-shadow:inset 3px 0 0 var(--ink,#1a1a17)}
.sup-thread.has-unread{border-color:var(--red,#b4453f)}
.sup-thread-head{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;margin-bottom:10px}
.sup-topic,.sup-bezug{font-size:11.5px;letter-spacing:.04em;color:var(--ink-soft,#55534c)}
.sup-bezug{color:var(--faint,#abaaa2)}
.sup-dot{width:8px;height:8px;border-radius:50%;background:var(--red,#b4453f)}
.sup-wer{font-size:11.5px;color:var(--faint,#abaaa2);margin:-4px 0 12px}
.sup-msgs{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.sup-msg{max-width:86%;padding:10px 14px;border-radius:10px;background:var(--surface-soft)}
.sup-msg.is-admin{align-self:flex-end;background:var(--ink,#1a1a17);color:#F4F2EC}
.sup-msg.is-admin .sup-msg-meta{color:rgba(244,242,236,.6)}
.sup-msg-meta{font-size:11px;letter-spacing:.04em;color:var(--faint,#abaaa2);margin-bottom:4px}
.sup-msg-body{font-size:14.5px;line-height:1.6}
.sup-reply{border-top:1px solid var(--line-2,#e4e1d9);padding-top:14px}
.sup-bausteine{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.sup-kacheln{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.sup-kachel{border:1px solid var(--line-2,#e4e1d9);border-radius:10px;padding:14px 16px;background:var(--surface)}
.sup-kachel.is-hot{border-color:var(--red,#b4453f)}
.sup-kachel b{display:block;font-size:26px;line-height:1.1;font-weight:500}
.sup-mailbox{margin-bottom:20px}
.sup-mail-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.sup-switch{display:flex;gap:7px;align-items:center;font-size:14px;cursor:pointer}
.sup-mail-stand{margin-top:7px;color:var(--faint,#abaaa2)}
/* Fünf Themenknöpfe passen auf dem Handy nicht in eine Zeile. */
.vx-modes.wrap{flex-wrap:wrap;width:100%}
.vx-modes.wrap .vx-mode{flex:1 1 auto}
@media(max-width:700px){ .sup-kacheln{grid-template-columns:repeat(2,1fr)} .sup-msg{max-width:100%} }

/* ===== Probezugang: Banner, gesperrte Zeilen, Upsell ===== */
.trial-banner{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center;
  background:var(--ink);color:#F4F2EC;padding:11px 22px;font-size:13.5px;letter-spacing:.01em;
  position:relative;z-index:60;text-align:center}
.trial-banner.expired{background:var(--red);color:#fff}
.trial-banner .tb-t{opacity:.96}
.trial-banner .tb-t strong{font-weight:700;letter-spacing:.02em}
.trial-banner .tb-sep{padding:0 .55em;opacity:.5}
.trial-banner .tb-cta{display:inline-flex;align-items:center;gap:.5em;white-space:nowrap;
  background:#F4F2EC;color:var(--ink);font-weight:600;font-size:13px;letter-spacing:.02em;
  padding:7px 16px;border-radius:999px;text-decoration:none;transition:transform .12s ease,background .12s ease}
.trial-banner .tb-cta:hover{transform:translateY(-1px);background:var(--surface)}
.trial-banner .tb-cta span{transition:transform .12s ease}
.trial-banner .tb-cta:hover span{transform:translateX(3px)}

/* gesperrte Archiv-Zeile */
.row.locked{cursor:pointer;opacity:1}
.row.locked .rno,.row.locked .rtitle{color:var(--faint)}
.row.locked:hover{background:var(--paper-2)}
.row.locked .lock-dot{display:inline-flex;align-items:center;justify-content:center;color:var(--faint)}
.row .lock-tag{font-size:10.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-soft);border:1px solid var(--line-2);
  border-radius:999px;padding:3px 9px;white-space:nowrap;justify-self:end}

/* Upsell-Overlay */
.upsell-ov{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(26,26,23,.55);backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .18s ease}
.upsell-ov.show{opacity:1;pointer-events:auto}
.upsell-card{background:var(--paper);border:1px solid var(--line);border-radius:14px;
  max-width:440px;width:100%;padding:34px 32px 28px;position:relative;
  box-shadow:0 24px 60px rgba(26,26,23,.22);transform:translateY(8px);transition:transform .18s ease}
.upsell-ov.show .upsell-card{transform:translateY(0)}
.upsell-x{position:absolute;top:14px;right:16px;background:none;border:none;font-size:26px;line-height:1;
  color:var(--faint);cursor:pointer;padding:4px}
.upsell-x:hover{color:var(--ink)}
.upsell-card .us-kicker{margin-bottom:12px}
.upsell-card h2{font-size:25px;font-weight:500;letter-spacing:-.01em;margin:0 0 12px;color:var(--ink)}
.upsell-card .us-sub{font-size:15px;line-height:1.62;color:var(--ink-soft);margin:0 0 22px}
.upsell-card .us-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.upsell-card .tb-cta{display:inline-flex;align-items:center;gap:.5em;background:var(--ink);color:#F4F2EC;
  font-weight:600;font-size:14px;letter-spacing:.01em;padding:11px 22px;border-radius:999px;
  text-decoration:none;transition:transform .12s ease}
.upsell-card .tb-cta:hover{transform:translateY(-1px)}
.upsell-card .tb-cta span{transition:transform .12s ease}
.upsell-card .tb-cta:hover span{transform:translateX(3px)}
@media(max-width:600px){
  .trial-banner{font-size:12.5px;padding:10px 16px;gap:10px}
  .trial-banner .tb-cta{padding:6px 13px}
  .upsell-card{padding:28px 22px 22px}
  .upsell-card h2{font-size:22px}
}

/* ===== Lese-Werkzeuge (Reader-Bar) ===== */
.rb-tools{display:flex;align-items:center;gap:6px}
.rb-ic{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;min-width:34px;padding:0 9px;
  border:1px solid var(--line-2);border-radius:999px;background:var(--surface);color:var(--ink-soft);
  font:inherit;font-size:12px;font-weight:600;letter-spacing:.04em;cursor:pointer;transition:all .12s}
.rb-ic:hover{color:var(--ink);border-color:var(--ink)}
.rb-ic.on{color:var(--ink);border-color:var(--ink)}
.rb-ic svg{display:block}
.rb-bm.on{color:var(--ink)}

/* Einstellungs-Popover (Theme + Schriftgrösse) */
.set-pop{position:absolute;top:54px;right:18px;z-index:60;background:var(--surface);border:1px solid var(--line-2);
  border-radius:14px;padding:16px;width:260px;box-shadow:0 18px 44px rgba(0,0,0,.16);
  opacity:0;transform:translateY(-6px);pointer-events:none;transition:.15s}
.set-pop.show{opacity:1;transform:none;pointer-events:auto}
.set-pop .sp-h{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:2px 0 10px}
.set-pop .sp-themes{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:16px}
.sp-theme{border:1px solid var(--line-2);border-radius:10px;padding:10px 6px;cursor:pointer;text-align:center;
  font-size:12px;font-weight:600;color:var(--ink-soft);transition:.12s}
.sp-theme:hover{border-color:var(--ink-soft)}
.sp-theme.on{border-color:var(--ink);color:var(--ink)}
.sp-theme .sw{display:block;width:100%;height:26px;border-radius:6px;margin-bottom:7px;border:1px solid rgba(0,0,0,.08)}
.sw-light{background:#FBFAF7}.sw-sepia{background:#F3E9D2}.sw-dark{background:#15151A}
.sw-news{background:#ECEAE2;background-image:repeating-linear-gradient(#b9b6ab 0 1px, transparent 1px 4px)}
.set-pop .sp-font{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sp-font .sf-btns{display:flex;gap:6px}
.sf-btns button{width:36px;height:34px;border:1px solid var(--line-2);border-radius:9px;background:var(--surface);
  color:var(--ink);font:inherit;font-weight:600;cursor:pointer;transition:.12s}
.sf-btns button:hover{border-color:var(--ink)}

/* ===== Markierungen ===== */
mark.hl{background:var(--hl);color:inherit;border-radius:2px;padding:.02em 0;cursor:pointer;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;transition:background .12s}
mark.hl.hl-green{background:var(--hl-green)}
mark.hl.hl-red{background:var(--hl-red)}
mark.hl.has-note{border-bottom:2px solid color-mix(in srgb,var(--ink) 40%,transparent)}
mark.hl:hover{filter:brightness(.95)}

/* Auswahl-Werkzeugleiste */
.sel-bar{position:fixed;z-index:1200;display:flex;gap:6px;
  background:var(--pill-bg);border-radius:14px;padding:7px;box-shadow:0 14px 40px rgba(0,0,0,.34);
  transform:translate(-50%,-6px);opacity:0;pointer-events:none;transition:opacity .14s, transform .14s}
.sel-bar.show{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.sel-bar button{background:none;border:none;color:var(--pill-fg);font:inherit;font-size:15px;font-weight:600;
  padding:12px 20px;border-radius:9px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;-webkit-tap-highlight-color:transparent}
.sel-bar button:active{background:color-mix(in srgb,var(--pill-fg) 22%,transparent)}
.sel-bar button:hover{background:color-mix(in srgb,var(--pill-fg) 15%,transparent)}
.sel-bar .sb-dot{width:13px;height:13px;border-radius:50%;background:var(--hl);display:inline-block}

/* Notiz-Popover */
.note-pop{position:fixed;z-index:130;width:300px;max-width:88vw;background:var(--surface);border:1px solid var(--line-2);
  border-radius:14px;padding:16px;box-shadow:0 18px 50px rgba(0,0,0,.22);
  transform:translate(-50%,0);opacity:0;pointer-events:none;transition:opacity .14s}
.note-pop.show{opacity:1;pointer-events:auto}
.note-pop .np-quote{font-family:var(--serif);font-size:14.5px;font-style:italic;color:var(--ink-soft);
  border-left:3px solid var(--hl);padding-left:11px;margin-bottom:12px;max-height:84px;overflow:auto}
.note-pop textarea{width:100%;min-height:84px;resize:vertical;font:inherit;font-size:14px;line-height:1.5;
  border:1px solid var(--line-2);border-radius:9px;padding:10px 12px;background:var(--surface-soft);color:var(--ink)}
.note-pop textarea:focus{outline:none;border-color:var(--ink)}
.note-pop .np-actions{display:flex;align-items:center;gap:8px;margin-top:12px}
.note-pop .np-save{flex:1;background:var(--pill-bg);color:var(--pill-fg);border:none;border-radius:999px;padding:10px;font:inherit;font-weight:600;cursor:pointer}
.note-pop .np-save:hover{opacity:.93}
.note-pop .np-del{background:none;border:none;color:var(--red);font:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:8px}
.note-pop .np-cancel{background:none;border:none;color:var(--ink-soft);font:inherit;font-size:13px;cursor:pointer;padding:8px}

/* Notizen-Sammlung (Reader + Mein Bereich) */
.notes-panel{margin:40px 0 8px;padding:26px 24px;border:1px solid var(--line-2);border-radius:12px;background:var(--surface)}
.notes-panel .np-empty{color:var(--faint);font-size:14px}
.note-item{padding:16px 0;border-top:1px solid var(--line)}
.note-item:first-of-type{border-top:none}
.note-item .ni-quote{font-family:var(--serif);font-size:16px;line-height:1.5;color:var(--ink);position:relative;padding-left:14px}
.note-item .ni-quote::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:3px;border-radius:3px;background:var(--hl)}
.note-item .ni-note{font-size:14.5px;color:var(--ink-soft);margin-top:8px;line-height:1.55;white-space:pre-wrap}
.note-item .ni-meta{display:flex;gap:14px;align-items:center;margin-top:10px}
.note-item .ni-meta button{background:none;border:none;font:inherit;font-size:12.5px;font-weight:600;color:var(--ink-soft);cursor:pointer;padding:0}
.note-item .ni-meta button:hover{color:var(--ink)}
.note-item .ni-meta .ni-del:hover{color:var(--red)}
.note-item .ni-src{font-size:12px;color:var(--faint);letter-spacing:.04em}
.area-notes .na-issue{font-family:var(--serif);font-size:15px;color:var(--ink);margin:22px 0 6px;letter-spacing:.02em}
.area-notes .na-issue:first-child{margin-top:0}

/* Weiterlesen-Hinweis */
.resume{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);z-index:90;
  background:var(--pill-bg);color:var(--pill-fg);border:none;border-radius:999px;padding:12px 20px;font:inherit;font-size:13.5px;
  font-weight:600;letter-spacing:.01em;cursor:pointer;box-shadow:0 12px 34px rgba(0,0,0,.26);
  opacity:0;pointer-events:none;transition:.2s}
.resume.show{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}

/* ===== Druck / PDF ===== */
@media print{
  .topbar,.reader-bar,.reading-progress,.sel-bar,.note-pop,.set-pop,.resume,
  .artfoot,.art-share,.notes-panel,.article-end,.site,.trial-banner,#nav,.fab,.toast,
  .bnav,.rseg{display:none!important}
  body{background:#fff;color:#000}
  #app{display:block!important}
  .page{display:none!important}
  .page#reader{display:block!important}
  .article{max-width:100%;padding:0}
  mark.hl{background:#f3e6a8!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .prose p,.article-intro p,.article-lead{color:#1a1a17}
  a{color:inherit;text-decoration:none}
}

/* ===== Volltext-Suche: Trefferanzeige ===== */
.search-row{display:flex;gap:18px;align-items:flex-start;cursor:pointer;padding:18px 4px;border-bottom:1px solid var(--line)}
.search-row:hover{background:var(--paper-2)}
.search-row .rno{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--faint);min-width:30px}
.search-row .rdate{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);min-width:88px;padding-top:3px;white-space:nowrap}
.search-row .rmain{min-width:0;flex:1}
.search-row .rtitle{font-size:18px;font-weight:500;color:var(--ink);letter-spacing:-.005em;margin-bottom:5px}
.search-snip{font-size:14.5px;line-height:1.55;color:var(--ink-soft);overflow-wrap:break-word}
.search-snip mark{background:var(--hl);color:var(--ink);border-radius:2px;padding:.02em .12em;font-weight:600}
.search-snip .sn-quote{font-family:var(--serif);color:var(--ink)}
.search-snip .sn-note{color:var(--ink-soft)}
.search-row .rtags{margin-top:9px}
.search-row.nolink{cursor:default}
.search-row.nolink:hover{background:none}
.search-sec{display:flex;align-items:center;gap:10px;margin:30px 0 4px;color:var(--faint)}
.search-sec span{background:var(--paper-2);border:1px solid var(--line);border-radius:999px;padding:1px 9px;font-size:11px}
@media(max-width:600px){
  .search-row{gap:12px}
  .search-row .rdate{min-width:0;flex-basis:100%;order:3}
}

/* ===== Farbige Markierungen: Auswahl, Picker, Filter ===== */
.sel-bar .sb-color{width:28px;height:28px;border-radius:50%;border:2px solid rgba(255,255,255,.28);padding:0;background:var(--hl);transition:transform .1s}
.sel-bar .sb-color.c-green{background:var(--hl-green)}
.sel-bar .sb-color.c-red{background:var(--hl-red)}
.sel-bar .sb-color:active{transform:scale(.88)}
.sel-bar .sb-note{color:var(--pill-fg)}

.np-colors{display:flex;gap:9px;margin:2px 0 12px}
.hl-dot{width:24px;height:24px;border-radius:50%;border:2px solid var(--line-2);cursor:pointer;padding:0;background:var(--hl);transition:transform .1s}
.hl-dot.c-green{background:var(--hl-green)}
.hl-dot.c-red{background:var(--hl-red)}
.hl-dot.on{outline:2px solid var(--ink);outline-offset:2px;border-color:transparent}
.hl-dot:active{transform:scale(.9)}

.note-item .ni-quote.ni-green::before{background:var(--hl-green)}
.note-item .ni-quote.ni-red::before{background:var(--hl-red)}

.ni-export{margin-left:auto;background:none;border:1px solid var(--line-2);border-radius:999px;padding:5px 13px;
  font:inherit;font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--ink-soft);cursor:pointer;transition:.12s}
.ni-export:hover{color:var(--ink);border-color:var(--ink)}
.ni-export.sm{padding:2px 10px;font-size:11px;margin-left:12px;vertical-align:middle}

.na-filter{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}
.na-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-2);background:var(--surface);
  border-radius:999px;padding:6px 13px;font:inherit;font-size:13px;font-weight:600;color:var(--ink-soft);cursor:pointer;transition:.12s}
.na-chip:hover{color:var(--ink)}
.na-chip.on{border-color:var(--ink);color:var(--ink)}
.na-chip span{background:var(--paper-2);border:1px solid var(--line);border-radius:999px;padding:0 7px;font-size:11px;font-weight:700}
.na-chip.c-yellow::before,.na-chip.c-green::before,.na-chip.c-red::before{content:"";width:12px;height:12px;border-radius:50%;display:inline-block}
.na-chip.c-yellow::before{background:var(--hl)}
.na-chip.c-green::before{background:var(--hl-green)}
.na-chip.c-red::before{background:var(--hl-red)}

@media print{
  mark.hl.hl-green{background:#bce3c2!important}
  mark.hl.hl-red{background:#f4c3be!important}
}

/* ===== Fokus-Lesemodus ===== */
body.focus-mode .reader-bar,
body.focus-mode .trial-banner,
body.focus-mode #reader .artfoot,
body.focus-mode #reader .art-share,
body.focus-mode #reader .notes-panel,
body.focus-mode #reader .article-end{display:none!important}
body.focus-mode #reader .article{max-width:700px}
.focus-exit{position:fixed;top:14px;right:14px;z-index:1300;background:var(--pill-bg);color:var(--pill-fg);
  border:none;border-radius:999px;padding:9px 16px;font:inherit;font-size:13px;font-weight:600;letter-spacing:.02em;
  cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.22);opacity:.82;transition:opacity .15s}
.focus-exit:hover{opacity:1}

/* ===== Chart-Lightbox ===== */
.lightbox{position:fixed;inset:0;z-index:1400;display:flex;flex-direction:column;background:rgba(8,8,10,.94);
  opacity:0;pointer-events:none;transition:opacity .18s;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.lightbox.show{opacity:1;pointer-events:auto}
.lb-top{display:flex;align-items:center;gap:14px;padding:14px 18px;color:#ECEAE3}
.lb-cap{flex:1;font-size:13px;color:#bbb8b0;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-btn{background:rgba(255,255,255,.1);color:#ECEAE3;border:none;border-radius:999px;min-width:42px;height:40px;padding:0 15px;
  font:inherit;font-size:15px;font-weight:600;cursor:pointer;transition:background .12s;-webkit-tap-highlight-color:transparent}
.lb-btn:hover{background:rgba(255,255,255,.2)}
.lb-close{font-size:17px}
#lbCompare{font-size:13px}
.lb-stage{flex:1;overflow:hidden;display:flex;align-items:center;justify-content:center;touch-action:none}
.lb-stage #lbImg{max-width:94vw;max-height:76vh;transform-origin:center center;will-change:transform;user-select:none;-webkit-user-drag:none}
.lb-pair{display:flex;gap:10px;width:100%;height:100%;padding:0 14px;align-items:center;justify-content:center}
.lb-pane{flex:1;height:76vh;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.04);border-radius:8px;overflow:hidden}
.lb-pane img{max-width:100%;max-height:100%}
.lb-ctrl{display:flex;gap:8px;justify-content:center;padding:6px}
.lb-thumbs{display:flex;gap:8px;overflow-x:auto;padding:12px 16px 18px;justify-content:flex-start}
.lb-thumbs{scrollbar-width:thin}
.lb-thumb{flex:0 0 auto;width:76px;height:48px;border:2px solid transparent;border-radius:6px;overflow:hidden;background:none;cursor:pointer;padding:0;opacity:.55;transition:.12s}
.lb-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.lb-thumb.on{opacity:1;border-color:#ECEAE3}
@media(max-width:600px){ .lb-pair{flex-direction:column}.lb-pane{height:36vh}.lb-thumbs{justify-content:flex-start} }

/* ===== App-Installations-Leiste ===== */
.install-bar{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:1250;
  display:flex;align-items:center;gap:14px;max-width:520px;width:calc(100% - 32px);
  background:var(--pill-bg);color:var(--pill-fg);border-radius:14px;padding:12px 16px;box-shadow:0 14px 40px rgba(0,0,0,.3);font-size:13.5px}
.install-bar .ib-t{flex:1;line-height:1.4}
.install-bar .ib-go{background:var(--pill-fg);color:var(--pill-bg);border:none;border-radius:999px;padding:8px 16px;font:inherit;font-weight:700;font-size:13px;cursor:pointer;white-space:nowrap}
.install-bar .ib-x{background:none;border:none;color:var(--pill-fg);opacity:.6;font-size:16px;cursor:pointer;padding:4px;line-height:1}
.install-bar .ib-x:hover{opacity:1}

@media print{ .focus-exit,.lightbox,.install-bar{display:none!important} }

/* ===== Mobile-Feinschliff: kompaktere Grössen ===== */
@media(max-width:600px){
  .topbar-inner{padding:13px 18px}
  .brand{font-size:15px;letter-spacing:.12em}

  .hero-kicker{margin-bottom:18px;gap:12px}
  .btn-inline{padding:13px 22px}

  .stats{margin-top:28px}
  .stat{padding:15px 14px 17px}
  .stat .num{font-size:clamp(22px,6.6vw,30px)}
  .stat .cap{font-size:10px;letter-spacing:.13em;margin-top:10px}

  .block{padding:34px 0}
  .sec-head{gap:12px}
  .sec-head h2{font-size:18px}

  .arch-head{padding:34px 0 24px}
  .arch-head h1{font-size:clamp(28px,8.4vw,42px)}
  .arch-head .sub,.inner-head .sub{font-size:15px}
  .inner-head{padding:32px 0 4px}
  .inner-head h1{font-size:clamp(27px,7.8vw,40px)}

  .article-mast{padding:30px 0 0}
  .article-title{font-size:clamp(27px,7.6vw,42px)}
  .article-lead{margin-top:18px;font-size:calc(17px * var(--read-scale,1))}
  .article-runhead{margin-bottom:22px}
  .chapter h3,.chapter h2.ch-h{font-size:clamp(22px,6.4vw,30px)}

  .search-row .rdate{display:none}
}
@media(max-width:400px){
  .stats{grid-template-columns:1fr 1fr}
  .topbar-inner{padding:12px 15px}
}

/* ===== Volltext-Suche: sauberes, eigenständiges Mobile-Layout ===== */
@media(max-width:640px){
  .search-row{display:flex;flex-direction:column;align-items:stretch;gap:5px;padding:16px 2px;overflow:hidden}
  .search-row .rno{order:0;grid-column:auto;font-size:13px;min-width:0;color:var(--faint)}
  .search-row .rdate{display:none}
  .search-row .rmain{order:0;grid-column:auto;width:100%;min-width:0;flex:none}
  .search-row .rtitle{font-size:16.5px;margin-bottom:4px}
  .search-snip{font-size:14px;overflow-wrap:anywhere}
  .search-snip mark{white-space:normal}
  .search-sec{margin:22px 0 4px}
}

/* ===== Push: Häkchen-Zeile ===== */
.push-row{display:flex;align-items:flex-start;gap:14px;cursor:pointer;padding:4px 0}
.push-row input{margin-top:3px;width:20px;height:20px;accent-color:var(--ink);flex:none;cursor:pointer}
.push-row input:disabled{opacity:.45;cursor:default}
.push-txt{display:flex;flex-direction:column;gap:3px}
.push-txt strong{font-size:15.5px;font-weight:600;color:var(--ink)}
.push-txt em{font-style:normal;font-size:13.5px;color:var(--ink-soft);line-height:1.5}

/* ===== Insights (Admin) ===== */
.ins-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin:30px 0 18px}
.ins-card{background:var(--surface);padding:20px 18px}
.ins-num{font-family:var(--serif);font-size:32px;font-weight:500;line-height:1;color:var(--ink)}
.ins-num small{font-size:.45em;color:var(--ink-soft);font-weight:600}
.ins-lab{margin-top:10px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.ins-online{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink-soft);margin:0 0 22px;padding:10px 14px;background:var(--surface);border:1px solid var(--line);border-radius:10px}
.ins-dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 22%,transparent);flex:none}
.ins-grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.ins-panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin-bottom:16px}
.ins-h{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:14px}
.ins-h em{font-style:normal;color:var(--faint);font-weight:500;letter-spacing:.04em;text-transform:none}
.chart{width:100%;height:auto;display:block}
.ins-scroll{overflow-x:auto}
.ins-tab{width:100%;border-collapse:collapse;font-size:14px}
.ins-tab th{text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);padding:0 10px 10px 0;border-bottom:1px solid var(--line);white-space:nowrap}
.ins-tab td{padding:11px 10px 11px 0;border-bottom:1px solid var(--line);color:var(--ink-soft);vertical-align:middle}
.ins-tab tbody tr:last-child td{border-bottom:none}
.ins-no{font-family:var(--serif);font-style:italic;color:var(--faint)}
.ins-t{color:var(--ink);font-weight:500}
.ins-tag{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);border:1px solid var(--line-2);border-radius:999px;padding:1px 7px}
.ins-clk{cursor:pointer}
.ins-clk:hover{background:var(--paper-2)}
.ins-comp{min-width:120px;white-space:nowrap}
.ins-bar{display:inline-block;width:70px;height:7px;border-radius:999px;background:var(--line);vertical-align:middle;overflow:hidden;margin-right:8px}
.ins-bar>span{display:block;height:100%;background:var(--ink);border-radius:999px}
.ins-pct{font-size:12px;color:var(--ink-soft);font-weight:600}
.ins-empty{color:var(--faint);padding:18px 0;text-align:center}
.ins-ev{display:flex;align-items:baseline;gap:9px;font-size:13px;color:var(--ink-soft);padding:6px 0;border-bottom:1px solid var(--line)}
.ins-ev>span:first-child{font-weight:600;color:var(--ink);min-width:78px}
.ins-ev em{font-style:normal;flex:1;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ins-evd{font-size:11px;color:var(--faint);white-space:nowrap}
@media(max-width:720px){ .ins-cards{grid-template-columns:1fr 1fr} .ins-grid2{grid-template-columns:1fr} }

/* ===== #76/#81/#82 Dashboard ===== */
.dash-cards{grid-template-columns:repeat(4,1fr)}
.dash-panel{margin-top:20px}
/* #82 Funnel */
.fn{display:flex;flex-direction:column;gap:10px}
.fn-row{display:grid;grid-template-columns:150px 1fr 52px;align-items:center;gap:12px}
.fn-label{font-size:13px;color:var(--ink-soft);font-weight:600;text-align:right}
.fn-track{background:var(--line);border-radius:8px;overflow:hidden;height:34px;display:flex}
.fn-fill{height:100%;display:flex;align-items:center;justify-content:flex-end;border-radius:8px;min-width:34px;transition:width .4s ease;background:var(--ink)}
.fn-fill-0{background:color-mix(in srgb,var(--ink) 88%,transparent)}
.fn-fill-1{background:color-mix(in srgb,var(--ink) 76%,transparent)}
.fn-fill-2{background:color-mix(in srgb,var(--ink) 64%,transparent)}
.fn-fill-3{background:color-mix(in srgb,var(--ink) 52%,transparent)}
.fn-fill-4{background:var(--green,#3a7d44)}
.fn-val{color:#fff;font-size:13px;font-weight:700;padding:0 12px;white-space:nowrap}
.fn-conv{font-size:12px;font-weight:700;color:var(--faint);text-align:left}
.fn-legend{margin-top:14px;font-size:12px;color:var(--faint);line-height:1.5}
/* #81 Heatmap */
.hm-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.hm{min-width:640px;display:flex;flex-direction:column;gap:4px}
.hm-row{display:grid;grid-template-columns:160px repeat(10,1fr) 60px;gap:4px;align-items:stretch}
.hm-head .hm-lab{font-size:10.5px;font-weight:700;color:var(--faint);background:none;display:flex;align-items:center;justify-content:center}
.hm-name{font-size:12px;color:var(--ink);font-weight:600;display:flex;flex-direction:column;justify-content:center;padding-right:8px;overflow:hidden}
.hm-sub{font-size:10.5px;color:var(--faint);font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-cell{display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;border-radius:4px;min-height:30px;background:var(--line)}
.hm-readers{font-size:12px;font-weight:700;color:var(--ink-soft);display:flex;align-items:center;justify-content:flex-end}
.hm-head .hm-readers{font-size:10.5px;color:var(--faint);font-weight:700}
@media(max-width:720px){ .dash-cards{grid-template-columns:1fr 1fr} .fn-row{grid-template-columns:96px 1fr 42px;gap:8px} .fn-label{font-size:12px} }

/* ===== Posteingang / Glocke ===== */
.tb-right{display:flex;align-items:center;gap:2px}
.bell{position:relative;background:none;border:none;color:var(--ink-soft);cursor:pointer;padding:7px;display:inline-flex;border-radius:8px;-webkit-tap-highlight-color:transparent}
.bell:hover{color:var(--ink)}
.bell-badge{position:absolute;top:1px;right:1px;min-width:16px;height:16px;padding:0 4px;background:var(--red);color:#fff;border-radius:999px;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1}
@media(min-width:861px){ .topbar-inner .nav{margin-left:auto} .topbar-inner .tb-right{margin-left:16px} }

.inbox-pop{position:fixed;top:64px;right:14px;z-index:200;width:340px;max-width:calc(100vw - 24px);
  background:var(--surface);border:1px solid var(--line-2);border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.18);
  opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .15s, transform .15s;overflow:hidden}
.inbox-pop.show{opacity:1;transform:none;pointer-events:auto}
.inbox-head{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--line);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.inbox-head button{background:none;border:none;color:var(--ink-soft);font:inherit;font-size:11.5px;font-weight:600;letter-spacing:.02em;text-transform:none;cursor:pointer}
.inbox-head button:hover{color:var(--ink)}
.inbox-list{max-height:min(70vh,460px);overflow-y:auto}
.inbox-empty{padding:34px 16px;text-align:center;color:var(--faint)}
.inbox-item{padding:13px 16px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .12s}
.inbox-item:last-child{border-bottom:none}
.inbox-item:hover{background:var(--paper-2)}
.ii-top{display:flex;align-items:center;gap:8px}
.ii-dot{width:7px;height:7px;border-radius:50%;background:transparent;flex:none}
.inbox-item.unread .ii-dot{background:var(--red)}
.ii-title{font-size:14.5px;font-weight:600;color:var(--ink);flex:1;line-height:1.3}
.inbox-item.unread .ii-title{font-weight:700}
.ii-date{font-size:11px;color:var(--faint);white-space:nowrap}
.ii-body{font-size:13px;color:var(--ink-soft);line-height:1.5;margin-top:6px;padding-left:15px}
/* Im Posteingang ist nur Platz fuer eine Marke, nicht fuer das ganze Bild.
   Darum quadratisch beschnitten, genauso gross wie die Vorschau im Formular. */
.ii-bild{margin-top:7px;padding-left:15px}
.ii-bild img{display:block;width:74px;height:74px;border-radius:10px;object-fit:cover;background:var(--paper-2)}
.ii-link{font-size:12px;font-weight:600;color:var(--ink);margin-top:7px;padding-left:15px}
@media(max-width:600px){ .inbox-pop{top:calc(56px + env(safe-area-inset-top,0px));right:8px;left:8px;width:auto} }

/* ===== Zeitungsmodus ===== */
body.theme-news{
  --paper:#F1F0EA; --paper-2:#E8E6DD; --ink:#15140F; --ink-soft:#3c3b35; --faint:#85837b;
  --line:#cecabf; --line-2:#bbb6a9; --surface:#F6F5EF; --surface-soft:#F6F5EF; --hl:#EAD98A;
}
body.theme-news #reader .article{font-family:var(--serif)}
body.theme-news #reader .article-mast{border-bottom:2px solid var(--ink);padding-bottom:16px}
body.theme-news #reader .article-runhead .rh,
body.theme-news #reader .article-runhead .rn{font-family:var(--serif)}
body.theme-news #reader .article-title{font-weight:600;letter-spacing:-.012em}
body.theme-news #reader .article-lead{font-family:var(--serif);font-style:italic;color:var(--ink-soft)}
body.theme-news #reader .article-subtitle{font-family:var(--serif)}
body.theme-news #reader .article-intro p,
body.theme-news #reader .chapter .prose p,
body.theme-news #reader .fazit .prose p{
  font-family:var(--serif);text-align:justify;-webkit-hyphens:auto;hyphens:auto;
  font-size:calc(18px * var(--read-scale,1));line-height:1.5;color:#1b1a14}
body.theme-news #reader .article-intro p:first-of-type::first-letter{
  float:left;font-family:var(--serif);font-weight:600;font-size:3.4em;line-height:.82;padding:6px 10px 0 0;color:var(--ink)}
body.theme-news #reader .chapter h3,body.theme-news #reader .chapter h2.ch-h{font-family:var(--serif);font-weight:600;font-size:clamp(22px,4vw,31px);letter-spacing:-.01em}
body.theme-news #reader .chapter-head .cl{font-variant:small-caps;letter-spacing:.06em;font-size:13px}
body.theme-news #reader .sec-divider .sd-t{font-variant:small-caps;letter-spacing:.06em}
body.theme-news #reader .pull{font-family:var(--serif);font-style:italic}

/* ===== Erklärungs-Suche + Kategorien ===== */
.exp-search{position:relative;display:flex;align-items:center;margin:0 0 28px}
.exp-search-ico{position:absolute;left:16px;color:var(--faint);pointer-events:none}
.exp-search input{width:100%;padding:15px 16px 15px 46px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font-size:16px;font-family:inherit;outline:none;transition:border-color .15s}
.exp-search input:focus{border-color:var(--ink)}
.exp-search input::placeholder{color:var(--faint)}
.exp-search-info{position:absolute;right:16px;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--faint)}
.exp-cat{margin-bottom:34px}
.exp-cat-head{display:flex;align-items:center;gap:12px;margin:0 2px 14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.exp-cat-name{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);font-weight:600}
.exp-cat-count{font-size:11px;color:var(--faint);background:var(--pill-bg,var(--paper-2));color:var(--faint);border-radius:20px;padding:2px 9px;letter-spacing:.04em}

/* ===== Push: wer hat es an ===== */
.push-who{margin-top:4px}
.pw-head{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-bottom:12px}
.pw-list{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.pw-row{display:flex;align-items:center;gap:12px;padding:13px 16px;background:var(--surface);flex-wrap:wrap}
.pw-name{font-weight:600;color:var(--ink);display:flex;align-items:center;gap:8px}
.pw-tag{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);border:1px solid var(--line-2,var(--line));border-radius:20px;padding:1px 7px;font-weight:600}
.pw-mail{color:var(--faint);font-size:14px}
.pw-dev{margin-left:auto;font-size:12px;color:var(--faint);letter-spacing:.03em}
.login-trial{margin-top:18px;text-align:center;font-size:13px;color:var(--faint);letter-spacing:.02em}
.login-trial a{color:var(--ink-soft);font-weight:600;text-decoration:none;border-bottom:1px solid var(--line-2)}
.login-trial a:hover{color:var(--ink)}

/* ===== Gast-Modus (Marktupdate-Funnel) ===== */
[data-guest="1"]{display:none}
body.is-guest [data-guest="1"]{display:inline-flex}
body.is-guest [data-member="1"]{display:none !important}
/* Gast-Knöpfe in der Topbar: Einloggen schlicht, Member werden als edle Gold-Pille */
.nav a.nav-guest{text-transform:uppercase;letter-spacing:.13em;font-size:12px;color:var(--ink)}
.nav a.nav-guest:hover{color:var(--gold)}
.nav a.nav-guest-join{
  position:relative;overflow:hidden;
  text-transform:uppercase;letter-spacing:.11em;font-size:11px;font-weight:700;color:#fff;
  background:#161614;border-radius:5px;padding:11px 20px;line-height:1;
  box-shadow:0 1px 2px rgba(0,0,0,.25);transition:background .15s}
.nav a.nav-guest-join:hover{color:#fff;background:#000}
.nav a.nav-guest-join::after{
  content:"";position:absolute;top:0;left:-160%;width:55%;height:100%;
  background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%);
  transform:skewX(-20deg);animation:njShine 3.6s ease-in-out infinite}
@keyframes njShine{0%{left:-160%}55%{left:160%}100%{left:160%}}
@media (prefers-reduced-motion: reduce){ .nav a.nav-guest-join::after{animation:none;display:none} }
@media(max-width:860px){
  .nav a.nav-guest{border-bottom:1px solid var(--line)}
  .nav a.nav-guest-join{width:100%;text-align:center;border-bottom:none;margin:16px 0 4px;padding:16px;font-size:13px;border-radius:6px}
}
/* Gast braucht keinen Zurück-Pfeil, er hat das Menü oben */
body.is-guest #reader .rb-back{display:none}
body.is-guest #reader .reader-bar-inner{justify-content:flex-end}
/* gesperrte Karten im Archiv/Übersicht */
.lock-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
.is-locked{position:relative}
.guest-hint{background:var(--paper-2);border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin:0 0 24px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.guest-hint .gh-t{font-weight:600;color:var(--ink)}
.guest-hint .gh-s{font-size:14px;color:var(--ink-soft)}
.guest-hint a{margin-left:auto;background:var(--pill-bg);color:var(--pill-fg);border-radius:9px;padding:9px 16px;font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap}

/* Gast-Paywall (Upsell-Variante) */
.us-lock{width:48px;height:48px;border-radius:50%;background:var(--paper-2);display:flex;align-items:center;justify-content:center;color:var(--gold);margin-bottom:6px}
.us-actions-col{flex-direction:column;align-items:stretch;gap:10px;width:100%}
.cf-cta{display:block;width:100%;text-align:center;padding:13px 16px;border-radius:10px;font-size:15px;font-weight:600;text-decoration:none;cursor:pointer;border:1px solid var(--ink);background:var(--ink);color:var(--paper)}
.cf-cta:hover{opacity:.92}
.cf-cta-ghost{background:none;color:var(--ink)}
.cf-cta-ghost:hover{background:var(--paper-2);opacity:1}

/* Gast: Member-Lesewerkzeuge ausblenden */
body.is-guest .bookmark,
body.is-guest #readerBm,
body.is-guest .notes-panel{display:none !important}
/* Hier stand der schwarze Gast-Kasten am Update-Ende (.guest-cta). Er ist
   am 29.09.2026 in die erste Zeile des Beitragsfusses gewandert, siehe
   .af-join. Ein Block mit eigener Farbwelt am Ende eines Artikels liest
   sich als Anzeige, nicht als Teil der Publikation. */

/* ——— Die Bezahlschranke im Artikel ———
   Kein Fenster, keine Karte, kein Kasten: der Artikel hoert auf und die
   Schranke steht an seiner Stelle, in derselben Spalte und auf demselben
   Papier. Genau drei Teile, durch Weissraum getrennt:
     1  die Ansage, gross und in Versalien. Sie ist der Halt im Lesefluss.
     2  eine Haarlinie ueber die ganze Spalte.
     3  das Angebot: das Wort MEMBER, der Preis, drei Saetze, der Knopf.
   Die letzten Zeilen des freien Textes laufen darueber weich aus. Das ist
   kein Platzhalter-Gerippe aus grauen Balken mehr, sondern der echte Satz,
   der im Papier verschwindet. */
.preview-gate{position:relative;margin-top:4px}
.preview-gate::before{content:"";position:absolute;left:0;right:0;top:-150px;height:150px;
  background:linear-gradient(to bottom, transparent, var(--paper) 88%);pointer-events:none;z-index:1}
/* Der Fuss ist gross, weil die Schranke bei einem Gast das Letzte im Artikel
   ist: der ganze Beitragsfuss und die Abschlusszeile fallen weg. Ohne ihn
   saesse der Knopf direkt auf der Seitenkante. */
.pw{position:relative;z-index:2;padding:8px 0 96px}

/* 1 — die Ansage. Serif waere hier zu hoeflich; das ist der einzige Ort im
   Haus, an dem die Grotesk in 800 und Versalien auftritt. Sie darf breiter
   wirken als der Fliesstext, weil sie die ganze Spalte nimmt.

   Die Obergrenze ist gemessen, nicht geschaetzt: die laengste der drei
   gesetzten Zeilen ("nur fuer Member ist.") misst bei 58px 586px, die Spalte
   ist 728px breit. 68px ergeben 687px und damit noch 41px Luft. Mehr ginge
   nicht, ohne dass die Zeile von selbst umbricht und ein Wort allein stehen
   laesst. */
.pw-titel{font-family:var(--sans);font-weight:800;text-transform:uppercase;
  font-size:clamp(33px,6.2vw,68px);line-height:1.02;letter-spacing:-.025em;
  color:var(--ink);margin:0 0 22px}
.pw-frage{font-family:var(--sans);font-weight:800;text-transform:uppercase;
  font-size:clamp(17px,2.6vw,23px);letter-spacing:-.01em;color:var(--ink-soft);margin:0}
.pw-login{margin-top:30px;font-size:13px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint)}
.pw-login button{background:none;border:none;padding:0;font:inherit;cursor:pointer;
  color:var(--member-blau);text-decoration:underline;text-underline-offset:4px;
  text-decoration-thickness:2px}
.pw-login button:hover{text-decoration-thickness:3px}

/* 2 — der Schnitt */
.pw-schnitt{height:1px;background:var(--line-2);border:0;width:100%;margin:46px 0 0}

/* 3 — das Angebot. Eine Flaeche, keine zwei Karten: es gibt nur eine
   Membership, und zwei Spalten wuerden eine Wahl vortaeuschen. */
.pw-angebot{padding-top:44px}
/* Eine Stufe unter der Ansage, nicht gleichauf. Beides sind fette Versalien,
   und in der letzten Zeile der Ansage steht schon "MEMBER" — waeren sie gleich
   gross, stuenden zwei Ueberschriften nebeneinander und keine fuehrte. */
.pw-wort{font-family:var(--sans);font-weight:800;text-transform:uppercase;
  font-size:clamp(38px,6vw,56px);line-height:1;letter-spacing:-.03em;color:var(--ink)}
/* Das Blau faehrt durch den Fuss der Buchstaben, wie ein Strich mit dem Marker.
   Es liegt bewusst NICHT sauber darunter: dort saesse es direkt ueber dem
   schwarzen Balken und die beiden laesen sich als doppelte Linie. So schneidet
   es ins Wort und bleibt, was es sein soll — eine Markierung, kein Strich.
   `display:inline` ist noetig, sonst laege der Streifen unter der ganzen Zeile
   statt unter dem Wort. */
.pw-wort span{display:inline;background-image:linear-gradient(var(--member-blau),var(--member-blau));
  background-repeat:no-repeat;background-size:100% .2em;background-position:0 78%}
.pw-balken{height:3px;background:var(--ink);border:0;width:100%;margin:18px 0 26px}
.pw-preis{font-family:var(--sans);font-weight:800;font-variant-numeric:tabular-nums slashed-zero;
  font-size:clamp(28px,4.4vw,40px);line-height:1.1;letter-spacing:-.02em;color:var(--ink)}
.pw-preis em{font-style:normal;font-weight:600;font-size:.52em;letter-spacing:0;
  text-transform:uppercase;color:var(--ink-soft);margin-left:.35em}
.pw-kuendbar{margin-top:8px;font-size:14.5px;color:var(--ink-soft)}
.pw-plus{margin:38px 0 0;font-size:12px;font-weight:700;letter-spacing:.17em;
  text-transform:uppercase;color:var(--faint)}
/* Drei Saetze, kein Haken davor. Ein Haken verspricht Vollstaendigkeit,
   diese drei Zeilen sagen einfach, was drin ist. */
.pw-nutzen{margin:22px 0 0}
.pw-nutzen div{padding:19px 0;border-top:1px solid var(--line)}
.pw-nutzen dt{font-weight:700;font-size:16px;color:var(--ink);margin-bottom:5px}
.pw-nutzen dd{margin:0;font-size:15.5px;line-height:1.5;color:var(--ink-soft)}
.pw-cta{display:block;width:100%;max-width:420px;margin:42px auto 0;text-align:center;
  padding:21px 24px;border:none;border-radius:7px;cursor:pointer;text-decoration:none;
  background:var(--member-blau);color:#fff;
  font-family:var(--sans);font-size:15px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  transition:filter .16s}
.pw-cta:hover{filter:brightness(1.12)}
/* Im dunklen Lesemodus ist das Blau aufgehellt. Weisse Schrift kaeme darauf nur
   auf 3.4:1, dunkle auf 6.2:1. Also dreht der Knopf dort die Schrift um. */
body.theme-dark .pw-cta{color:#0A0A0C}
@media(prefers-reduced-motion: reduce){.pw-cta,.pw-login button{transition:none}}

/* ---- Jeder Weg in die Membership traegt dasselbe Blau ----
   Schwarz ist hier die Farbe der gewoehnlichen Knoepfe: speichern, senden,
   anlegen, hochladen. Der eine Knopf, der Geld kostet, darf nicht aussehen wie
   die anderen. Er bekommt `--member-blau`, dieselbe Farbe wie die
   Member-Plakette im Archiv und die Bezahlschranke, damit ueberall auf der
   Plattform dasselbe Blau dasselbe bedeutet.

   Eine einzige Liste statt sechs verstreuter Regeln, sonst bleibt beim
   naechsten Farbwechsel garantiert ein Knopf schwarz zurueck. Sie steht
   bewusst HIER UNTEN, nach allen sechs Ursprungsregeln: bei gleicher
   Staerke gewinnt die spaetere, und `.nav a.nav-guest-join` weiter oben
   waere sonst staerker gewesen.

   Im dunklen Thema ist `--member-blau` aufgehellt (#5B86F5). Weiss kaeme
   darauf nur auf 3.4:1, dunkel auf 6.2:1. Darum dreht die Schrift dort um,
   genau wie bei `.pw-cta` eine Zeile weiter oben.

   NICHT dabei: der Knopf im Probeband. Der sitzt auf einem schwarzen, im
   abgelaufenen Fall roten Balken und ist dort cremefarben. Blau auf Schwarz
   waere schlechter zu lesen, nicht besser. */
.hj-cta,
.nav a.nav-guest-join,
.tbg-join,
.upsell-card .tb-cta,
.cf-cta:not(.cf-cta-ghost),
.btn-inline.is-join{
  background:var(--member-blau);border-color:var(--member-blau);color:#fff}
.hj-cta:hover,
.nav a.nav-guest-join:hover,
.tbg-join:hover,
.upsell-card .tb-cta:hover,
.cf-cta:not(.cf-cta-ghost):hover,
.btn-inline.is-join:hover{
  background:var(--member-blau);color:#fff;filter:brightness(1.12)}
body.theme-dark .hj-cta,
body.theme-dark .nav a.nav-guest-join,
body.theme-dark .tbg-join,
body.theme-dark .upsell-card .tb-cta,
body.theme-dark .cf-cta:not(.cf-cta-ghost),
body.theme-dark .btn-inline.is-join,
body.theme-dark .hj-cta:hover,
body.theme-dark .nav a.nav-guest-join:hover,
body.theme-dark .tbg-join:hover,
body.theme-dark .upsell-card .tb-cta:hover,
body.theme-dark .cf-cta:not(.cf-cta-ghost):hover,
body.theme-dark .btn-inline.is-join:hover{color:#0A0A0C}

/* Marktupdate: Editor-Badges + Archiv-Freischaltung */
.adm-tag{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--line-2);border-radius:20px;padding:1px 8px;margin-left:6px;color:var(--ink-soft);vertical-align:middle}
.adm-tag.tg-update{border-color:var(--gold);color:var(--gold)}
.adm-tag.tg-bericht{border-color:var(--bericht-gruen);color:var(--bericht-gruen)}
.adm-tag.tg-morning{border-color:var(--morning-violett);color:var(--morning-violett)}
.adm-tag.tg-draft{border-color:var(--line-2);background:var(--paper-2);color:var(--faint)}
.adm-row.is-draft{opacity:.86}
.upd-admin{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:space-between;
  background:var(--paper-2);border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin-bottom:24px}
.upd-admin.on{border-color:var(--green)}
.upd-admin .ua-txt{display:flex;flex-direction:column;gap:3px}
.upd-admin .ua-txt strong{font-weight:700;color:var(--ink)}
.upd-admin .ua-txt span{font-size:14px;color:var(--ink-soft)}

/* Marktupdate: klares Gratis-Label im Kopf */
.free-badge{display:flex;width:fit-content;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green);border:1px solid var(--green);border-radius:30px;padding:6px 14px;margin:4px 0 18px}
.free-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green)}
.article-mast.is-update .article-title{letter-spacing:-.02em}

/* Marktupdate/Letter Kopf auf dem Handy aufräumen */
@media(max-width:600px){
  .article-mast{padding-top:22px}
  .article-runhead{gap:12px;margin-bottom:16px}
  .article-runhead .rn{font-size:12px}
  .article-runhead .rh{font-size:10px}
  .article-mast > .label{display:block;font-size:10.5px;letter-spacing:.07em;line-height:1.8}
  .article-mast > .label .dot-sep{padding:0 .4em;opacity:.5}
  .free-badge{font-size:10px;letter-spacing:.1em;padding:5px 11px;margin:6px 0 14px}
  .article-title{margin-top:10px}
  .article-subtitle{font-size:17px}
  .article-lead{margin-top:14px;font-size:calc(16px * var(--read-scale,1));line-height:1.5}
  .article-byline{margin-top:20px;padding-bottom:22px;gap:11px}
  .author-photo{width:40px;height:40px}
  .article-byline .label{font-size:10px;letter-spacing:.07em;line-height:1.5}
}

.article-mast > .label .mb{white-space:nowrap}

/* Klickbare Links im Fliesstext */
.prose a, .article-lead a, .article-intro a, .fazit .prose a{
  color:var(--ink);text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--line-2);transition:text-decoration-color .12s}
.prose a:hover, .article-lead a:hover, .article-intro a:hover, .fazit .prose a:hover{text-decoration-color:var(--ink)}
.cf-note{font-size:13px;color:var(--ink-soft);background:var(--paper-2);border:1px solid var(--line);border-radius:10px;padding:11px 14px;margin-bottom:16px}
.cf-note code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;background:var(--surface,#fff);border:1px solid var(--line);border-radius:5px;padding:1px 6px}
/* Editor-Werkzeugleiste: Button/Link an Cursor einfügen */
.cf-tools{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0 0 18px}
.cf-tools-lbl{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.cf-tool{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--ink-soft);border:1px solid var(--line-2);border-radius:7px;padding:8px 13px;background:var(--paper);cursor:pointer;transition:all .16s}
.cf-tool:hover{border-color:var(--ink);color:var(--ink)}
.cf-tool b{font-weight:800;font-size:14px;line-height:1}
/* Kompakte Einfüge-Leiste direkt unter einem Textfeld */
.cf-fieldtools{display:flex;gap:8px;margin-top:9px}
.cf-fieldtools .cf-tool{padding:6px 11px;font-size:11.5px}
/* Pitch/Werbe-Block am Ende der Ausgabe */
.letter-pitch{margin:48px auto 8px;max-width:640px;background:var(--paper-2,#F3F1EB);border:1px solid var(--line);border-top:3px solid var(--ink);border-radius:2px;padding:32px 34px;text-align:center}
.letter-pitch .prose{font-size:16px;line-height:1.7;color:var(--ink)}
.letter-pitch .prose p{margin:0 0 14px}
.letter-pitch .prose p:last-child{margin-bottom:0}
/* Freier HTML-Block (Popups/Embeds vom Autor) */
.letter-embed{margin:32px auto;max-width:640px}
.letter-embed img{max-width:100%;height:auto}

/* Gast im Reader: Topbar bleibt (Navigation), Leseleiste scrollt mit statt doppelt zu kleben */
body.is-guest #reader .reader-bar{position:static}
body.is-guest #reader .rb-brand{display:none}

@media(max-width:600px){ .row.locked .lock-tag{display:none} }

/* Marktupdate-Insights Tabelle */
.ui-block{margin:26px 0 10px}
.ui-bh{display:block;margin-bottom:10px;color:var(--ink-soft)}
.ui-tablewrap{margin-top:26px;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:12px}
.ui-table{width:100%;border-collapse:collapse;font-size:14px;min-width:680px}
.ui-table th{text-align:right;font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);
  padding:13px 14px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--paper-2)}
.ui-table th:first-child{text-align:left}
.ui-table td{padding:13px 14px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap;color:var(--ink)}
.ui-table tbody tr:last-child td{border-bottom:none}
.ui-table tbody tr:hover td{background:var(--paper-2)}
.ui-table td.num{font-variant-numeric:tabular-nums}
.ui-name{text-align:left !important;font-weight:700}
.ui-name .ui-sub{display:block;font-weight:400;font-size:12.5px;color:var(--ink-soft);max-width:220px;overflow:hidden;text-overflow:ellipsis}
.ui-slash{color:var(--faint);padding:0 3px}

/* Marktupdate Einzelanalyse */
.ui-go{color:var(--faint);font-weight:400}
.ui-back{background:none;border:none;cursor:pointer;font:inherit;padding:0;margin-bottom:14px;color:var(--ink-soft);font-size:13px;font-weight:600;letter-spacing:.04em}
.ui-back:hover{color:var(--ink)}
.dpt{display:flex;align-items:center;gap:12px;margin:8px 0}
.dpt-l{flex:0 0 72px;font-size:13px;color:var(--ink-soft)}
.dpt-bar{flex:1;height:10px;background:var(--paper-2);border-radius:6px;overflow:hidden}
.dpt-bar span{display:block;height:100%;background:var(--ink);border-radius:6px}
.dpt-v{flex:0 0 34px;text-align:right;font-size:13px;font-variant-numeric:tabular-nums;color:var(--ink)}
.uic{border:1px solid var(--line);border-radius:10px;padding:13px 15px;margin-bottom:10px;background:var(--surface,#fff)}
.uic-m{display:flex;justify-content:space-between;gap:10px;margin-bottom:6px}
.uic-who{font-weight:600;font-size:13.5px;color:var(--ink)}
.uic-d{font-size:12px;color:var(--faint)}
.uic-b{font-size:14.5px;color:var(--ink-soft);line-height:1.5}

/* Die Bezahlschranke auf dem Handy. Die Ansage wird NICHT kleingerechnet,
   damit sie in drei Zeilen passt — sie darf vier brauchen. Weg muessen nur
   die zwei gesetzten Umbrueche der breiten Spalte, sonst bricht die Zeile
   zweimal an derselben Stelle. Im Quelltext steht darum vor jedem <br> ein
   Leerzeichen: `display:none` entfernt den Umbruch ersatzlos, ohne das
   Leerzeichen klebte "gut,dass" zusammen. */
@media(max-width:600px){
  .pw-br{display:none}
  .pw-titel{margin-bottom:18px}
  .pw-login{margin-top:26px}
  .pw-schnitt{margin-top:38px}
  .pw-angebot{padding-top:36px}
  .pw-balken{margin:14px 0 22px}
  .pw-plus{margin-top:32px}
  .pw-nutzen div{padding:17px 0}
  .pw-cta{margin-top:34px;padding:19px 20px;letter-spacing:.1em}
  .preview-gate::before{top:-110px;height:110px}
  /* Unter 860px legt `#app .page` bereits 78px plus Sicherheitsbereich unter
     die Seite, damit die feste .bnav nichts zudeckt. Der eigene Fuss faellt
     darum kleiner aus, sonst stuenden zusammen fast 180px Leere. */
  .pw{padding-bottom:40px}
}

/* ============================================================
   AUSBAU · Titelbild · Bilder · Bewegung · Mein Bereich
   ============================================================ */

/* ---- Bilder: Blur-up, kein Layout-Sprung ---- */
.ph{position:relative;display:block;overflow:hidden;background-color:var(--paper-2)}
.ph::before{content:"";position:absolute;inset:0;background-image:var(--lqip);background-size:cover;background-position:center;filter:blur(20px);transform:scale(1.12);transition:opacity .5s ease}
.ph.loaded::before{opacity:0}
.ph > img{display:block;width:100%;height:auto;opacity:0;transition:opacity .5s ease}
.ph.loaded > img{opacity:1}
.chart-ph.has-img .ph{border:1px solid var(--line-2)}
/* Charts aus der Pipeline bringen eine eigene Handy-Fassung mit, nie den
   verkleinerten Desktop-Chart. Die Handy-Fassung ist inline versteckt
   (display:none), damit ein Server ohne diese Regel nie beide zeigt. */
.chart-ph .ph.ph-mobil{display:none}
@media (max-width:640px){.chart-ph .ph.ph-desktop{display:none}.chart-ph .ph.ph-mobil{display:block!important}}
.chart-ph.has-img .ph > img{border:0}

/* ---- Titelbild ---- */
.cover{margin:0 0 34px}
.cover .ph{border:1px solid var(--line-2)}
.cover figcaption{margin-top:11px;font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--ink-soft);font-family:ui-monospace,'SFMono-Regular',Menlo,monospace}
@media(max-width:720px){.cover{margin-bottom:24px}}

/* ---- Archiv als Kachelraster ---- */
.arch-meta{gap:20px;flex-wrap:wrap}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:38px 30px;border-top:2px solid var(--ink);padding-top:36px;margin-bottom:80px}
/* Steht die Segmentleiste im Schlitz darueber, ist ihre Schiene schon der
   Trennstrich. Die fette Linie des Rasters waere der zweite. Den Abstand nach
   unten gibt dann der Schlitz, damit er auf allen drei Seiten derselbe ist und
   nicht einmal vom Raster und einmal gar nicht kommt. */
.rseg-slot:not(:empty){margin-bottom:30px}
.rseg-slot:not(:empty) ~ .tiles{border-top:0;padding-top:0}
/* Mobile: eine Kachel pro Zeile. Zwei nebeneinander machen aus Research eine
   Bildergalerie, das Titelbild soll aber wirken wie auf einem Magazin. */
@media(max-width:860px){.tiles{grid-template-columns:1fr;gap:34px;padding-top:26px}}
/* Im Bestand darf das Tablet zwei tragen: drei Spalten am Schreibtisch, zwei
   dazwischen, eine auf dem Telefon. Nur hier, damit die Kachelreihen auf der
   Übersicht bleiben, wie sie sind. */
@media(min-width:601px) and (max-width:860px){
  #archive .tiles{grid-template-columns:repeat(2,1fr);gap:34px 26px}
}
.tile{cursor:pointer;position:relative}
.tile-img{position:relative;border:1px solid var(--line-2);overflow:hidden;aspect-ratio:16/9;background-color:var(--paper-2)}
.tile-img .ph{position:absolute;inset:0}
.tile-img .ph > img{width:100%;height:100%;object-fit:cover;transition:opacity .5s ease,transform .7s cubic-bezier(.22,.61,.36,1)}
.tile:hover .tile-img .ph > img{transform:scale(1.04)}
.tile-img.noimg{background-image:repeating-linear-gradient(135deg,var(--line) 0 1px,transparent 1px 9px)}
/* Eine Zeile, drei Achsen, immer dieselbe Reihenfolge: FORMAT · THEMA · ZUGANG.
   Vorher stand hier mal „9 Kapitel · Gratis", mal „Gratis lesen", mal nur die
   Gattung — drei Schreibweisen fuer dieselbe Sache. Jetzt sagt jede Karte
   dasselbe in derselben Ordnung, und die Laenge wandert nach unten zum Datum.
   Sie darf umbrechen, sonst wird sie auf dem Telefon abgeschnitten. */
.tile-meta{margin-top:14px;display:flex;align-items:center;flex-wrap:wrap;gap:0 8px;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.tile-kind{color:var(--ink)}
/* Die Gattungsklasse `gk-…` steht an jedem Format, eine Farbe hat bisher nur
   das Morning Briefing. Die naechste Gattung mit eigener Farbe braucht hier
   eine Zeile und sonst nichts. */
.tile-kind.gk-morning,
.arch-kicker.gk-morning,
.article-runhead.gk-morning .rh{color:var(--morning-violett)}
.tile-meta .sep{color:var(--line-2)}
/* Das Thema ist leiser als das Format: das Format sagt, was es ist, das Thema
   nur, wovon es handelt. */
.tile-kat{color:var(--faint)}
/* Der Zugang als kleiner Farbfleck, nicht als Knopf. Gelb heisst im Haus seit
   je gratis, das Sanctis-Blau steht fuer Member. Nie festes Weiss auf dem
   blauen Feld: im dunklen Modus waere die Schrift sonst hell auf hell. */
.tile-zg{padding:2px 6px;margin:-2px 0;letter-spacing:.14em}
.tile-zg.frei{background:var(--hl);color:var(--ink)}
.tile-zg.mem{background:var(--member-blau);color:var(--paper)}
.tile-title{margin-top:8px;font-family:var(--serif);font-size:19px;line-height:1.26;color:var(--ink);text-wrap:balance}
.tile-title a{color:inherit;text-decoration:none}
/* Hinweis unter dem Anreisser im Quelltext (inc/artikel.php). Die App
   ersetzt ihn beim Laden durch ihre eigene Schranke. */
.ssr-schranke{margin-top:48px;padding-top:22px;border-top:1px solid var(--line)}
.ssr-schranke p{font-size:17px;line-height:1.55;color:var(--ink-soft);margin-top:8px}
.ssr-schranke a{color:var(--ink)}
/* Zwei Zeilen Anreisser, mehr nicht. Der Rest steht in der Ausgabe. */
.tile-lead{margin-top:9px;font-size:14px;line-height:1.5;color:var(--ink-soft);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tile-foot{margin-top:13px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.tile-foot .tile-go{flex:none;color:var(--ink);font-size:14px;letter-spacing:0;transition:transform .18s}
.tile:hover .tile-foot .tile-go{transform:translateX(4px)}
.tile-meta .read-dot{cursor:pointer;flex:0 0 auto}
.tile.read .read-dot{background:transparent;border-color:var(--line-2)}
.tile.read .tile-title{color:var(--ink-soft)}
/* Eine Kachel pro Zeile heisst: die Kachel ist so breit wie die Seite. Dann
   darf der Titel auch so gross sein wie auf einem Magazin. */
@media(max-width:860px){
  .arch-head{padding:26px 0 22px}
  .arch-head h1{font-size:34px}
  .tile-title{font-size:22px;margin-top:9px}
  .tile-meta{margin-top:12px;font-size:10px;gap:7px}
}
.tile-bm{position:absolute;right:0;top:0;z-index:3;background:none;border:0;padding:9px 10px;color:var(--paper);cursor:pointer;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
.tile-bm.plain{color:var(--faint);filter:none}
.tile.locked .tile-img::after{content:"Für Member";position:absolute;inset:0;z-index:2;display:grid;place-items:center;background:color-mix(in srgb,var(--paper) 74%,transparent);font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}

/* ---- Dokumente im PDF-Archiv ----
   Ein Dokument ist keine Ausgabe. Das Titelbild steht darum hochkant wie das
   Blatt selbst, daneben Titel, Beschreibung und die harten Angaben. */
.dok-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(372px,1fr));gap:20px;
  border-top:2px solid var(--ink);padding-top:28px}
.dok{display:flex;gap:18px;padding:18px;background:var(--surface);border:1px solid var(--line);
  cursor:pointer;position:relative;transition:border-color .18s ease,box-shadow .18s ease}
.dok:hover{border-color:var(--line-2);box-shadow:0 2px 0 var(--line)}
/* align-self ist Pflicht: ohne das streckt die Flex-Zeile das Blatt auf
   Kartenhöhe, die aspect-ratio verliert, und das Titelbild wird seitlich
   beschnitten. */
.dok-cov{flex:none;align-self:flex-start;width:108px;aspect-ratio:210/297;overflow:hidden;
  position:relative;background:var(--paper-2);border:1px solid var(--line-2)}
.dok-cov img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.dok:hover .dok-cov img{transform:scale(1.04)}
/* Ohne Titelbild ein gestreiftes Blatt, damit die Reihe nicht auseinanderfällt. */
.dok-cov.leer{display:grid;place-items:center;
  background-image:repeating-linear-gradient(135deg,var(--line) 0 1px,transparent 1px 9px)}
.dok-cov.leer::after{content:"PDF";font-size:10px;font-weight:600;letter-spacing:.18em;color:var(--faint)}
.dok-main{flex:1;min-width:0;display:flex;flex-direction:column}
.dok-kicker{display:flex;align-items:center;gap:7px;font-size:10px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.dok-kicker .art{color:var(--ink)}
.dok-kicker .sep{color:var(--line-2)}
.dok-t{margin-top:7px;font-family:var(--serif);font-size:19px;line-height:1.26;color:var(--ink);text-wrap:balance}
/* Fünf Zeilen Beschreibung. Das ist eine Notbremse gegen Romane, nicht der
   Normalfall: zwei bis drei Sätze stehen immer ganz da. */
.dok-d{margin-top:7px;font-size:13.5px;line-height:1.52;color:var(--ink-soft);
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.dok-foot{margin-top:auto;padding-top:15px;display:flex;align-items:flex-end;
  justify-content:space-between;gap:12px;font-size:10px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.dok-go{flex:none;color:var(--ink);display:inline-flex;align-items:center;gap:6px}
.dok-go i{font-style:normal;transition:transform .18s}
.dok:hover .dok-go i{transform:translateY(2px)}
/* Die Admin-Knöpfe liegen im Kartenfuss. Sie halten den Klick selbst an,
   sonst öffnet das Bearbeiten zugleich das PDF. */
.dok-adm{display:flex;gap:14px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.dok-adm button{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);background:none;border:0;border-bottom:1px solid var(--line-2);
  padding:0 0 2px;cursor:pointer;font-family:var(--sans)}
.dok-adm button:hover{color:var(--ink)}
.dok-adm button.weg{color:var(--live-rot);border-bottom-color:color-mix(in srgb,var(--live-rot) 40%,transparent)}
@media(max-width:600px){
  .dok-grid{grid-template-columns:1fr;gap:16px;padding-top:22px}
  .dok{gap:14px;padding:14px}
  .dok-cov{width:82px}
  .dok-t{font-size:17px}
  /* Schmale Spalte, darum mehr Zeilen: sonst bricht schon eine normale
     Beschreibung von zwei Sätzen mitten im Wort ab. */
  .dok-d{-webkit-line-clamp:7}
}

/* ---- Kapitel: grosse Nummer + Reveal ---- */
.chapter{position:relative}
.ch-big{position:absolute;top:-.36em;right:-.05em;font-family:var(--serif);font-weight:500;font-size:clamp(96px,17vw,208px);line-height:.78;color:var(--ink);opacity:.055;pointer-events:none;user-select:none;z-index:0;letter-spacing:-.045em;font-variant-numeric:lining-nums}
body.theme-dark .ch-big{opacity:.09}
.chapter > *:not(.ch-big){position:relative;z-index:1}
@media(max-width:720px){.ch-big{font-size:clamp(74px,25vw,118px);top:-.3em;right:-.01em;opacity:.07}}
.reveal{opacity:0;transform:translateY(15px);transition:opacity .65s cubic-bezier(.22,.61,.36,1),transform .65s cubic-bezier(.22,.61,.36,1)}
.reveal.in{opacity:1;transform:none}
.reveal .ch-big{transform:translateY(12px);transition:transform .9s cubic-bezier(.22,.61,.36,1)}
.reveal.in .ch-big{transform:none}

/* ---- Segmentierter Lesebalken ---- */
.reading-progress{position:fixed;top:0;left:0;right:0;width:auto;height:3px;background:none;z-index:50;display:flex;gap:2px;transition:none}
.reading-progress .rp-seg{flex:1 1 0;height:100%;background:color-mix(in srgb,var(--ink) 13%,transparent);overflow:hidden}
.reading-progress .rp-seg > i{display:block;height:100%;width:0;background:var(--ink);transition:width .14s linear}

/* ---- Skeletons mit Papierschimmer ---- */
.sk{position:relative;overflow:hidden;background:color-mix(in srgb,var(--ink) 7%,transparent)}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--surface) 80%,transparent),transparent);animation:sheen 1.6s infinite}
@keyframes sheen{100%{transform:translateX(100%)}}
.sk-list{border-top:2px solid var(--ink)}
.sk-row{display:grid;grid-template-columns:78px 132px 1fr;gap:22px;align-items:center;padding:26px 6px;border-bottom:1px solid var(--line)}
@media(max-width:860px){.sk-row{grid-template-columns:1fr;gap:10px}.sk-row .sk:nth-child(2){display:none}}
.sk-l{height:11px}
.sk-l.w40{width:40%}.sk-l.w70{width:70%}.sk-l.w90{width:90%}

/* ---- Themewechsel überblenden (Fallback ohne View Transitions) ---- */
.theme-veil{position:fixed;inset:0;z-index:2000;background:var(--paper);opacity:0;pointer-events:none;transition:opacity .2s ease}
.theme-veil.on{opacity:1}

/* ---- Fokus-Modus als Bewegung ---- */
.reader-bar{max-height:220px;transition:max-height .44s cubic-bezier(.22,.61,.36,1),transform .44s cubic-bezier(.22,.61,.36,1),opacity .26s ease}
body.focus-mode .reader-bar{display:block!important;max-height:0;overflow:hidden;transform:translateY(-22px);opacity:0;pointer-events:none;border-bottom-color:transparent}
#reader .article{transition:max-width .52s cubic-bezier(.22,.61,.36,1)}
#reader::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:#c9a227;mix-blend-mode:multiply;opacity:0;transition:opacity .55s ease}
body.focus-mode #reader::before{opacity:.04}
body.theme-dark.focus-mode #reader::before{opacity:0}
.focus-exit{opacity:0;transform:translateY(-8px);transition:opacity .3s ease,transform .3s cubic-bezier(.22,.61,.36,1)}
.focus-exit.show{opacity:.62;transform:none}
.focus-exit.show:hover{opacity:1}

/* ---- Callout-Boxen im Hausstil ---- */
.cx{margin:36px 0;padding:1px 0 1px 22px;border-left:3px solid var(--ink)}
.cx .cx-k{display:block;margin-bottom:9px;font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft)}
.cx .cx-b{font-family:var(--serif);font-size:calc(18.5px * var(--read-scale,1));line-height:1.5;color:var(--ink)}
.cx .cx-sub{margin-top:9px;font-family:var(--sans);font-size:calc(13.5px * var(--read-scale,1));line-height:1.5;color:var(--ink-soft)}
.cx.cx-achtung{border-left-color:var(--red)}
.cx.cx-achtung .cx-k{color:var(--red)}
.cx.cx-zahl{border-left-color:var(--gold)}
.cx.cx-zahl .cx-k{color:var(--gold)}
.cx.cx-zahl .cx-b{font-size:calc(31px * var(--read-scale,1));font-weight:500;line-height:1.12;letter-spacing:-.015em;font-variant-numeric:tabular-nums slashed-zero}
@media(max-width:600px){.cx{padding-left:16px;margin:28px 0}}

/* ---- Mein Bereich ---- */
.area-top{display:grid;grid-template-columns:auto 1fr;gap:44px;align-items:center;border-top:2px solid var(--ink);border-bottom:1px solid var(--line);padding:36px 0;margin-top:42px}
@media(max-width:720px){.area-top{grid-template-columns:1fr;gap:26px;padding:28px 0}}
.ring{position:relative;width:134px;height:134px}
.ring svg{display:block;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:7}
.ring .rg-bg{stroke:var(--line)}
.ring .rg-fg{stroke:var(--ink);transition:stroke-dashoffset 1.2s cubic-bezier(.22,.61,.36,1)}
.ring .rg-txt{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.ring .rg-num{font-family:var(--serif);font-size:33px;line-height:1;font-variant-numeric:tabular-nums}
.ring .rg-lab{margin-top:7px;font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.area-say{font-family:var(--serif);font-size:clamp(21px,2.7vw,31px);line-height:1.28;text-wrap:balance}
.area-say em{font-style:normal;color:var(--faint)}
.area-chips{margin-top:20px;display:flex;flex-wrap:wrap;gap:9px}
.area-chips span{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);border:1px solid var(--line-2);padding:6px 11px}
.streak{display:flex;gap:5px;flex-wrap:wrap;margin-top:22px}
.streak i{width:24px;height:32px;border:1px solid var(--line-2);display:block;transition:background .35s ease,border-color .35s ease}
.streak i.on{background:var(--ink);border-color:var(--ink)}
.streak i.cur{border-width:2px;border-color:var(--ink)}
.streak-note{margin-top:14px;font-size:12.5px;color:var(--ink-soft)}
.coll{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:16px;margin-top:24px}
.coll .cc{position:relative;display:block;aspect-ratio:16/9;border:1px solid var(--line-2);overflow:hidden;background-color:var(--paper-2);background-image:repeating-linear-gradient(135deg,var(--line) 0 1px,transparent 1px 9px);cursor:pointer}
.coll .cc .ph{position:absolute;inset:0}
.coll .cc .ph > img{width:100%;height:100%;object-fit:cover}
.coll .cmask{position:absolute;inset:0;z-index:2;background:color-mix(in srgb,var(--paper) 62%,transparent);transition:opacity .35s ease}
.coll .cc.read .cmask{opacity:0}
.coll .cnum{position:absolute;left:7px;top:6px;z-index:3;font-family:var(--serif);font-size:12.5px;color:var(--ink);background:var(--paper);padding:1px 6px}
.coll .cc.read .cnum{background:var(--ink);color:var(--paper)}
.coll .ctitle{position:absolute;left:7px;right:7px;bottom:7px;z-index:3;font-size:10.5px;line-height:1.32;font-weight:600;color:var(--ink);background:color-mix(in srgb,var(--paper) 88%,transparent);padding:5px 6px}
.hl-cloud{columns:2;column-gap:26px;margin-top:6px}
@media(max-width:720px){.hl-cloud{columns:1}}
.hl-cloud blockquote{break-inside:avoid;margin:0 0 20px;padding-left:14px;border-left:3px solid var(--hl);font-family:var(--serif);font-size:15.5px;line-height:1.5;color:var(--ink);cursor:pointer;transition:border-color .2s ease}
.hl-cloud blockquote.c-green{border-left-color:var(--hl-green)}
.hl-cloud blockquote.c-red{border-left-color:var(--hl-red)}
.hl-cloud blockquote:hover{border-left-color:var(--ink)}
.hl-cloud blockquote cite{display:block;margin-top:7px;font-family:var(--sans);font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.area-empty{font-size:13.5px;color:var(--faint);padding:10px 0}
@media(max-width:600px){
  .area-top{grid-template-columns:1fr;gap:26px;justify-items:start}
  .hl-cloud{columns:1}
  .coll{grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:12px}
  .cf-cover{grid-template-columns:1fr}
}

/* ---- Composer: Titelbild ---- */
.cf-cover{display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:start;margin:6px 0 4px}
@media(max-width:600px){.cf-cover{grid-template-columns:1fr}}
.cf-coverprev{aspect-ratio:16/9;border:1px solid var(--line-2);background-color:var(--paper-2);background-image:repeating-linear-gradient(135deg,var(--line) 0 1px,transparent 1px 9px);overflow:hidden}
.cf-coverprev img{width:100%;height:100%;object-fit:contain;display:block}
.cf-coverfields{display:grid;gap:10px}

/* ---- Übergänge zwischen Seiten ---- */
@media (prefers-reduced-motion: no-preference){
  ::view-transition-group(*){animation-duration:.44s;animation-timing-function:cubic-bezier(.22,.61,.36,1)}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.22s}
  /* Der Titel wandert aus der Archivzeile in die Überschrift.
     Ein verstecktes #reader wird nicht gerendert, deshalb kollidiert der Name nie. */
  #reader .article-title{view-transition-name:issue-title}
  ::view-transition-old(issue-title),::view-transition-new(issue-title){animation-duration:.44s}
}

/* ---- Wer weniger Bewegung will, bekommt weniger ---- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important}
  .ph > img{opacity:1!important}
  .ph::before{opacity:0!important}
  .sk::after{display:none}
}

/* =======================================================================
   VISUELLER EDITOR (Umbau)
   Zwei Teile, bewusst getrennt:
   A) Auszeichnungen (hl-, ul-, bx-, fx-). Reines CSS, gilt AUCH im Leser.
      Diese Klassen stehen im gespeicherten Text und muessen darum spaeter
      genauso in index.php landen, sonst sieht der Leser nichts davon.
   B) Editor-Oberflaeche (vx-). Existiert nur in der Redaktion.
   ======================================================================= */

/* ---------- A1 Marker ---------- */
/* Alle Marker liegen HINTER dem Text und lassen die Schrift in Ruhe.
   --hl ist die Farbe, jede Auszeichnung kann sie per style ueberschreiben. */
.hl{--hl:#ffe08a;--hl2:#ffc7d9;padding:0 .08em;
  background-image:linear-gradient(var(--hl),var(--hl));
  background-repeat:no-repeat;background-position:0 55%;background-size:100% 52%}
.hl-flat  {background-position:0 0;background-size:100% 100%;padding:.08em .18em}
.hl-thin  {background-size:100% 28%;background-position:0 72%}
.hl-wide  {background-size:100% 78%;background-position:0 32%}
.hl-half  {background-size:100% 46%;background-position:0 100%}
.hl-round {background-size:100% 62%;background-position:0 45%;border-radius:.6em;padding:.06em .34em}
.hl-diag  {background-image:repeating-linear-gradient(115deg,var(--hl) 0 6px,transparent 6px 11px);background-size:100% 62%;background-position:0 45%}
.hl-double{background-image:linear-gradient(var(--hl),var(--hl)),linear-gradient(var(--hl2),var(--hl2));
  background-size:100% 34%,100% 22%;background-position:0 42%,0 92%}
.hl-grad  {background-image:linear-gradient(90deg,var(--hl),var(--hl2));background-size:100% 58%;background-position:0 48%}
.hl-soft  {background-image:linear-gradient(var(--hl),var(--hl));background-size:100% 62%;background-position:0 45%;opacity:.99;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
/* Handgezeichnet und Pinsel: die weiche Kante kommt aus einer Maske,
   dadurch bleibt die Farbe frei waehlbar. Ein Bild waere fest verdrahtet. */
.hl-hand{background-size:100% 66%;background-position:0 42%;
  -webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M3 22 C 30 12, 62 30, 96 20 C 130 10, 162 28, 197 17 L 197 34 C 160 42, 128 26, 95 35 C 60 44, 30 27, 3 36 Z' fill='%23000'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M3 22 C 30 12, 62 30, 96 20 C 130 10, 162 28, 197 17 L 197 34 C 160 42, 128 26, 95 35 C 60 44, 30 27, 3 36 Z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.hl-brush{background-size:100% 82%;background-position:0 26%;
  -webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 44' preserveAspectRatio='none'%3E%3Cpath d='M2 14 C 26 4, 44 18, 70 11 C 100 3, 126 19, 152 10 C 172 4, 188 14, 198 8 L 198 33 C 184 40, 168 31, 148 36 C 120 43, 96 30, 68 37 C 42 43, 22 32, 2 38 Z' fill='%23000'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 44' preserveAspectRatio='none'%3E%3Cpath d='M2 14 C 26 4, 44 18, 70 11 C 100 3, 126 19, 152 10 C 172 4, 188 14, 198 8 L 198 33 C 184 40, 168 31, 148 36 C 120 43, 96 30, 68 37 C 42 43, 22 32, 2 38 Z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.hl-rough{background-size:100% 70%;background-position:0 38%;
  -webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M1 10 L 18 6 L 36 12 L 54 5 L 72 11 L 90 6 L 110 12 L 128 5 L 148 11 L 168 6 L 186 12 L 199 7 L 199 33 L 182 37 L 164 31 L 144 36 L 126 30 L 106 36 L 86 31 L 66 37 L 46 31 L 28 36 L 12 31 L 1 35 Z' fill='%23000'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M1 10 L 18 6 L 36 12 L 54 5 L 72 11 L 90 6 L 110 12 L 128 5 L 148 11 L 168 6 L 186 12 L 199 7 L 199 33 L 182 37 L 164 31 L 144 36 L 126 30 L 106 36 L 86 31 L 66 37 L 46 31 L 28 36 L 12 31 L 1 35 Z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
/* Marker, der beim Scrollen aufzieht */
.hl-scroll{background-size:0 62%;background-position:0 45%;transition:background-size .8s cubic-bezier(.22,1,.36,1)}
.hl-scroll.seen{background-size:100% 62%}

/* ---------- A2 Unterstreichungen ---------- */
.ul{--hl:#1A1A17;text-decoration:none;
  background-image:linear-gradient(var(--hl),var(--hl));
  background-repeat:no-repeat;background-position:0 100%;background-size:100% 1px;
  padding-bottom:.12em}
.ul-thick {background-size:100% 3px}
.ul-double{background-image:linear-gradient(var(--hl),var(--hl)),linear-gradient(var(--hl),var(--hl));
  background-size:100% 1px,100% 1px;background-position:0 100%,0 calc(100% - 4px)}
.ul-dash{background-image:repeating-linear-gradient(90deg,var(--hl) 0 7px,transparent 7px 12px);background-size:100% 2px}
.ul-dot {background-image:repeating-linear-gradient(90deg,var(--hl) 0 2px,transparent 2px 6px);background-size:100% 2px}
.ul-grad{background-image:linear-gradient(90deg,var(--hl),transparent);background-size:100% 3px}
.ul-wave{background-image:none;text-decoration:underline;text-decoration-style:wavy;
  text-decoration-color:var(--hl);text-decoration-thickness:1.5px;text-underline-offset:.22em}
.ul-hand{background-image:none;padding-bottom:.2em;position:relative}
.ul-hand::after{content:'';position:absolute;left:0;right:0;bottom:0;height:.36em;
  background:var(--hl);
  -webkit-mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 40 3, 70 10, 104 6 C 140 2, 168 9, 198 4' stroke='%23000' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 0/100% 100%;
  mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 40 3, 70 10, 104 6 C 140 2, 168 9, 198 4' stroke='%23000' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 0/100% 100%}
.ul-brush{background-image:none;padding-bottom:.24em;position:relative}
.ul-brush::after{content:'';position:absolute;left:0;right:0;bottom:0;height:.44em;
  background:var(--hl);
  -webkit-mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9 C 34 2, 56 12, 88 7 C 118 2, 142 12, 170 6 C 182 3, 192 8, 198 5 L 198 11 C 188 14, 176 10, 164 12 C 136 17, 112 8, 84 13 C 54 18, 32 9, 3 13 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat 0 0/100% 100%;
  mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9 C 34 2, 56 12, 88 7 C 118 2, 142 12, 170 6 C 182 3, 192 8, 198 5 L 198 11 C 188 14, 176 10, 164 12 C 136 17, 112 8, 84 13 C 54 18, 32 9, 3 13 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat 0 0/100% 100%}
/* zeichnet sich beim Erscheinen */
.ul-draw{background-size:0 2px;transition:background-size .7s cubic-bezier(.22,1,.36,1)}
.ul-draw.seen{background-size:100% 2px}

/* ---------- A3 Umrandungen ---------- */
.bx{--hl:#1A1A17;padding:.1em .42em;border-radius:2px}
.bx-thin  {box-shadow:inset 0 0 0 1px var(--hl)}
.bx-round {box-shadow:inset 0 0 0 1px var(--hl);border-radius:.5em}
.bx-pill  {box-shadow:inset 0 0 0 1px var(--hl);border-radius:999px;padding:.12em .7em}
.bx-dash  {outline:1px dashed var(--hl);outline-offset:2px}
.bx-label {background:var(--hl);color:var(--paper);border-radius:3px;padding:.14em .5em;
  font-size:.86em;letter-spacing:.04em}
.bx-sticker{background:var(--hl);color:var(--paper);border-radius:.55em;padding:.16em .62em;
  box-shadow:0 2px 0 rgba(0,0,0,.16);display:inline-block;transform:rotate(-1.4deg)}
/* handgezeichneter Kreis, echte Ellipse per SVG */
.bx-circle{padding:.18em .62em;position:relative}
.bx-circle::before{content:'';position:absolute;inset:-.12em -.1em;pointer-events:none;
  background:var(--hl);
  -webkit-mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M104 5 C 40 3, 6 18, 8 32 C 10 48, 60 57, 112 55 C 168 53, 194 42, 192 28 C 190 14, 152 5, 96 6' stroke='%23000' stroke-width='2.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 0/100% 100%;
  mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M104 5 C 40 3, 6 18, 8 32 C 10 48, 60 57, 112 55 C 168 53, 194 42, 192 28 C 190 14, 152 5, 96 6' stroke='%23000' stroke-width='2.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 0/100% 100%}
/* eckige Klammern links und rechts */
.bx-bracket{padding:.06em .5em;position:relative}
.bx-bracket::before,.bx-bracket::after{position:absolute;top:-.06em;color:var(--hl);font-weight:400}
.bx-bracket::before{content:'[';left:0}
.bx-bracket::after{content:']';right:0}
/* nur die vier Ecken */
.bx-corner{padding:.16em .42em;position:relative}
.bx-corner::before,.bx-corner::after{content:'';position:absolute;width:.5em;height:.5em;pointer-events:none}
.bx-corner::before{left:0;top:0;border-left:1.5px solid var(--hl);border-top:1.5px solid var(--hl)}
.bx-corner::after{right:0;bottom:0;border-right:1.5px solid var(--hl);border-bottom:1.5px solid var(--hl)}

/* ---------- A4 Text-Effekte ---------- */
.fx{--hl:#1A1A17;--hl2:#c9a227}
.fx-glow   {text-shadow:0 0 .45em var(--hl)}
.fx-neon   {color:var(--hl);text-shadow:0 0 .12em var(--hl),0 0 .5em var(--hl),0 0 1.1em var(--hl)}
.fx-shadow {text-shadow:2px 2px 0 var(--hl)}
.fx-offset {text-shadow:3px 3px 0 var(--hl2)}
.fx-double {text-shadow:1px 0 0 var(--hl),-1px 0 0 var(--hl2)}
.fx-blur   {filter:blur(2.4px)}
.fx-outline{color:transparent;-webkit-text-stroke:1px var(--hl);paint-order:stroke fill}
.fx-grad   {background-image:linear-gradient(90deg,var(--hl),var(--hl2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.fx-fade   {opacity:.42}
.fx-caps   {text-transform:uppercase;letter-spacing:.1em;font-size:.9em}
.fx-mono   {font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}
/* Farbe erscheint erst beim Darueberfahren */
.fx-hover{transition:color .25s,background-size .35s}
.fx-hover:hover{color:var(--hl)}
/* Unterstreichung zeichnet sich beim Darueberfahren */
.fx-hoverline{background-image:linear-gradient(var(--hl),var(--hl));background-repeat:no-repeat;
  background-position:0 100%;background-size:0 2px;transition:background-size .35s cubic-bezier(.22,1,.36,1)}
.fx-hoverline:hover{background-size:100% 2px}

/* ---------- B Editor-Oberflaeche ---------- */
/* Modus-Umschalter oben in der Redaktion */
.vx-modes{display:flex;gap:0;margin:0 0 22px;border:1px solid var(--line);border-radius:2px;overflow:hidden;width:max-content}
.vx-mode{appearance:none;border:0;background:transparent;cursor:pointer;
  font:inherit;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);padding:11px 20px;transition:background .18s,color .18s}
.vx-mode + .vx-mode{border-left:1px solid var(--line)}
.vx-mode.on{background:var(--ink);color:var(--paper)}

/* Buehne: links Canvas, rechts Inspector */
.vx-stage{display:none;gap:0}
.vx-stage.on{display:block}
.vx-top{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:10px 0 12px;margin-bottom:18px;border-bottom:1px solid var(--line);background:var(--paper)}
.vx-top .sp{flex:1}
.vx-btn{appearance:none;border:1px solid var(--line-2);background:var(--paper);color:var(--ink);
  cursor:pointer;font:inherit;font-size:12px;padding:7px 13px;border-radius:2px;
  display:inline-flex;align-items:center;gap:7px;transition:border-color .18s,background .18s}
.vx-btn:hover{border-color:var(--ink)}
.vx-btn.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.vx-btn[disabled]{opacity:.35;cursor:default}
.vx-btn.ghost{border-color:transparent}
.vx-seg{display:inline-flex;border:1px solid var(--line-2);border-radius:2px;overflow:hidden}
.vx-seg .vx-btn{border:0;border-radius:0;padding:7px 11px}
.vx-seg .vx-btn + .vx-btn{border-left:1px solid var(--line)}

/* Canvas selbst: eine echte Leseflaeche, kein Formular */
.vx-canvas-wrap{background:var(--paper-2);padding:26px 0 60px;border-radius:2px;
  display:flex;justify-content:center}
.vx-canvas{background:var(--paper);width:100%;max-width:760px;padding:44px 46px 60px;
  box-shadow:0 1px 3px rgba(0,0,0,.06),0 12px 40px rgba(0,0,0,.05);
  transition:max-width .3s cubic-bezier(.22,1,.36,1)}
.vx-canvas-wrap[data-w="tablet"] .vx-canvas{max-width:600px}
.vx-canvas-wrap[data-w="mobil"]  .vx-canvas{max-width:376px;padding:26px 20px 40px}
@media(max-width:900px){.vx-canvas{padding:24px 18px 40px}}

/* Bloecke im Canvas */
.vx-b{position:relative;transition:box-shadow .15s}
.vx-b > .vx-h{position:absolute;left:-34px;top:2px;width:26px;display:flex;flex-direction:column;
  gap:3px;opacity:0;transition:opacity .15s;pointer-events:none}
.vx-b:hover > .vx-h,.vx-b.sel > .vx-h{opacity:1;pointer-events:auto}
.vx-h button{appearance:none;border:1px solid var(--line);background:var(--paper);color:var(--ink-soft);
  width:26px;height:22px;border-radius:2px;cursor:pointer;font-size:12px;line-height:1;padding:0;
  display:flex;align-items:center;justify-content:center}
.vx-h button:hover{border-color:var(--ink);color:var(--ink)}
.vx-h .drag{cursor:grab}
.vx-b.sel{box-shadow:0 0 0 1.5px var(--ink)}
.vx-b.drop-before{box-shadow:0 -2px 0 var(--gold)}
.vx-b.drop-after {box-shadow:0 2px 0 var(--gold)}
.vx-b.dragging{opacity:.4}
@media(max-width:900px){.vx-b > .vx-h{left:auto;right:0;top:-24px;flex-direction:row}}

/* editierbare Felder */
[data-vx-edit]{outline:none;border-radius:2px;transition:box-shadow .15s}
[data-vx-edit]:hover{box-shadow:0 0 0 1px var(--line-2)}
[data-vx-edit]:focus{box-shadow:0 0 0 1.5px var(--ink)}
[data-vx-edit]:empty::before{content:attr(data-ph);color:var(--faint);pointer-events:none}

/* Einfuege-Knopf zwischen den Bloecken */
.vx-plus{height:16px;position:relative;display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .15s}
.vx-plus:hover,.vx-plus.on{opacity:1}
.vx-plus::before{content:'';position:absolute;left:0;right:0;height:1px;background:var(--line-2)}
.vx-plus button{position:relative;appearance:none;border:1px solid var(--line-2);background:var(--paper);
  color:var(--ink);width:22px;height:22px;border-radius:999px;cursor:pointer;font-size:14px;line-height:1;
  display:flex;align-items:center;justify-content:center}
.vx-plus button:hover{border-color:var(--ink)}

/* schwebende Textleiste */
.vx-bar{position:fixed;z-index:9000;display:none;align-items:center;gap:2px;
  background:var(--ink);color:var(--paper);border-radius:3px;padding:4px;
  box-shadow:0 6px 26px rgba(0,0,0,.28)}
.vx-bar.on{display:flex}
.vx-bar button{appearance:none;border:0;background:transparent;color:var(--paper);cursor:pointer;
  font:inherit;font-size:13px;min-width:28px;height:28px;padding:0 7px;border-radius:2px;
  display:flex;align-items:center;justify-content:center;opacity:.82}
.vx-bar button:hover{background:rgba(255,255,255,.14);opacity:1}
.vx-bar button.on{background:rgba(255,255,255,.24);opacity:1}
.vx-bar .sep{width:1px;height:18px;background:rgba(255,255,255,.22);margin:0 3px}
.vx-bar .b{font-weight:700}.vx-bar .i{font-style:italic}
.vx-bar .u{text-decoration:underline}.vx-bar .s{text-decoration:line-through}

/* Galerie-Klappe unter der Leiste */
.vx-pop{position:fixed;z-index:9001;display:none;background:var(--paper);border:1px solid var(--line-2);
  border-radius:3px;box-shadow:0 12px 44px rgba(0,0,0,.18);padding:12px;width:326px;
  max-height:62vh;overflow:auto}
.vx-pop.on{display:block}
.vx-pop h4{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 8px}
.vx-pop h4 + .vx-gal{margin-bottom:14px}
.vx-gal{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.vx-gal button{appearance:none;border:1px solid var(--line);background:var(--paper);cursor:pointer;
  padding:13px 6px;border-radius:2px;font:inherit;font-size:12.5px;color:var(--ink);
  text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.vx-gal button:hover{border-color:var(--ink)}
.vx-gal button.on{border-color:var(--ink);background:var(--paper-2)}
.vx-swatches{display:flex;flex-wrap:wrap;gap:6px}
.vx-sw{width:24px;height:24px;border-radius:999px;border:1px solid rgba(0,0,0,.14);cursor:pointer;padding:0}
.vx-sw.on{box-shadow:0 0 0 2px var(--ink)}
.vx-pop .row{display:flex;align-items:center;gap:8px;margin-top:10px}
.vx-pop input[type=text],.vx-pop input[type=url]{flex:1;border:1px solid var(--line-2);border-radius:2px;
  background:var(--paper);color:var(--ink);font:inherit;font-size:13px;padding:7px 9px}
.vx-pop input[type=color]{width:34px;height:30px;border:1px solid var(--line-2);border-radius:2px;
  background:var(--paper);padding:2px;cursor:pointer}

/* Design-Inspector */
.vx-insp{position:fixed;top:0;right:0;bottom:0;width:302px;z-index:60;background:var(--paper);
  border-left:1px solid var(--line);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .3s cubic-bezier(.22,1,.36,1)}
.vx-insp.on{transform:none}
.vx-insp-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.vx-insp-head .label{flex:1;font-size:10px}
.vx-insp-body{flex:1;overflow:auto;padding:4px 16px 40px}
.vx-grp{border-bottom:1px solid var(--line);padding:12px 0}
.vx-grp > summary{cursor:pointer;list-style:none;font-size:10px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft);display:flex;align-items:center;justify-content:space-between}
.vx-grp > summary::-webkit-details-marker{display:none}
.vx-grp > summary::after{content:'+';font-size:13px;color:var(--faint)}
.vx-grp[open] > summary::after{content:'–'}
.vx-grp .in{padding-top:12px;display:flex;flex-direction:column;gap:11px}
.vx-f{display:grid;grid-template-columns:88px 1fr;align-items:center;gap:9px}
.vx-f > span{font-size:11.5px;color:var(--ink-soft)}
.vx-f input[type=text],.vx-f input[type=number],.vx-f select{width:100%;border:1px solid var(--line-2);
  border-radius:2px;background:var(--paper);color:var(--ink);font:inherit;font-size:12.5px;padding:6px 8px}
.vx-f input[type=range]{width:100%}
.vx-f input[type=color]{width:100%;height:28px;border:1px solid var(--line-2);border-radius:2px;
  background:var(--paper);padding:2px;cursor:pointer}
.vx-f .two{display:flex;gap:6px}
.vx-quad{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.vx-quad input{width:100%;border:1px solid var(--line-2);border-radius:2px;background:var(--paper);
  color:var(--ink);font:inherit;font-size:12px;padding:6px 4px;text-align:center}
.vx-quad .lb{grid-column:1/-1;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.vx-empty{padding:30px 4px;color:var(--ink-soft);font-size:13px;line-height:1.6}

/* Ebenen / Navigator */
.vx-tree{font-size:12.5px}
.vx-tree button{display:block;width:100%;text-align:left;appearance:none;border:0;background:transparent;
  color:var(--ink-soft);cursor:pointer;font:inherit;font-size:12.5px;padding:5px 7px;border-radius:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vx-tree button:hover{background:var(--paper-2);color:var(--ink)}
.vx-tree button.on{background:var(--ink);color:var(--paper)}
.vx-tree .lvl2{padding-left:18px}

/* Der Inspector schiebt die Seite nicht, er legt sich darueber.
   Damit der Canvas nicht verdeckt wird, bekommt die Seite rechts Platz. */
#compose.vx-inspopen .wrap{padding-right:302px}
@media(max-width:720px){
  .vx-insp{width:100%}
  #compose.vx-inspopen .wrap{padding-right:0}
}

/* ============================================================
   EDITORIAL STUDIO
   Zwei Ebenen: die Übersicht (#editorial) als ruhige Liste mit drei
   Reitern, und der Editor (#compose) mit Blöcken links, Text in der
   Mitte und Veröffentlichung rechts. Keine Kennzahlen, keine Karten,
   feine Linien. Free trägt Gelb, Member elektrisches Blau.
   ============================================================ */
.ed-wrap{max-width:1160px;padding-bottom:90px}
.ed-kopf{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:4px 0 26px}
.ed-kopf .mb-zurueck{margin-top:26px}
.ed-h1{font-family:var(--serif);font-weight:500;font-size:clamp(34px,4.2vw,46px);line-height:1.02;letter-spacing:-.016em;margin-top:14px}
.ed-unter{margin-top:8px;font-size:13px;color:var(--faint);letter-spacing:.02em}
.ed-neu{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--paper);
  font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:13px 20px;
  transition:opacity .16s;flex:none}
.ed-neu:hover{opacity:.86}
.ed-kopf-akt{display:flex;align-items:center;gap:10px}
.ed-seo-link{color:inherit;text-decoration:none;border-bottom:1px solid var(--line-2)}
.ed-seo-link:hover{color:var(--ink)}
.ed-neu.ed-thema-btn{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.ed-neu.ed-thema-btn:hover{opacity:1;background:var(--paper-2)}
.ed-plus{font-size:17px;line-height:1;letter-spacing:0;font-weight:400}

.ed-reiter{display:flex;gap:30px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.ed-reiter::-webkit-scrollbar{display:none}
.ed-reiter button{position:relative;padding:12px 0 13px;font-size:11.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);white-space:nowrap;transition:color .16s}
.ed-reiter button:hover{color:var(--ink-soft)}
.ed-reiter button.on{color:var(--ink)}
.ed-reiter button.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink)}
.ed-z{margin-left:8px;font-weight:500;letter-spacing:.02em;color:var(--faint);font-variant-numeric:tabular-nums}
.ed-z:empty{display:none}

.ed-werkzeug{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.ed-suche{flex:1;display:flex;align-items:center;gap:10px;color:var(--faint);min-width:0}
.ed-suche input{flex:1;min-width:0;border:0;background:transparent;font-size:14.5px;color:var(--ink);padding:6px 0;outline:none}
.ed-suche input::placeholder{color:var(--faint)}
.ed-suche input::-webkit-search-cancel-button{opacity:.5}
.ed-filter{display:flex;gap:8px;flex:none}
.ed-filter select{appearance:none;-webkit-appearance:none;border:1px solid var(--line);background:transparent;
  color:var(--ink-soft);font:inherit;font-size:12.5px;padding:7px 26px 7px 11px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 13px) 50%,calc(100% - 9px) 50%;background-size:4px 4px;background-repeat:no-repeat}
.ed-filter select:hover{border-color:var(--line-2)}
.ed-filter select.an{border-color:var(--ink);color:var(--ink)}

.ed-liste{transition:opacity .2s}
.ed-liste.ed-dimm{opacity:.45;pointer-events:none}
.ed-row{display:grid;grid-template-columns:72px minmax(0,1fr) 210px 120px;gap:20px;align-items:center;
  padding:15px 6px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .14s;position:relative}
.ed-row:hover,.ed-row:focus-visible{background:color-mix(in srgb,var(--paper-2) 70%,transparent);outline:none}
.ed-row.ist-sk{cursor:default}
.ed-row.ist-sk:hover{background:transparent}
.ed-row.ist-job{cursor:default}
.ed-row.ist-job .ed-titel{color:var(--ink-soft)}
.ed-row.ist-neu{animation:edNeu 2.4s ease}
@keyframes edNeu{0%,40%{background:color-mix(in srgb,var(--member-blau) 8%,transparent)}100%{background:transparent}}
.ed-thumb{width:72px;aspect-ratio:16/10;background:var(--paper-2);overflow:hidden;border:1px solid var(--line)}
.ed-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ed-thumb.leer{background-image:repeating-linear-gradient(135deg,var(--line) 0 1px,transparent 1px 8px)}
.ed-thumb.sk{border:0}
.ed-haupt{min-width:0}
.ed-row .ed-titel{font-family:var(--serif);font-size:18.5px;line-height:1.25;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ed-meta{margin-top:5px;font-size:12px;color:var(--ink-soft);display:flex;align-items:center;flex-wrap:wrap;gap:0 7px}
.ed-dot{color:var(--line-2)}
.ed-acc{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.ed-acc::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.ed-acc.frei{color:var(--mu-gelb)}
.ed-acc.member{color:var(--member-blau)}
.ed-thema{color:var(--faint)}
.ed-wann{display:flex;flex-direction:column;align-items:flex-start;gap:5px;font-size:12.5px;color:var(--ink-soft);min-width:0}
.ed-zeit{font-variant-numeric:tabular-nums}
.ed-k{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.ed-termin{font-size:14px;color:var(--ink);font-variant-numeric:tabular-nums}
.ed-zst{font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);display:inline-flex;align-items:center;gap:6px}
.ed-zst.ed-live{color:var(--green)}
.ed-zst.ed-live::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.ed-pipe.ton-laeuft{color:var(--ink-soft)}
.ed-pipe.ton-laeuft::before{content:"";width:6px;height:6px;border-radius:50%;border:1.5px solid currentColor;border-right-color:transparent;animation:edDreh 1s linear infinite}
@keyframes edDreh{to{transform:rotate(360deg)}}
.ed-pipe.ton-bereit{color:var(--member-blau)}
.ed-pipe.ton-bereit::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.ed-pipe.ton-du{color:var(--mu-gelb)}
.ed-pipe.ton-rot{color:var(--red)}
.ed-akt{display:flex;align-items:center;justify-content:flex-end;gap:10px}
.ed-go{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);opacity:0;transition:opacity .14s;white-space:nowrap}
.ed-row:hover .ed-go,.ed-row:focus-visible .ed-go{opacity:1}
.ed-mehr-btn{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;letter-spacing:1px;color:var(--faint);transition:color .14s,background .14s}
.ed-mehr-btn:hover,.ed-mehr-btn[aria-expanded="true"]{color:var(--ink);background:var(--paper-2)}
.ed-leer{padding:70px 6px;text-align:center;color:var(--ink-soft)}
.ed-leer p{font-family:var(--serif);font-size:21px;color:var(--ink-soft);margin-bottom:18px}
.ed-mehr{padding:22px 0;text-align:center}
.ed-mehr button{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);border-bottom:1px solid var(--line-2);padding-bottom:2px}
.ed-erfolg{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin:16px 0 4px;padding:13px 16px;border-left:2px solid var(--green);background:color-mix(in srgb,var(--green) 7%,transparent);font-size:14px}
.ed-erfolg[hidden]{display:none}
.ed-erfolg-t b{font-weight:600}
.ed-erfolg-akt{display:flex;align-items:center;gap:18px;font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.ed-erfolg-akt a,.ed-erfolg-akt button{color:var(--ink);border-bottom:1px solid var(--line-2);padding-bottom:1px}
.ed-erfolg-akt .ed-erfolg-zu{border:0;font-size:20px;line-height:1;color:var(--faint);letter-spacing:0}
.ed-extra{margin-top:60px;border-top:1px solid var(--line);padding-top:14px}
.ed-extra > summary{cursor:pointer;list-style:none;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.ed-extra > summary::-webkit-details-marker{display:none}
.ed-extra > summary:hover{color:var(--ink-soft)}

/* Menü (•••, Neuer Beitrag) */
.ed-pop{position:fixed;inset:0;z-index:300}
.ed-pop[hidden]{display:none}
.ed-pop-in{position:fixed;min-width:220px;background:var(--surface);border:1px solid var(--line-2);
  box-shadow:0 14px 40px rgba(0,0,0,.12);padding:6px 0;animation:edPopRein .14s ease both}
@keyframes edPopRein{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.ed-pop-in button{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;text-align:left;
  padding:10px 16px;font-size:14px;color:var(--ink)}
.ed-pop-in button:hover,.ed-pop-in button:focus-visible{background:var(--paper-2);outline:none}
.ed-pop-in button.rot{color:var(--red)}
.ed-pop-in hr{border:0;border-top:1px solid var(--line);margin:6px 0}
.ed-pop-kopf{padding:8px 16px 8px;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.ed-pop-k{flex:none}
.ed-pop.ist-blatt{background:rgba(0,0,0,.28)}
.ed-pop.ist-blatt .ed-pop-in{left:0;right:0;bottom:0;top:auto;min-width:0;border:0;border-top:1px solid var(--line);
  padding:10px 0 calc(14px + env(safe-area-inset-bottom,0px));animation:edBlattRein .2s ease both}
@keyframes edBlattRein{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
.ed-pop.ist-blatt .ed-pop-in button{padding:15px 22px;font-size:16px}

/* Dialog */
.ed-dlg-ov{position:fixed;inset:0;z-index:320;background:rgba(10,10,8,.38);display:flex;align-items:center;justify-content:center;padding:20px}
.ed-dlg-ov[hidden]{display:none}
.ed-dlg{width:min(440px,100%);background:var(--surface);border:1px solid var(--line-2);padding:26px 26px 22px;
  box-shadow:0 24px 70px rgba(0,0,0,.2);animation:edPopRein .16s ease both}
.ed-dlg-t{font-family:var(--serif);font-weight:500;font-size:23px;line-height:1.2}
.ed-dlg-b{margin-top:10px;font-size:14.5px;line-height:1.55;color:var(--ink-soft)}
.ed-dlg-akt{display:flex;justify-content:flex-end;gap:10px;margin-top:24px;flex-wrap:wrap}
.ed-knopf{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:11px 17px;
  border:1px solid var(--line-2);color:var(--ink);transition:border-color .14s,opacity .14s}
.ed-knopf:hover{border-color:var(--ink)}
.ed-knopf.primaer{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.ed-knopf.rot{background:var(--red);color:#fff;border-color:var(--red)}
.ed-knopf.primaer:hover,.ed-knopf.rot:hover{opacity:.88}
.ed-plan-felder{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.ed-plan-felder label{display:flex;flex-direction:column;gap:6px;min-width:0}
.ed-plan-felder span{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.ed-plan-felder input{width:100%;min-width:0;border:1px solid var(--line-2);background:var(--surface-soft);color:var(--ink);font:inherit;font-size:15px;padding:9px 10px}
.ed-plan-felder input:focus{outline:none;border-color:var(--ink)}
.ed-klein{margin-top:8px;font-size:12.5px;line-height:1.5;color:var(--faint)}
.ed-klein.err{color:var(--red)}
.ed-klein:empty{display:none}

/* ---------- Redaktionsplan: HEUTE, WOCHE, ALLE BEITRÄGE ----------
   Drei Abschnitte wie Ressorts einer Zeitung: eine kräftige Linie, ein
   gesperrtes Wort, darunter Inhalt. Farbe nur als Punkt oder Strich:
   Morning violett, Free gelb, Member und Letter blau. */
.ed-sek{border-top:1px solid var(--ink);margin-top:34px;padding-top:12px}
.ed-sek:first-of-type{margin-top:6px}
.ed-sek-kopf{display:flex;align-items:baseline;gap:18px;min-height:30px}
.ed-sek-t{font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.ed-leise{margin-left:auto;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
  border-bottom:1px solid var(--line-2);padding-bottom:1px}
.ed-leise:hover{color:var(--ink);border-color:var(--ink)}

.ed-heute-kopf{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:10px 0 14px;border-bottom:1px solid var(--line)}
.ed-heute-datum{font-family:var(--serif);font-weight:500;font-size:clamp(30px,3.6vw,40px);line-height:1.05;letter-spacing:-.012em;text-transform:uppercase}
.ed-quote{display:grid;grid-template-columns:auto auto;align-items:baseline;gap:4px 10px;justify-items:end;flex:none}
.ed-quote[hidden]{display:none}
.ed-quote-z{font-family:var(--serif);font-size:24px;line-height:1}
.ed-balken{grid-column:1 / -1;width:150px;height:1px;background:var(--line-2);position:relative;margin-top:8px}
.ed-balken i{position:absolute;left:0;top:-1px;height:3px;background:var(--ink);width:0;transition:width .5s ease}

.ed-hz{display:grid;grid-template-columns:56px 158px minmax(0,1fr) 168px 116px 52px;gap:16px;align-items:center;padding:9px 6px;
  border-bottom:1px solid var(--line);cursor:pointer;transition:background .14s;position:relative}
.ed-hz:hover,.ed-hz:focus-visible{background:color-mix(in srgb,var(--paper-2) 70%,transparent);outline:none}
.ed-hz.ist-job{cursor:default}
.ed-hz.ist-job:hover{background:transparent}
.ed-hz-zeit{font-family:var(--serif);font-size:18px;color:var(--ink);font-variant-numeric:tabular-nums}
.ed-hz .ed-gat{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ed-hz-titel{font-family:var(--serif);font-size:18px;line-height:1.4;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ed-hz-st{min-width:0;overflow:hidden}
.ed-hz-bild{width:52px;aspect-ratio:16/10;overflow:hidden;border:1px solid var(--line);background:var(--paper-2)}
.ed-hz-bild img{width:100%;height:100%;object-fit:cover;display:block}
.ed-hz-akt{display:flex;align-items:center;justify-content:flex-end;gap:6px;min-width:0}
.ed-hz-go{font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap;
  border-bottom:1px solid transparent;padding:4px 0 1px}
.ed-hz:hover .ed-hz-go{color:var(--ink);border-color:var(--line-2)}
/* Nächster Schritt: nur eine feine Linie links und die Aktion in Schwarz */
.ed-hz.ist-naechst::before{content:"";position:absolute;left:-10px;top:9px;bottom:9px;width:2px;background:var(--ink)}
.ed-hz.ist-naechst .ed-hz-go{color:var(--ink);border-color:var(--ink)}
.ed-naechst-k{position:absolute;left:62px;top:-1px;transform:translateY(-50%);background:var(--paper);padding:0 6px;
  font-size:9px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
.ed-hz-offen{padding:16px 6px 6px;font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);border-bottom:1px solid var(--line)}
.ed-ruhe{padding:18px 6px;color:var(--ink-soft);font-family:var(--serif);font-size:17px;border-bottom:1px solid var(--line)}

/* Gattung im Plan: Wort mit Punkt, sonst nichts */
.ed-gat{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-soft)}
.ed-gat::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gat,var(--ink-soft));flex:none}
.gat-morning{--gat:var(--morning-violett)}
.gat-free{--gat:var(--mu-gelb)}
.gat-member,.gat-letter{--gat:var(--member-blau)}

/* Status: ein Zeichen und ein Wort */
.ed-st{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap}
.ed-st i{font-style:normal;font-size:12px;letter-spacing:0;width:12px;text-align:center}
.ed-st .ed-st-zeit{font-weight:500;letter-spacing:.04em;color:var(--faint);font-variant-numeric:tabular-nums}
.st-veroeffentlicht{color:var(--green)}
.st-ready{color:var(--ink)}
.st-bereit{color:var(--member-blau)}
.st-geplant{color:var(--faint)}
.st-research i{display:inline-block;width:8px;height:8px;border-radius:50%;border:1.5px solid currentColor;border-right-color:transparent;animation:edDreh 1s linear infinite;font-size:0}
.st-du{color:var(--mu-gelb)}
.st-rot{color:var(--red)}

/* Woche: Slots links, sieben Tage rechts */
.ed-woche-zeit{font-size:12.5px;color:var(--ink-soft);letter-spacing:.06em;text-transform:uppercase}
.ed-woche-nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.ed-woche-nav button{min-width:32px;height:30px;padding:0 8px;font-size:15px;color:var(--ink-soft)}
.ed-woche-nav button:hover{color:var(--ink)}
.ed-woche-nav .ed-woche-jetzt{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.ed-woche-nav .ed-woche-jetzt[hidden]{display:none}
.ed-matrix{display:grid;grid-template-columns:118px repeat(7,minmax(0,1fr));margin-top:10px;border-top:1px solid var(--line)}
.ed-mx-kopf{padding:10px 9px 9px;font-size:10.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--faint);
  border-bottom:1px solid var(--line);border-left:1px solid var(--line);display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.ed-mx-kopf b{font-family:var(--serif);font-size:15px;font-weight:500;letter-spacing:0;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.ed-mx-kopf.heute{color:var(--ink);box-shadow:inset 0 2px 0 var(--ink);background:color-mix(in srgb,var(--paper-2) 70%,transparent)}
.ed-mx-kopf.heute b{color:var(--ink)}
.ed-mx-kopf .ed-mx-heute{font-size:9px;letter-spacing:.18em}
.ed-mx-ecke{border-bottom:1px solid var(--line)}
.ed-mx-slot{padding:12px 10px 12px 0;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
  border-bottom:1px solid var(--line);display:flex;align-items:flex-start;gap:7px;line-height:1.35}
.ed-mx-slot::before{content:"";width:2px;align-self:stretch;background:var(--gat);flex:none}
.ed-mx-zelle{border-bottom:1px solid var(--line);border-left:1px solid var(--line);min-height:76px;padding:5px 5px 4px;min-width:0;position:relative;
  display:flex;flex-direction:column;gap:2px}
.ed-mx-zelle.heute{background:color-mix(in srgb,var(--paper-2) 70%,transparent)}
.ed-mx-zelle.heute,.ed-mx-kopf.heute{border-left-color:var(--line-2)}
.ed-mx-zelle.heute + .ed-mx-zelle,.ed-mx-kopf.heute + .ed-mx-kopf{border-left-color:var(--line-2)}
.ed-mx-zelle.ziel{background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--ink)}
.ed-mx-it{display:flex;flex-direction:column;gap:4px;width:100%;text-align:left;padding:5px 5px 6px;cursor:pointer;min-width:0}
.ed-mx-it + .ed-mx-it{border-top:1px solid var(--line)}
.ed-mx-it:hover .ed-mx-titel span,.ed-mx-it[aria-expanded="true"] .ed-mx-titel span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.ed-mx-it[draggable="true"]{cursor:grab}
.ed-mx-it.zieht{opacity:.35}
.ed-mx-titel{display:flex;align-items:baseline;gap:6px;font-family:var(--serif);font-size:15.5px;line-height:1.25;color:var(--ink);min-width:0}
.ed-mx-titel::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gat);flex:none;transform:translateY(-2px)}
.ed-mx-titel span{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-width:0;overflow-wrap:break-word;hyphens:auto}
.ed-mx-it .ed-st{padding-left:12px;font-size:9.5px;letter-spacing:.11em}
.ed-mx-it .ed-st i{font-size:11px;width:10px}
.ed-mx-it.ist-job{cursor:default}
.ed-mx-plus{display:flex;align-items:center;width:100%;flex:1;min-height:30px;padding:4px 5px;font-size:10px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);opacity:.8;text-align:left}
.ed-mx-plus:hover,.ed-mx-plus:focus-visible{color:var(--ink);opacity:1;outline:none}
.ed-mx-plus.still{opacity:0}
.ed-mx-zelle:hover .ed-mx-plus.still,.ed-mx-plus.still:focus-visible{opacity:.8}

/* Woche auf dem Handy: ein Tag, ganze Breite */
.ed-tagwahl,.ed-tagslots{display:none}

/* ALLE BEITRÄGE: Tageskopf zwischen den Zeilen */
.ed-alle .ed-reiter{margin-top:6px}
.ed-alle .ed-row{grid-template-columns:44px minmax(0,1fr) 230px 40px;gap:16px;padding:7px 6px}
.ed-alle .ed-thumb{width:44px}
.ed-alle .ed-row .ed-titel{font-size:16px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ed-alle .ed-meta{margin-top:2px;font-size:11px}
.ed-alle .ed-wann{flex-direction:row;align-items:center;justify-content:space-between;gap:10px;font-size:12px;white-space:nowrap}
.ed-alle .ed-zeit{font-variant-numeric:tabular-nums;color:var(--faint)}
.ed-alle .ed-k{display:none}
.ed-alle .ed-termin{font-size:12.5px;color:var(--ink-soft)}
.ed-alle .ed-go{display:none}
.ed-alle .ed-mehr-btn{width:32px;height:32px}
.ed-tagkopf{padding:16px 6px 6px;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);border-bottom:1px solid var(--line)}
.ed-tagkopf b{color:var(--ink);font-weight:600}

/* Thema planen: ein kleines Feld an Ort und Stelle */
#edPlanPop{background:transparent}
#edPlanPop .ed-pop-in{width:330px;padding:16px 16px 14px}
#edPlanPop.ist-blatt{background:rgba(0,0,0,.28)}
#edPlanPop.ist-blatt .ed-pop-in{width:auto;padding:20px 20px calc(18px + env(safe-area-inset-bottom,0px))}
.ed-tp{display:flex;flex-direction:column;gap:10px}
.ed-tp-titel{width:100%;border:0;border-bottom:1px solid var(--line-2);background:transparent;color:var(--ink);font-family:var(--serif);font-size:19px;padding:6px 0 8px;outline:none}
.ed-tp-titel:focus{border-color:var(--ink)}
.ed-tp label{display:flex;flex-direction:column;gap:5px;min-width:0}
.ed-tp label > span{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.ed-tp select,.ed-tp input:not(.ed-tp-titel){width:100%;min-width:0;border:1px solid var(--line-2);background:var(--surface-soft);color:var(--ink);font:inherit;font-size:14px;padding:7px 8px}
.ed-tp select:focus,.ed-tp input:focus{outline:none;border-color:var(--ink)}
.ed-tp-zwei{display:grid;grid-template-columns:1.3fr 1fr;gap:8px}
.ed-tp-akt{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}
.ed-tp-akt .ed-knopf{padding:9px 14px}

@media(max-width:700px){
  .ed-sek{margin-top:28px}
  .ed-heute-kopf{flex-direction:column;align-items:flex-start;gap:12px;padding:10px 0 16px}
  .ed-heute-datum{font-size:28px}
  .ed-quote{justify-items:start;grid-template-columns:auto auto}
  .ed-kopf-akt{gap:8px}
  .ed-neu.ed-thema-btn{width:auto;padding:0 14px}
  .ed-neu.ed-thema-btn .ed-neu-t{display:inline;font-size:11px}
  .ed-hz{grid-template-columns:44px minmax(0,1fr) auto;grid-template-areas:"zeit gat akt" "zeit titel akt" "zeit st akt";gap:2px 12px;padding:10px 0;align-items:center}
  .ed-hz:hover{background:transparent}
  .ed-hz-zeit{grid-area:zeit;font-size:15px;align-self:start;padding-top:1px}
  .ed-hz .ed-gat{grid-area:gat;font-size:9.5px}
  .ed-hz-titel{grid-area:titel;font-size:16.5px;white-space:normal}
  .ed-hz-st{grid-area:st}
  .ed-hz-bild{display:none}
  .ed-hz > div:last-child:empty{display:none}
  .ed-hz-akt{grid-area:akt;flex-direction:column;align-items:flex-end;gap:2px}
  .ed-hz-go{padding:10px 0 4px}
  .ed-hz.ist-naechst::before{left:-8px}
  .ed-naechst-k{left:50px}
  .ed-alle .ed-row{grid-template-columns:40px minmax(0,1fr) 34px;grid-template-areas:"bild haupt akt" "bild wann akt";gap:2px 12px;padding:9px 0}
  .ed-alle .ed-thumb{width:40px}
  .ed-alle .ed-wann{justify-content:flex-start}
  .ed-alle .ed-mehr-btn{width:40px;height:40px}
  .ed-woche-zeit{font-size:11px}
  .ed-woche-nav .ed-woche-jetzt{display:none}
  .ed-matrix{display:none}
  .ed-tagwahl{display:flex;margin-top:8px;border-bottom:1px solid var(--line)}
  .ed-tagwahl button{flex:1;padding:10px 0 9px;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;font-weight:600;
    letter-spacing:.12em;text-transform:uppercase;color:var(--faint);position:relative}
  .ed-tagwahl button b{font-family:var(--serif);font-size:16px;font-weight:500;letter-spacing:0;color:var(--ink-soft)}
  .ed-tagwahl button.heute b{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
  .ed-tagwahl button.on{color:var(--ink)}
  .ed-tagwahl button.on b{color:var(--ink)}
  .ed-tagwahl button.on::after{content:"";position:absolute;left:18%;right:18%;bottom:-1px;height:2px;background:var(--ink)}
  .ed-tagwahl button .pk{width:4px;height:4px;border-radius:50%;background:var(--ink-soft)}
  .ed-tagwahl button .pk.leer{background:transparent}
  .ed-tagslots{display:block}
  .ed-ts{display:grid;grid-template-columns:104px minmax(0,1fr);gap:12px;border-bottom:1px solid var(--line);padding:4px 0;min-height:52px;align-items:start}
  .ed-ts-zelle{display:flex;flex-direction:column}
  .ed-ts .ed-mx-plus{min-height:44px}
  .ed-tagslots{touch-action:pan-y}
  .ed-ts .ed-mx-slot{border:0;padding:8px 0}
  .ed-ts .ed-mx-it{padding:6px 0}
  .ed-ts .ed-mx-titel{font-size:16px}
  .ed-ts .ed-mx-plus.still{opacity:.6}
  .ed-tagkopf{padding:20px 0 8px}
}

/* Leiste unten während der Vorschau */
.ed-vbar{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:250;
  display:flex;align-items:center;gap:18px;background:var(--pill-bg);color:var(--pill-fg);padding:10px 10px 10px 20px;
  font-size:13px;box-shadow:0 10px 30px rgba(0,0,0,.22);max-width:calc(100vw - 24px)}
.ed-vbar[hidden]{display:none}
.ed-vbar-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ed-vbar .dot-sep{padding:0 .5em;opacity:.5}
.ed-vbar button{flex:none;background:var(--pill-fg);color:var(--pill-bg);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:9px 14px}
body.ed-vorschau-an .bnav{display:none}

/* ---------- Editor ---------- */
#compose{animation:edEin .35s ease both}
@keyframes edEin{from{opacity:0}to{opacity:1}}
body.ed-im-editor .bnav{display:none}
.ed-top{position:sticky;top:0;z-index:70;background:var(--paper);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.ed-top-in{display:flex;align-items:center;gap:18px;padding:11px 22px;min-height:58px}
.ed-top-back{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);flex:none}
.ed-top-back:hover{color:var(--ink)}
.ed-top-mitte{flex:1;min-width:0;display:flex;align-items:center;gap:12px}
.ed-chip{flex:none;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
  border:1px solid var(--line-2);padding:4px 9px}
.ed-chip.live{color:var(--green);border-color:color-mix(in srgb,var(--green) 45%,transparent)}
.ed-chip.geplant{color:var(--member-blau);border-color:color-mix(in srgb,var(--member-blau) 40%,transparent)}
.ed-gesp{font-size:12.5px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ed-gesp.warn{color:var(--mu-gelb)}
.ed-gesp.err{color:var(--red)}
.ed-top-akt{display:flex;align-items:center;gap:8px;flex:none}
.ed-tbtn{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
  padding:10px 15px;border:1px solid var(--line-2);transition:border-color .14s,opacity .14s;white-space:nowrap}
.ed-tbtn:hover{border-color:var(--ink)}
.ed-tbtn[disabled]{opacity:.4;cursor:default}
.ed-tbtn.ed-primaer{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.ed-tbtn.ed-primaer:hover{opacity:.88}
.ed-top-zwei{display:none}

.composer.ed-studio{margin:0;border:0;padding:0;display:grid;grid-template-columns:230px minmax(0,1fr) 320px;align-items:start;min-height:calc(100vh - 59px)}
.ed-links,.ed-rechts{position:sticky;top:59px;max-height:calc(100vh - 59px);overflow:auto;padding:24px 22px 60px;scrollbar-width:thin}
.ed-links{border-right:1px solid var(--line)}
.ed-rechts{border-left:1px solid var(--line);padding-top:8px}
.ed-blatt-kopf{display:none}
.ed-p-t{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin:0 0 10px}
.ed-p-t + .ed-gliederung{margin-bottom:28px}
.ed-gl{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:6px;padding:6px 6px;margin:0 -6px;
  font-size:13px;color:var(--ink-soft);cursor:pointer;transition:background .12s,color .12s}
.ed-gl:hover{background:var(--paper-2);color:var(--ink)}
.ed-gl.on{color:var(--ink);font-weight:600}
.ed-gl.leer .t{color:var(--faint)}
.ed-gl .n{font-size:10.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.ed-gl .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ed-gl-pf{display:flex;opacity:0;transition:opacity .12s}
.ed-gl:hover .ed-gl-pf,.ed-gl:focus-within .ed-gl-pf{opacity:1}
.ed-gl-pf button{width:20px;height:20px;font-size:11px;color:var(--faint)}
.ed-gl-pf button:hover{color:var(--ink)}
.ed-gl-pf button[disabled]{opacity:.25;cursor:default}
.ed-palette{display:grid;gap:2px}
.ed-palette button{display:flex;align-items:center;gap:11px;padding:8px 6px;margin:0 -6px;text-align:left;font-size:13px;color:var(--ink-soft);transition:background .12s,color .12s}
.ed-palette button:hover{background:var(--paper-2);color:var(--ink)}
.ed-pi{width:22px;height:22px;flex:none;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line-2);font-size:11px;color:var(--ink-soft)}
.ed-p-hilfe{margin-top:14px;font-size:11.5px;line-height:1.5;color:var(--faint)}

.ed-mitte{padding:28px clamp(22px,5vw,72px) 140px;min-width:0}
.ed-mitte > .vx-modes{margin:0 0 30px}
.ed-schreiben{max-width:720px;margin:0 auto}
.ed-block{margin-bottom:34px}
.ed-b-t{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:8px}
.ed-b-t em{font-style:normal;font-weight:400;letter-spacing:.02em;text-transform:none;margin-left:6px}
.ed-studio textarea,.ed-studio input.ed-h,.ed-studio input.ed-pull{display:block;width:100%;border:0;background:transparent;color:var(--ink);resize:none;outline:none;padding:0}
.ed-studio .ed-titel{font-family:var(--serif);font-weight:500;font-size:clamp(32px,3.6vw,44px);line-height:1.08;letter-spacing:-.014em;overflow:hidden}
.ed-studio .ed-lead{margin-top:14px;font-family:var(--serif);font-size:20px;line-height:1.45;color:var(--ink-soft)!important;overflow:hidden}
.ed-text{font-family:var(--serif);font-size:18px;line-height:1.65;overflow:hidden}
.ed-studio input.ed-h{font-family:var(--serif);font-size:25px;line-height:1.25;margin-bottom:12px}
.ed-studio input.ed-pull{font-family:var(--serif);font-style:italic;font-size:19px;margin-top:14px;padding-left:16px;border-left:2px solid var(--line-2)}
.ed-studio textarea::placeholder,.ed-studio input::placeholder{color:var(--faint);opacity:1}
.ed-zart .ed-text{font-size:16px;color:var(--ink-soft)}
.ed-block:focus-within .ed-b-t{color:var(--ink-soft)}

/* Kapitel im Studio: kein Kasten, eine Linie davor, Felder wie Text */
.ed-studio .cf-chapter{border:0;border-top:1px solid var(--line);background:transparent;padding:26px 0 8px;margin:0 0 30px}
/* Die Nummer steht links im Aufbau; im Text selbst würde sie neben der Rubrik doppelt stehen. */
.ed-studio .cf-chapter .cf-chno{display:none}
.ed-studio .cf-chapter .cf-del{top:26px;right:0;opacity:0;transition:opacity .14s}
.ed-studio .cf-chapter:hover .cf-del,.ed-studio .cf-chapter:focus-within .cf-del{opacity:1}
.ed-studio .cf-chapter .cf{margin-bottom:12px}
.ed-studio .cf-chapter .cf > span{display:none}
.ed-studio .cf-chapter .cf-mehr .cf > span{display:block;margin-top:8px}
.ed-studio .cf-chapter .cf input,.ed-studio .cf-chapter .cf textarea{background:transparent;border:0;padding:0;font-family:var(--serif);color:var(--ink)}
.ed-studio .cf-chapter [data-ch="label"]{font-family:var(--sans)!important;font-size:11px!important;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)!important}
.ed-studio .cf-chapter [data-ch="h"]{font-size:25px!important;line-height:1.25}
.ed-studio .cf-chapter [data-ch="body"]{font-size:18px!important;line-height:1.65;resize:none;overflow:hidden}
.ed-studio .cf-chapter .cf-mehr input,.ed-studio .cf-chapter .cf-mehr textarea{background:var(--paper-2)!important;border:1px solid var(--line)!important;padding:9px 11px!important;font-family:var(--sans)!important;font-size:14px!important}
.ed-studio .cf-imglabel{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.ed-studio .cf-addimg{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin:4px 0 6px}
.ed-studio .cf-addimg:hover{color:var(--ink)}
.cf-mehr{margin-top:10px}
.cf-mehr > summary{cursor:pointer;list-style:none;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);padding:4px 0}
.cf-mehr > summary::-webkit-details-marker{display:none}
.cf-mehr > summary::before{content:"+ "}
.cf-mehr[open] > summary::before{content:"– "}
.cf-mehr > summary:hover{color:var(--ink-soft)}
/* Eingebettete Blöcke (Chart, Werbeblock) unter dem Text, so wie im Artikel */
.ed-bloecke{display:grid;gap:14px;margin:6px 0 18px}
.ed-bloecke[hidden]{display:none}
.ed-bl{border:1px dashed var(--line-2);padding:10px 12px 12px}
.ed-bl-t{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:8px}
.ed-bl-in{max-height:420px;overflow:auto;pointer-events:none}
.ed-bl-in img,.ed-bl-in svg{max-width:100%;height:auto}
/* X Publishing unter dem Artikel */
.ed-x{max-width:720px;margin:56px auto 0;padding-top:22px;border-top:2px solid var(--ink)}
.ed-x[hidden]{display:none}
.ed-x-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:14px}
.ed-x-t{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.ed-x-stand{font-size:12px;color:var(--faint)}
.ed-x-leer{font-size:14px;line-height:1.55;color:var(--ink-soft)}
.ed-x-hinweis{font-size:13px;line-height:1.5;color:var(--ink);border-left:2px solid var(--mu-gelb);padding:8px 12px;margin-bottom:12px;background:color-mix(in srgb,var(--mu-gelb) 8%,transparent)}
.ed-x-klein{font-size:12px;color:var(--faint);margin:6px 0 12px}
.ed-x-liste{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ed-x-post{border:1px solid var(--line-2);background:var(--surface);padding:14px 14px 10px;display:flex;flex-direction:column;gap:10px;min-width:0}
.ed-x-pk{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.ed-x-nr{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.ed-x-angle{font-size:11.5px;color:var(--faint)}
.ed-x-text{flex:1;font-size:14.5px;line-height:1.5;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere}
.ed-x-fuss{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding-top:8px}
.ed-x-z{font-size:11.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.ed-x-kopie{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:7px 12px;border:1px solid var(--line-2);color:var(--ink)}
.ed-x-kopie:hover{border-color:var(--ink)}
.ed-x-kopf2{margin-top:34px;padding-top:20px;border-top:1px solid var(--line)}
.ed-x-thumb .ed-x-text{font-size:13.5px;max-height:340px;overflow:auto}
@media(max-width:700px){.ed-x-liste{grid-template-columns:1fr}}
.ed-add{display:block;width:100%;padding:14px;margin:0 0 36px;border:1px dashed var(--line-2);font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);transition:border-color .14s,color .14s}
.ed-add:hover{border-color:var(--ink);color:var(--ink)}
.ed-schreiben .cf-restore{margin-bottom:26px}

/* Rechte Spalte */
.ed-sek{padding:18px 0;border-bottom:1px solid var(--line)}
.ed-sek:last-of-type{border-bottom:0}
.ed-sek-t{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:12px}
details.ed-sek > summary.ed-sek-t{cursor:pointer;list-style:none;margin:0;display:flex;justify-content:space-between}
details.ed-sek > summary.ed-sek-t::-webkit-details-marker{display:none}
details.ed-sek > summary.ed-sek-t::after{content:"+";color:var(--faint)}
details.ed-sek[open] > summary.ed-sek-t::after{content:"–"}
.ed-pubtext{font-size:13.5px;line-height:1.5;color:var(--ink);margin-bottom:12px}
.ed-pubtext:empty{display:none}
/* Google-Hinweise im Editor: nur Hinweise, sie halten nichts auf. */
.ed-seo{list-style:none;margin:0;padding:0;font-size:12.5px;line-height:1.5;color:var(--ink-soft)}
.ed-seo li{position:relative;padding-left:15px;margin-top:7px}
.ed-seo li:first-child{margin-top:0}
.ed-seo li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--faint)}
.ed-seo li.warn{color:var(--ink)}
.ed-seo li.warn::before{background:#C99A1E}
.ed-seo li.ok::before{background:#3E8E5E}
.ed-seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border:1px solid var(--line-2)}
.ed-seg[hidden]{display:none}
.ed-seg button{padding:9px 10px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);transition:background .14s,color .14s}
.ed-seg button + button{border-left:1px solid var(--line-2)}
.ed-seg button:hover{color:var(--ink)}
.ed-seg button.on{background:var(--ink);color:var(--paper)}
.ed-acc-seg button[data-z="gratis"].on{background:var(--mu-gelb);color:#fff}
.ed-acc-seg button[data-z="member"].on{background:var(--member-blau);color:#fff}
.ed-seg[aria-disabled="true"]{opacity:.5;pointer-events:none}
.ed-plan{margin-top:14px}
.ed-plan[hidden]{display:none}
.ed-select,.ed-input{width:100%;border:1px solid var(--line-2);background:var(--surface-soft);color:var(--ink);font:inherit;font-size:14px;padding:9px 10px;border-radius:0}
.ed-select:focus,.ed-input:focus{outline:none;border-color:var(--ink)}
.ed-feld{display:block;margin-bottom:12px}
.ed-feld > span{display:block;font-size:11.5px;color:var(--ink-soft);margin-bottom:5px}
.ed-feld > span em{font-style:normal;color:var(--faint)}
.ed-rechts .cf-themen{gap:6px}
.ed-rechts .cf-themen label{padding:7px 10px;font-size:13px}
.ed-rechts .cf-cover{grid-template-columns:1fr;gap:10px}
.ed-rechts .cf-coverprev{width:100%}
.ed-datei{position:relative;display:block;text-align:center;padding:9px;border:1px solid var(--line-2);font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);cursor:pointer}
.ed-datei:hover{border-color:var(--ink)}
.ed-datei input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.ed-link{font-size:12.5px;color:var(--ink-soft);border-bottom:1px solid var(--line-2);padding-bottom:1px;align-self:flex-start;justify-self:start}
.ed-link:hover{color:var(--ink);border-color:var(--ink)}
.ed-link[hidden]{display:none}
.ed-rot{color:var(--red)}
.ed-erw-akt{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:14px}

/* Visueller Modus im Studio: die Bühne bekommt die Breite der Mitte */
#compose .vx-top{top:59px}
#compose.vx-inspopen .ed-mitte{padding-right:326px}
.ed-blatt-schleier{display:none}

@media(max-width:1280px){
  .composer.ed-studio{grid-template-columns:200px minmax(0,1fr) 290px}
}
@media(max-width:1100px){
  .composer.ed-studio{display:block;min-height:0}
  .ed-links,.ed-rechts{position:fixed;top:0;bottom:0;max-height:none;z-index:200;background:var(--paper);
    width:min(360px,88vw);padding:0 20px calc(40px + env(safe-area-inset-bottom,0px));transition:transform .26s cubic-bezier(.22,1,.36,1);border:0}
  .ed-links{left:0;transform:translateX(-102%);box-shadow:8px 0 40px rgba(0,0,0,.12)}
  .ed-rechts{right:0;transform:translateX(102%);box-shadow:-8px 0 40px rgba(0,0,0,.12)}
  #compose.blatt-links .ed-links,#compose.blatt-rechts .ed-rechts{transform:none}
  .ed-blatt-kopf{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--paper);z-index:2;
    padding:calc(16px + env(safe-area-inset-top,0px)) 0 14px;margin-bottom:10px;border-bottom:1px solid var(--line);
    font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
  .ed-blatt-zu{font-size:26px;line-height:1;color:var(--ink-soft);padding:0 4px}
  .ed-blatt-schleier{display:block;position:fixed;inset:0;z-index:190;background:rgba(10,10,8,.32);opacity:0;pointer-events:none;transition:opacity .2s}
  #compose.blatt-links .ed-blatt-schleier,#compose.blatt-rechts .ed-blatt-schleier{opacity:1;pointer-events:auto}
  .ed-top-zwei{display:flex;border-top:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
  .ed-top-zwei::-webkit-scrollbar{display:none}
  .ed-top-zwei button{flex:1;padding:11px 12px;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap}
  .ed-top-zwei button + button{border-left:1px solid var(--line)}
  .ed-top-zwei button:hover{color:var(--ink)}
  .ed-nur-breit{display:none}
  .ed-mitte{padding:22px 22px 120px}
  #compose .vx-top{top:100px}
  #compose.vx-inspopen .ed-mitte{padding-right:22px}
  body.ed-blatt-offen{overflow:hidden}
}
@media(max-width:700px){
  .ed-wrap{padding-bottom:110px}
  .ed-kopf{align-items:center;padding-bottom:16px}
  .ed-kopf .mb-zurueck{margin-top:18px}
  .ed-h1{font-size:34px;margin-top:10px}
  .ed-unter{display:none}
  .ed-neu{width:46px;height:46px;padding:0;justify-content:center;align-self:flex-end}
  .ed-neu-t{display:none}
  .ed-plus{font-size:24px}
  .ed-reiter{gap:20px}
  .ed-reiter button{font-size:11px;letter-spacing:.1em}
  .ed-z{margin-left:5px}
  .ed-werkzeug{flex-direction:column;align-items:stretch;gap:10px}
  .ed-suche input{font-size:16px}
  .ed-filter{overflow-x:auto;scrollbar-width:none}
  .ed-filter::-webkit-scrollbar{display:none}
  .ed-filter select{font-size:13px;flex:none}
  /* Auf dem Handy eine Lese-Liste, keine gequetschte Tabelle */
  .ed-row{grid-template-columns:56px minmax(0,1fr) 34px;grid-template-areas:"bild haupt akt" "bild wann akt";gap:4px 14px;padding:14px 0;align-items:start}
  .ed-row:hover{background:transparent}
  .ed-thumb{grid-area:bild;width:56px;margin-top:3px}
  .ed-haupt{grid-area:haupt}
  .ed-wann{grid-area:wann;flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:12px}
  .ed-termin{font-size:12.5px}
  .ed-akt{grid-area:akt;align-self:center}
  .ed-go{display:none}
  .ed-row .ed-titel{font-size:17px}
  .ed-meta{font-size:11.5px}
  .ed-dlg-ov{align-items:flex-end;padding:0}
  .ed-dlg{width:100%;padding:24px 20px calc(20px + env(safe-area-inset-bottom,0px));animation:edBlattRein .2s ease both}
  .ed-dlg-akt .ed-knopf{flex:1}
  .ed-plan-felder input{font-size:16px}
  .ed-select,.ed-input{font-size:16px}
}
@media(max-width:600px){
  .ed-top-in{padding:9px 14px;gap:10px;min-height:52px}
  .ed-top-zwei button{padding:11px 4px;font-size:10.5px;letter-spacing:.08em}
  .ed-top-back-t{display:none}
  .ed-top-back{font-size:18px}
  .ed-tbtn{padding:9px 12px;font-size:11px}
  .ed-mitte{padding:18px 18px 120px}
  .ed-studio .ed-titel{font-size:30px}
  .ed-lead{font-size:18px}
  .ed-text,.ed-studio .cf-chapter [data-ch="body"]{font-size:17px!important}
  .ed-studio .cf-chapter .cf-del{opacity:1}
  #compose .vx-top{top:93px}
}

/* ============================================================
   MEIN BEREICH
   Kein eigenes Design, sondern das Haus mit Waerme darueber:
   weniger Trennlinien, dafuer leicht abgesetzte Flaechen,
   Cover statt Dateiliste, Sprache die eine Person meint.
   ============================================================ */

/* Waermere Ableitungen aus den Haustoenen. Bewusst auf body und nicht
   auf :root, damit theme-sepia und theme-dark weiter mitziehen. */
body{
  --warm:      color-mix(in srgb, var(--paper-2) 58%, var(--paper));
  --warm-line: color-mix(in srgb, var(--line) 70%, var(--paper));
  --cov-blau:  #1E3557;
  --cov-gelb:  #E4C75A;
}

.mb-head{padding:58px 0 0}
.mb-top{margin-top:12px}
.mb-hi{font-family:var(--serif);font-weight:600;font-size:clamp(34px,5vw,52px);line-height:1.02;letter-spacing:-.015em}
/* Die Anrede steht unter dem Namen der Seite, nicht an seiner Stelle. Wer
   hereinkommt, will beides wissen: wo er ist und dass er gemeint ist. */
.mb-gruss{margin-top:10px;font-family:var(--serif);font-size:clamp(19px,2.4vw,24px);
  line-height:1.32;color:var(--ink)}
.mb-welcome{margin-top:4px;font-family:var(--serif);font-size:clamp(17px,2.1vw,21px);
  line-height:1.4;color:var(--ink-soft)}
.mb-since{margin-top:16px;font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint)}

/* Runder Anstecker mit Initialen. Die einzige Rundung im Haus, bewusst. */
.mb-ava{flex:none;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;background:var(--warm);border:1px solid var(--warm-line);
  font-family:var(--serif);font-size:19px;letter-spacing:.04em;color:var(--ink-soft)}

/* Das Haus setzt den Trennpunkt nur in .label und .hc-meta ab.
   Hier gilt er im ganzen Bereich, sonst kleben die Angaben. */
.mb-plan .dot-sep,.mb-row .dot-sep,.mb-hl .dot-sep,
.mb-lead .dot-sep,.mb-stat .dot-sep{padding:0 .5em;color:var(--line-2)}

/* Statuspunkt. Gruen als Zustand, nicht als Wertung. */
.mb-dot{display:inline-block;width:7px;height:7px;background:var(--green);
  margin-right:8px;vertical-align:1px;border-radius:50%}
.mb-dot.off{background:var(--faint)}

/* Drei warme Zahlenfelder statt einer technischen Zeile */
.mb-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px}
.mb-stat{background:var(--warm);border:1px solid var(--warm-line);padding:20px 22px 22px}
.mb-stat .n{font-family:var(--serif);font-size:30px;line-height:1;
  font-variant-numeric:tabular-nums slashed-zero}
.mb-stat .l{margin-top:10px;font-size:13px;color:var(--ink-soft);line-height:1.35}

/* Hauptnavigation: fuenf Flaechen untereinander statt einer Reiterleiste.
   Eine Reiterleiste zwingt fuenf Woerter in eine Zeile und schiebt auf dem
   Telefon die hinteren aus dem Bild. Untereinander hat jeder Punkt Platz fuer
   einen Satz, der sagt, was dahinter liegt, und der Daumen trifft ihn. */
.mb-menu{display:flex;flex-direction:column;gap:12px;margin-top:34px}
.mb-menu > button{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:20px;
  width:100%;text-align:left;padding:22px 24px;border:1px solid transparent;border-radius:14px;
  background:var(--warm);cursor:pointer;transition:background .16s,border-color .16s}
.mb-menu > button:hover{background:var(--paper-2);border-color:var(--line)}
.mb-mit-ic{flex:none;display:flex;color:var(--ink)}
.mb-mit-t{display:block;font-family:var(--serif);font-weight:600;font-size:21px;line-height:1.2;color:var(--ink)}
.mb-mit-s{display:block;margin-top:5px;font-size:14.5px;line-height:1.4;color:var(--ink-soft)}
.mb-mit-pf{flex:none;font-size:20px;line-height:1;color:var(--ink-soft);transition:transform .18s}
.mb-menu > button:hover .mb-mit-pf{transform:translateX(4px)}
/* Ein Weg, der aus dem Haus fuehrt, wird rot gezeichnet. Nur einer, sonst
   verliert die Farbe ihre Bedeutung. */
.mb-menu > button.hot .mb-mit-ic,
.mb-menu > button.hot .mb-mit-t{color:var(--red)}
@media(max-width:520px){
  .mb-menu > button{gap:16px;padding:18px 18px}
  .mb-mit-t{font-size:19px}
  .mb-mit-s{font-size:13.5px}
}

/* Eine Flaeche zeigt sich erst, wenn man sie gewaehlt hat. Sonst staende
   unter fuenf grossen Knoepfen auch noch deren ganzer Inhalt. */
.mb-pane{display:none;padding-bottom:20px}
.mb-pane.on{display:block}
/* Ist eine Flaeche offen, treten Anrede, Zahlen und das Menue zurueck und
   oben steht der Weg zurueck. Es bleibt eine Seite, kein zweiter Verlauf. */
#area[data-mb="offen"] .mb-top,
#area[data-mb="offen"] .mb-hi,
#area[data-mb="offen"] #mbTabs{display:none}
#area:not([data-mb="offen"]) .mb-zurueck{display:none}
.mb-zurueck{display:inline-flex;align-items:center;gap:10px;margin-top:30px;padding:0;
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);background:none;border:none;cursor:pointer;transition:color .16s}
.mb-zurueck:hover{color:var(--ink)}
.mb-zurueck .pf{font-size:15px;letter-spacing:0}
.mb-flaeche{margin-top:14px;font-family:var(--serif);font-weight:600;
  font-size:clamp(30px,4.4vw,44px);line-height:1.04;letter-spacing:-.014em}
/* Ein Satz unter der Ueberschrift, der sagt, was auf dieser Flaeche zu tun ist.
   Faellt weg, wenn es nichts zu sagen gibt. */
.mb-flaeche-sub{margin-top:8px;font-size:17px;line-height:1.4;color:var(--ink-soft)}
.mb-flaeche-sub:empty{display:none}
#area:not([data-mb="offen"]) .mb-flaeche,
#area:not([data-mb="offen"]) .mb-flaeche-sub{display:none}

/* Zweite Ebene innerhalb einer Flaeche. Dasselbe Mittel wie oben: erst die
   Auswahl, dann der Inhalt. Ist ein Teil offen, tritt die Auswahl zurueck. */
.mb-teil{display:none}
.mb-teil.on{display:block}
.mb-pane[data-teil="offen"] .mb-menu{display:none}

/* ===========================================================
   ADMIN
   Der Verwaltungsteil bekommt dasselbe Mittel wie Mein Bereich:
   ein Kachelmenue als Einstieg, ein Weg zurueck, der sagt wohin
   er fuehrt. Die Bausteine (.mb-menu, .mb-mit-*, .mb-zurueck,
   .mb-flaeche) sind dieselben, nur diese Weiche ist eigen.
   Aufklappmenue am Desktop und Blatt von unten auf Mobile sind
   damit hinfaellig und wurden entfernt.
   =========================================================== */
#dashboard[data-ad="offen"] .mb-top,
#dashboard[data-ad="offen"] .mb-hi,
#dashboard[data-ad="offen"] #adTabs{display:none}
#dashboard:not([data-ad="offen"]) .mb-zurueck,
#dashboard:not([data-ad="offen"]) .mb-flaeche,
#dashboard:not([data-ad="offen"]) .mb-flaeche-sub{display:none}
/* Auf den sieben eigenen Verwaltungsseiten steht der Weg zurueck immer.
   Dort gibt es keine Auswahl darueber, von der er abhinge, darum traegt er
   den Abstand nach oben selbst und nicht noch einmal zusaetzlich. */
.ad-kopf{padding:58px 0 4px}
.ad-kopf .mb-zurueck{margin-top:0}
/* Offene Anfragen faerben die Kachel Support. Ein Punkt neben dem Titel,
   wie in der Navigation, damit es dieselbe Sprache bleibt. */
.mb-mit-t .nav-dot{margin-left:9px;vertical-align:middle}

/* Untergeordnete Reiter der Bibliothek. Ohne eigene Linie. */
.mb-sub{display:flex;gap:24px;margin-top:30px;overflow-x:auto;scrollbar-width:none}
.mb-sub::-webkit-scrollbar{display:none}
.mb-sub button{padding:0;font-size:13.5px;color:var(--faint);white-space:nowrap}
.mb-sub button:hover{color:var(--ink-soft)}
.mb-sub button.on{color:var(--ink);font-weight:600}
.mb-subpane{display:none}
.mb-subpane.on{display:block}

/* Warmer Einleitungssatz statt einer Zaehlzeile mit Linie */
.mb-lead{margin-top:24px;font-family:var(--serif);font-size:19px;line-height:1.45;max-width:46ch}
.mb-lead small{display:block;margin-top:8px;font-family:var(--sans);font-size:13.5px;
  line-height:1.55;color:var(--ink-soft)}

.mb-kick{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}

.mb-kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:26px 34px;margin-top:28px}
.mb-kv .k{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.mb-kv .v{margin-top:8px;font-size:17px;font-variant-numeric:tabular-nums slashed-zero;word-break:break-word}
.mb-kv .v small{display:block;margin-top:4px;font-size:12.5px;color:var(--ink-soft)}

.mb-act{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* Wort von Fabian. Der Unterschied zu einem anonymen Konto. */
.mb-fab{display:flex;gap:20px;background:var(--warm);border:1px solid var(--warm-line);
  padding:26px 28px 28px;margin-top:38px}
.mb-fab .mb-ava{width:46px;height:46px;font-size:16px;background:var(--surface)}
.mb-fab .txt{flex:1;min-width:0}
.mb-fab .mb-kick{display:block}
.mb-fab p{margin-top:12px;font-family:var(--serif);font-size:17.5px;line-height:1.6;max-width:56ch}
.mb-fab .go{display:inline-block;margin-top:16px;font-size:13.5px;color:var(--ink-soft);
  border-bottom:1px solid var(--line-2);padding-bottom:2px;cursor:pointer}
.mb-fab .go:hover{color:var(--ink);border-bottom-color:var(--ink)}

/* Weiterlesen */
.mb-cont{background:var(--warm);border:1px solid var(--warm-line);padding:28px 30px 30px;margin-top:38px}
.mb-cont h3{font-family:var(--serif);font-weight:500;font-size:clamp(24px,3.2vw,32px);
  line-height:1.12;letter-spacing:-.005em;margin-top:12px;max-width:22ch}
.mb-prog{margin-top:24px;max-width:520px}
.mb-bar{display:block;height:3px;background:var(--line-2);position:relative;overflow:hidden}
.mb-bar i{position:absolute;inset:0 auto 0 0;background:var(--ink)}
.mb-pmeta{display:flex;justify-content:space-between;gap:16px;margin-top:10px;
  font-size:12px;color:var(--ink-soft);font-variant-numeric:tabular-nums slashed-zero}
.mb-plan{margin-top:7px;font-size:13px;color:var(--ink-soft)}

/* Cover. Aus der Sammlung wird dadurch eine Sammlung. */
.mb-cov{flex:none;width:50px;height:66px;display:flex;flex-direction:column;justify-content:space-between;
  padding:8px;overflow:hidden;background:var(--cov-blau);color:#fff}
.mb-cov .k{font-size:7px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;opacity:.7;white-space:nowrap}
.mb-cov .n{font-family:var(--serif);font-size:19px;line-height:1;font-variant-numeric:tabular-nums}
.mb-cov.gratis{background:var(--cov-gelb);color:var(--cov-blau)}
.mb-cov.gratis .k{opacity:.75}
.mb-cov.datei{background:var(--warm);border:1px solid var(--line-2);color:var(--ink-soft)}
.mb-cov.datei .n{font-size:12px;letter-spacing:.04em}
/* Liegt ein echtes Titelbild vor, fuellt es das Feld vollstaendig. */
.mb-cov.bild{padding:0;background:var(--paper-2)}
.mb-cov .ph{display:block;width:100%;height:100%}
.mb-cov .ph img{width:100%;height:100%;object-fit:cover}

/* Liste aus Zeilen. Flaeche statt Linienraster. */
.mb-rows{margin-top:22px;background:var(--surface);border:1px solid var(--warm-line)}
.mb-row{display:flex;align-items:center;gap:20px;padding:16px 22px;border-bottom:1px solid var(--warm-line);cursor:pointer}
.mb-rows .mb-row:last-child{border-bottom:0}
.mb-row:hover{background:var(--warm)}
.mb-row .num{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--faint);
  flex:none;width:34px;font-variant-numeric:tabular-nums}
.mb-row .main{flex:1;min-width:0}
.mb-row .t{display:block;font-size:16.5px;line-height:1.3}
.mb-row .m{display:block;margin-top:5px;font-size:13px;color:var(--ink-soft)}
.mb-row .s{display:block;margin-top:4px;font-size:12px;color:var(--faint);
  font-variant-numeric:tabular-nums slashed-zero}
.mb-row .side{flex:none;font-size:12.5px;color:var(--ink-soft);
  font-variant-numeric:tabular-nums slashed-zero;text-align:right}
.mb-row .go{flex:none;font-size:13px;color:var(--ink-soft);border-bottom:1px solid var(--line-2);padding-bottom:1px}
.mb-row:hover .go{color:var(--ink);border-bottom-color:var(--ink)}
.mb-row .minibar{width:86px;flex:none}
.mb-row .minibar .mb-bar{height:2px}
.mb-row .minibar span{display:block;margin-top:6px;font-size:11px;color:var(--faint);
  font-variant-numeric:tabular-nums slashed-zero}

/* Highlights */
.mb-hls{margin-top:26px}
.mb-hl{background:var(--warm);border-left:3px solid var(--hl);padding:20px 22px 22px;margin-bottom:16px}
.mb-hl.c-green{border-left-color:#9ED6A8}
.mb-hl.c-red{border-left-color:#E9A7A2}
.mb-hl q{display:block;font-family:var(--serif);font-size:18px;line-height:1.5;quotes:'„' '“'}
.mb-hl .src{margin-top:12px;font-size:12.5px;color:var(--ink-soft)}
.mb-hl .note{margin-top:14px;padding:12px 14px;background:var(--surface);
  border:1px solid var(--warm-line);font-size:13.5px;color:var(--ink-soft)}
.mb-hl .note b{display:block;margin-bottom:4px;font-size:10.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.mb-hl .acts{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px}
.mb-hl .acts button{font-size:13px;color:var(--ink-soft);border-bottom:1px solid var(--line-2);padding-bottom:1px}
.mb-hl .acts button:hover{color:var(--ink);border-bottom-color:var(--ink)}
.mb-hl .acts button.del:hover{color:var(--red);border-bottom-color:var(--red)}

.mb-search{width:100%;max-width:420px;margin-top:22px;padding:12px 14px;border:1px solid var(--warm-line);
  background:var(--surface);font-size:14px;color:var(--ink);font-family:inherit}
.mb-search::placeholder{color:var(--faint)}
.mb-search:focus{outline:none;border-color:var(--ink)}

/* Zahlenreihe der Aktivitaet */
.mb-nums{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px}
.mb-nums > div{background:var(--warm);border:1px solid var(--warm-line);padding:22px 22px 24px}
.mb-nums .n{font-family:var(--serif);font-size:32px;line-height:1;font-variant-numeric:tabular-nums slashed-zero}
.mb-nums .l{margin-top:10px;font-size:13px;color:var(--ink-soft);line-height:1.35}

.mb-note{margin-top:26px;padding:20px 22px;background:var(--warm);border-left:2px solid var(--line-2);
  font-size:14px;color:var(--ink-soft);line-height:1.55}
.mb-note b{color:var(--ink);font-weight:600}

.mb-health{margin-top:22px;background:var(--surface);border:1px solid var(--warm-line)}
.mb-health div{display:flex;align-items:center;gap:12px;padding:14px 22px;
  border-bottom:1px solid var(--warm-line);font-size:15px}
.mb-health div:last-child{border-bottom:0}

.mb-danger{margin-top:22px}
.mb-danger a{display:block;padding:14px 0;border-bottom:1px solid var(--warm-line);font-size:15px;color:var(--ink-soft);cursor:pointer}
.mb-danger a:last-child{border-bottom:0}
.mb-danger a:hover{color:var(--ink)}
.mb-danger a.hot{color:var(--red)}

/* Gespeicherte Karten */
.mb-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:24px}
.mb-card{display:flex;gap:16px;background:var(--warm);border:1px solid var(--warm-line);padding:18px 20px 20px;cursor:pointer}
.mb-card .main{min-width:0;display:block}
/* Eng an .main gebunden, sonst gewinnt .mb-card .k gegen .mb-cov .k */
.mb-card .main .k{display:block;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.mb-card .main .t{display:block;margin-top:9px;font-family:var(--serif);font-size:19px;line-height:1.22}
.mb-card .main .d{display:block;margin-top:10px;font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}

.mb-more{display:inline-block;margin-top:24px;font-size:13.5px;color:var(--ink-soft);
  border-bottom:1px solid var(--line-2);padding-bottom:2px;cursor:pointer}
.mb-more:hover{color:var(--ink);border-bottom-color:var(--ink)}

.mb-leer{padding:26px 4px;font-size:14px;color:var(--faint);line-height:1.6}

@media (max-width:760px){
  .mb-head{padding-top:36px}
  .mb-head .hero-kicker{flex-wrap:wrap;gap:12px 16px}
  .mb-head .hero-kicker .rule{display:none}
  .mb-top{gap:18px}
  .mb-ava{width:44px;height:44px;font-size:15px}
  .mb-stats{grid-template-columns:1fr;gap:10px}
  .mb-stat{display:flex;align-items:baseline;gap:14px;padding:16px 18px}
  .mb-stat .l{margin-top:0}
  .mb-cont{padding:24px 20px}
  .mb-fab{flex-direction:column;gap:14px;padding:22px 20px 24px}
  .mb-row{gap:14px;flex-wrap:wrap;padding:16px 18px}
  .mb-row .num{width:24px}
  .mb-row .side,.mb-row .minibar{width:auto}
  .mb-nums{grid-template-columns:repeat(2,1fr);gap:10px}
  .mb-nums > div{padding:18px 16px 20px}
  .mb-tabs button{padding:12px 13px 11px;font-size:13.5px}
}

/* ============================================================
   LIVE DESK
   Ein Raum, den Fabian zu besonderen Anlaessen aufschaltet. Das
   Band steht ueber der ganzen App, die Seite selbst ist ein Lauf
   mit Zeilen und darunter das Schreibfeld.
   ============================================================ */

/* — Das Band. Reitet auf `announcements` mit, darum kein eigener Takt.
     Es ist die lauteste Flaeche der ganzen App, und das mit Absicht: eine
     offene Sitzung dauert eine Stunde, danach ist das Band wieder weg. —  */
.ld-band{display:none;align-items:center;gap:15px;
  padding:14px 48px;background:var(--live-rot);color:#fff;
  font-size:14px;line-height:1.3;cursor:pointer;
  border-bottom:1px solid rgba(0,0,0,.14);
  /* Der Schimmer wandert einmal je Runde ueber die Flaeche. Kein Blinken,
     nur so viel Bewegung, dass das Auge im Vorbeischauen haengen bleibt. */
  background-image:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.17) 46%,transparent 62%);
  background-size:230% 100%;background-repeat:no-repeat;
  animation:ldSchimmer 4.6s linear infinite}
.ld-band.an{display:flex}
@keyframes ldSchimmer{0%{background-position:170% 0}100%{background-position:-70% 0}}
/* Im dunklen Lesemodus ist --live-rot aufgehellt. Weisse Schrift kaeme darauf
   nur auf gut 3:1, dunkle auf ueber 7:1. Also dreht das Band dort um. */
body.theme-dark .ld-band{color:#15151A;
  background-image:linear-gradient(100deg,transparent 30%,rgba(0,0,0,.12) 46%,transparent 62%)}
/* Das Wort LIVE steht als eigene Marke davor, damit auf einen Blick klar ist,
   worum es geht — der Titel allein sagt das nicht. */
.ld-band .lb-tag{flex:0 0 auto;display:flex;align-items:center;gap:7px;
  font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  background:rgba(255,255,255,.2);padding:4px 10px 4px 9px;border-radius:3px}
body.theme-dark .ld-band .lb-tag{background:rgba(0,0,0,.14)}
.ld-band .lb-t{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ld-band .lb-t b{font-weight:600}
.ld-band .lb-go{flex:0 0 auto;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid currentColor;border-radius:3px;padding:5px 12px;
  transition:background .15s,color .15s}
/* Beim Darueberfahren dreht der Knopf um. Der Farbwert steht fest und nicht
   als currentColor: im dunklen Modus ist die Bandschrift dunkel, und dunkel
   auf dunkel waere unlesbar. */
.ld-band:hover .lb-go{background:#fff;color:var(--live-rot);border-color:#fff}
body.theme-dark .ld-band:hover .lb-go{background:#15151A;color:var(--live-rot);border-color:#15151A}
/* Der Puls sagt "jetzt", ohne ein Wort dafuer zu brauchen. */
.ld-puls{flex:0 0 auto;position:relative;width:9px;height:9px;border-radius:50%;background:currentColor}
.ld-puls::after{content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1px solid currentColor;opacity:.75;animation:ldPuls 1.9s ease-out infinite}
@keyframes ldPuls{0%{transform:scale(.6);opacity:.75}100%{transform:scale(1.5);opacity:0}}
@media(prefers-reduced-motion:reduce){
  .ld-puls::after{animation:none;opacity:.4}
  .ld-band{animation:none;background-image:none}
}
@media(max-width:860px){
  .ld-band{padding:12px 20px;gap:11px;font-size:13.5px}
  /* Auf 390px bliebe vom Titel sonst nichts. Das Wort LIVE steht weiter da,
     der Zusatz "DESK" faellt weg, und aus "Hinein" wird ein Pfeil. */
  .ld-band .lb-tag em{display:none}
  .ld-band .lb-go{padding:4px 9px;font-size:10.5px}
}

/* — Die grosse Tafel auf der Übersicht —
     Sie steht ganz oben, noch vor der neuesten Ausgabe: solange der Raum
     offen ist, ist er das Dringlichste auf der Seite. Ist er zu, ist die
     Tafel restlos weg — ein leerer Live-Bereich waere schlimmer als keiner. */
/* Unten 0, nicht 4px: die 4px sind frueher immer im 24px-Abstand der Karten
   darunter aufgegangen, weil Abstaende im Blockfluss ineinanderfallen. Seit
   die Uebersicht ein Flex-Blatt ist, tun sie das nicht mehr und wuerden
   sichtbar. 0 haelt den Abstand darum genau dort, wo er vorher war. */
.hd-live{display:none;margin:22px 0 0;padding:26px 28px;cursor:pointer;
  position:relative;overflow:hidden;
  background:var(--live-rot);color:#fff;border-radius:6px;
  transition:transform .16s cubic-bezier(.22,1,.36,1)}
.hd-live.an{display:block}
.hd-live:hover{transform:translateY(-2px)}
body.theme-dark .hd-live{color:#15151A}
/* Der Ring wandert langsam nach aussen. Ruhiger als ein Blinken, und er sagt
   dasselbe: hier passiert gerade etwas. */
.hd-live::before{content:"";position:absolute;top:-70px;right:-70px;
  width:230px;height:230px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.17) 0%,transparent 66%);
  animation:ldAtem 4.2s ease-in-out infinite}
@keyframes ldAtem{0%,100%{transform:scale(.88);opacity:.7}50%{transform:scale(1.1);opacity:1}}
.hd-live .hl-kick{display:flex;align-items:center;gap:9px;
  font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.hd-live h2{position:relative;margin-top:13px;font-family:var(--serif);
  font-size:30px;line-height:1.16;font-weight:400}
.hd-live .hl-sub{position:relative;margin-top:9px;font-size:14px;line-height:1.55;opacity:.9}
.hd-live .hl-go{position:relative;display:inline-flex;align-items:center;gap:9px;margin-top:20px;
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  background:#fff;color:var(--live-rot);padding:11px 20px;border-radius:4px;
  transition:gap .16s}
body.theme-dark .hd-live .hl-go{background:#15151A}
.hd-live:hover .hl-go{gap:14px}
@media(prefers-reduced-motion:reduce){
  .hd-live::before{animation:none}
  .hd-live:hover{transform:none}
}
@media(max-width:860px){
  .hd-live{margin:16px 0 2px;padding:22px 20px;border-radius:5px}
  .hd-live h2{font-size:24px}
}

/* — Der Kopf der Seite — */
.ld-kopf{padding:44px 0 22px;border-bottom:1px solid var(--line)}
.ld-kopf .ld-kick{display:flex;align-items:center;gap:9px;
  font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.ld-kopf .ld-kick.ist-live{color:var(--live-rot)}
.ld-kopf h1{margin-top:12px;font-family:var(--serif);font-size:34px;line-height:1.14;font-weight:400}
.ld-kopf .ld-sub{margin-top:10px;font-size:14px;color:var(--ink-soft);line-height:1.55}

/* — Der Lauf —
     Hier bricht der Live Desk bewusst mit dem eckigen Hausstil: der globale
     Reset setzt border-radius:0, ein Chat ohne runde Blasen fuehlt sich aber
     nicht wie ein Chat an. Der Bruch bleibt auf diesen einen Raum begrenzt. */
.ld-lauf{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  padding:20px 16px 14px;scroll-behavior:smooth;
  background:var(--paper-2);border:1px solid var(--line);
  /* Das Punktraster gibt dem Raum Tiefe, ohne je vom Text abzulenken. */
  background-image:radial-gradient(var(--line) 1px, transparent 1px);
  background-size:20px 20px;
  /* Die Hoehe setzt ldHoehe() nach visualViewport. 100vh waere auf dem
     iPhone genau dann falsch, wenn die Tastatur offen ist. */
  height:56vh;min-height:220px}
@media(prefers-reduced-motion:reduce){ .ld-lauf{scroll-behavior:auto} }

/* Eine Zeile: Avatar, Blase, Werkzeuge. Eigene Beitraege drehen die Richtung.
   Oben ausgerichtet, weil die Ecke am ersten Beitrag der Gruppe sitzt. */
.ld-z{display:flex;align-items:flex-start;gap:9px;margin-top:12px;
  animation:ldRein .34s cubic-bezier(.22,1,.36,1) both}
.ld-z:first-child{margin-top:0}
/* Folgt ein Beitrag derselben Person, ruecken die Blasen zusammen und der
   Name faellt weg. Das ist es, was einen Chat leicht lesbar macht. */
.ld-z.folgt{margin-top:3px}
.ld-z.ist-ich{flex-direction:row-reverse}
@keyframes ldRein{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){ .ld-z{animation:none} }

.lz-ava{flex:0 0 auto;width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:600;letter-spacing:.02em;color:#fff;
  background:var(--av,#6E6E67);user-select:none}
/* Bei Folgebeitraegen bleibt der Platz, das Zeichen verschwindet. Sonst
   wandern die Blasen bei jedem zweiten Beitrag um 39px hin und her. */
.ld-z.folgt .lz-ava{visibility:hidden}
/* Beim eigenen Beitrag faellt der Avatar ganz weg, nicht nur sein Zeichen:
   wer schreibt, weiss wer er ist, und auf dem Handy sind 39px viel. */
.ld-z.ist-ich .lz-ava{display:none}

/* Die Ecke sitzt am ERSTEN Beitrag einer Gruppe, nicht am letzten. Das sieht
   gleich aus, haengt aber nur am vorherigen Beitrag — darum kann der Lauf
   einfach anhaengen und muss nie eine schon gezeichnete Blase nachbessern. */
.lz-blase{position:relative;max-width:min(76%,640px);min-width:0;
  background:var(--surface);border:1px solid var(--line);
  padding:9px 13px 7px;border-radius:4px 15px 15px 15px}
.ld-z.folgt .lz-blase{border-radius:15px}
.ld-z.ist-ich .lz-blase{background:var(--letter-blau);border-color:transparent;
  color:var(--paper);border-radius:15px 4px 15px 15px}
.ld-z.ist-ich.folgt .lz-blase{border-radius:15px}
/* Fabian ist der Gastgeber, und das muss man sehen, ohne den Namen zu lesen.
   Seine Blase traegt einen blauen Balken an der Kante, einen Hauch Blau im
   Grund und den Namen in Blau. Zusammen mit dem Avatar und dem Chip sind das
   vier Merkmale — auch wer die Farbe nicht sieht, erkennt ihn am Chip.
   Das :not() ist noetig: sonst gewaenne diese spaetere Regel bei Fabians
   eigenen Beitraegen ueber das Blau von .ist-ich, die Schrift bliebe aber
   hell — weiss auf weiss, die Blase waere leer. */
.ld-z.ist-host:not(.ist-ich) .lz-blase{
  background:color-mix(in srgb, var(--letter-blau) 6%, var(--paper));
  border-color:color-mix(in srgb, var(--letter-blau) 26%, var(--line-2));
  border-left:3px solid var(--letter-blau)}
.ld-z.ist-host:not(.ist-ich) .lz-wer{--wf:var(--letter-blau)}
/* Sein Avatar traegt das Sanctis-Blau statt der ausgewuerfelten Farbe und
   einen hellen Ring, damit er auch im Vorbeiscrollen heraussticht. */
.ld-z.ist-host .lz-ava{background:var(--letter-blau);
  box-shadow:0 0 0 2px var(--paper),0 0 0 3px color-mix(in srgb, var(--letter-blau) 45%, transparent)}

.lz-wer{display:flex;align-items:center;gap:7px;margin-bottom:3px;
  font-size:12.5px;font-weight:600;color:var(--wf,var(--ink))}
.ld-chip{display:inline-flex;align-items:center;gap:4px;
  font-size:9px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  background:var(--letter-blau);color:var(--paper);padding:2px 7px;border-radius:4px}
/* Das Haekchen im Chip. Ein eigener Pfad statt eines Zeichens, damit es in
   jeder Schrift gleich aussieht. */
.ld-chip svg{flex:0 0 auto;display:block}

/* — Bilder im Chat —
     Die Hoehe steht ueber aspect-ratio schon fest, bevor das Bild da ist.
     Ohne das springt der ganze Lauf, sobald ein Bild fertig laedt, und wer
     gerade liest, verliert die Stelle.
     Die Hoehe wird nicht hier gedeckelt, sondern ueber die Breite in
     ldZeileHtml(): aspect-ratio haelt die Form, ein max-height daneben wuerde
     entweder ignoriert oder schnitte das Bild an. */
.lz-bild{display:block;width:100%;margin:0 0 7px;padding:0;border:0;
  background:color-mix(in srgb, currentColor 7%, transparent);
  border-radius:9px;overflow:hidden;cursor:zoom-in;position:relative;
  line-height:0}
.lz-bild img{display:block;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .3s}
.lz-bild img.da{opacity:1}
/* Ein Bild ohne Text darf die Blase ganz ausfuellen. Der Rahmen bleibt, aber
   das Polster faellt weg, sonst steht das Bild in einem grauen Kasten. */
.lz-blase.nur-bild{padding:5px 5px 4px}
.lz-blase.nur-bild .lz-bild{margin-bottom:0}
.lz-blase.nur-bild .lz-fuss{position:absolute;right:11px;bottom:10px;z-index:2;
  margin:0;float:none;color:#fff;background:rgba(0,0,0,.42);
  padding:3px 8px;border-radius:999px;backdrop-filter:blur(3px)}

/* Die Vorschau im Schreibfeld, bevor abgeschickt wird. */
.ld-vorschau{display:none;align-items:center;gap:11px;margin-top:10px;
  padding:7px 9px;background:var(--surface);border:1px solid var(--line);border-radius:4px}
.ld-vorschau.an{display:flex}
.ld-vorschau img{flex:0 0 auto;width:48px;height:48px;object-fit:cover;border-radius:4px;display:block}
.ld-vorschau .vs-b{flex:1 1 auto;min-width:0;font-size:12.5px;color:var(--ink-soft);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ld-vorschau .vs-b b{display:block;font-size:11px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--letter-blau);margin-bottom:2px}
.ld-vorschau .vs-x{flex:0 0 auto;font-size:16px;line-height:1;color:var(--faint);padding:3px 5px}
.ld-vorschau .vs-x:hover{color:var(--ink)}

/* Der Knopf zum Anhaengen, links neben dem Schreibfeld. */
.ld-schreiben .ld-klammer{flex:0 0 auto;width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;margin-bottom:3px;
  color:var(--faint);transition:color .15s,background .15s}
.ld-schreiben .ld-klammer:hover{color:var(--letter-blau);background:var(--surface)}

/* — Das Bild gross —
     Ein eigener Deckel statt eines Verweises auf die Datei: der Browser
     zeigte sie sonst nackt auf weissem Grund, und der Weg zurueck waere der
     Zurueck-Knopf. So bleibt man im Chat. */
/* 1400 wie der Lesemodus: darunter liegen die obere Leiste, die untere
   Navigation und die Einstellungen. Der Deckel muss über allem stehen. */
.ld-lupe{position:fixed;inset:0;z-index:1400;display:none;
  align-items:center;justify-content:center;padding:24px;
  background:rgba(12,12,14,.93);cursor:zoom-out;
  animation:ldLupeAuf .18s ease-out both}
.ld-lupe.an{display:flex}
.ld-lupe img{max-width:100%;max-height:100%;width:auto;height:auto;
  display:block;border-radius:4px;
  animation:ldLupeBild .24s cubic-bezier(.22,1,.36,1) both}
.ld-lupe .lu-x{position:absolute;top:14px;right:18px;z-index:2;
  width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.14);
  color:#fff;font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center}
.ld-lupe .lu-x:hover{background:rgba(255,255,255,.26)}
@keyframes ldLupeAuf{from{opacity:0}to{opacity:1}}
@keyframes ldLupeBild{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){ .ld-lupe,.ld-lupe img{animation:none} }
.lz-txt{font-size:15.5px;line-height:1.5;overflow-wrap:anywhere;white-space:pre-wrap}
.lz-txt a{color:inherit;text-decoration:underline;text-underline-offset:2px}
/* Zeit und Quittung schwimmen ans Ende der letzten Textzeile, wenn dort Platz
   ist. Das ist der Kniff, der Chat-Blasen kompakt haelt. */
.lz-fuss{float:right;display:flex;align-items:center;gap:4px;
  margin:6px 0 0 12px;font-size:10.5px;color:var(--faint);
  font-variant-numeric:tabular-nums;line-height:1}
.ld-z.ist-ich .lz-fuss{color:color-mix(in srgb, var(--paper) 72%, transparent)}
/* Der Aufraeumer gehoert zum Textkasten, nicht zur Blase: der Fuss steht als
   letztes Kind IM Text, sonst schwaemme er nicht in die letzte Zeile. */
.lz-txt::after{content:"";display:block;clear:both}

/* Das Zitat, wenn ein Beitrag auf einen anderen antwortet. */
.lz-zitat{display:block;width:100%;text-align:left;margin-bottom:6px;
  padding:5px 9px;border-left:2px solid currentColor;border-radius:4px;
  background:color-mix(in srgb, currentColor 8%, transparent);
  font:inherit;color:inherit;cursor:pointer;opacity:.85}
.lz-zitat:hover{opacity:1}
.lz-zitat .zi-w{display:block;font-size:11.5px;font-weight:600}
.lz-zitat .zi-t{display:block;margin-top:1px;font-size:12.5px;line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Antworten und Entfernen. Am Rechner erst beim Darueberfahren, auf dem
   Handy dauerhaft blass: dort gibt es kein Darueberfahren. */
.lz-werk{flex:0 0 auto;display:flex;gap:2px;opacity:0;transition:opacity .15s}
.ld-z:hover .lz-werk,.ld-z:focus-within .lz-werk{opacity:1}
.lz-werk button{font-size:14px;line-height:1;color:var(--faint);padding:5px 5px}
.lz-werk button:hover{color:var(--ink)}
.lz-werk .lz-weg:hover{color:var(--live-rot)}
@media(hover:none){ .lz-werk{opacity:.5} }

/* Der Sprung zum zitierten Beitrag hebt ihn kurz hervor, sonst weiss der
   Leser nicht, wo er gelandet ist. */
.ld-z.blitzt .lz-blase{animation:ldBlitz 1.6s ease-out both}
@keyframes ldBlitz{0%,30%{box-shadow:0 0 0 3px var(--letter-blau)}100%{box-shadow:0 0 0 3px transparent}}
@media(prefers-reduced-motion:reduce){ .ld-z.blitzt .lz-blase{animation:none;box-shadow:0 0 0 2px var(--letter-blau)} }

/* Der Tagestrenner. */
.ld-tag{display:flex;justify-content:center;margin:20px 0 4px}
.ld-tag span{background:var(--surface);border:1px solid var(--line);
  border-radius:999px;padding:3px 13px;
  font-size:10.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-soft)}

/* "… schreibt gerade". Die Zeile steht immer da, auch leer, sonst springt
   der Lauf jedesmal um ihre Hoehe. */
.ld-tippt{min-height:19px;padding:3px 2px 0;display:flex;align-items:center;gap:7px;
  font-size:12px;color:var(--faint);opacity:0;transition:opacity .2s}
.ld-tippt.an{opacity:1}
.ld-tippt i{display:inline-block;width:5px;height:5px;border-radius:50%;background:currentColor;
  animation:ldHuepf 1.25s ease-in-out infinite}
.ld-tippt i:nth-child(2){animation-delay:.16s}
.ld-tippt i:nth-child(3){animation-delay:.32s}
@keyframes ldHuepf{0%,60%,100%{transform:none;opacity:.45}30%{transform:translateY(-4px);opacity:1}}
@media(prefers-reduced-motion:reduce){ .ld-tippt i{animation:none;opacity:.6} }

/* — Das Schreibfeld —
     Tipp-Zeile, Antwort-Leiste, Feld und Zaehler stecken in einem Kasten.
     Auf dem Handy klebt der ganze Kasten unten: waere nur das Feld sticky,
     scrollte die Antwort-Leiste beim Nachlesen davon. */
.ld-unten{padding-bottom:calc(4px + env(safe-area-inset-bottom,0px));background:var(--paper)}
.ld-schreiben{display:flex;gap:9px;align-items:flex-end;padding:8px 0 4px}
.ld-schreiben textarea{flex:1 1 auto;min-width:0;resize:none;
  background:var(--surface-soft);border:1px solid var(--line-2);color:var(--ink);
  padding:11px 15px;line-height:1.5;border-radius:20px;
  /* Unter 16px zoomt iOS Safari beim Antippen hinein und laesst die Seite
     verschoben stehen. Darum ist das hier keine Geschmacksfrage. */
  font-family:inherit;font-size:16px;
  max-height:132px;overflow-y:auto;transition:border-color .15s}
.ld-schreiben textarea:focus{outline:none;border-color:var(--letter-blau)}
.ld-schreiben .ld-senden{flex:0 0 auto;width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--letter-blau);color:var(--paper);font-size:17px;line-height:1;
  transition:transform .12s, opacity .15s}
.ld-schreiben .ld-senden:active{transform:scale(.9)}
.ld-schreiben .ld-senden[disabled]{opacity:.4;cursor:default;transform:none}
.ld-zaehler{font-size:11.5px;color:var(--faint);text-align:right;padding-top:2px;font-variant-numeric:tabular-nums}
.ld-zaehler.knapp{color:var(--live-rot)}

/* Die Leiste "Antwort auf …" ueber dem Schreibfeld. */
.ld-antwort{display:none;align-items:center;gap:10px;margin-top:10px;
  padding:7px 11px;background:var(--surface);border:1px solid var(--line);
  border-left:2px solid var(--letter-blau);border-radius:4px}
.ld-antwort.an{display:flex}
.ld-antwort .aw-b{flex:1 1 auto;min-width:0}
.ld-antwort .aw-w{display:block;font-size:11.5px;font-weight:600;color:var(--letter-blau)}
.ld-antwort .aw-t{display:block;margin-top:1px;font-size:12.5px;color:var(--ink-soft);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ld-antwort .aw-x{flex:0 0 auto;font-size:16px;line-height:1;color:var(--faint);padding:3px 5px}
.ld-antwort .aw-x:hover{color:var(--ink)}

/* Der eigene Beitrag steht sofort da und wartet blass auf die Quittung.
   Das Warten auf den Server waere sonst das Einzige, was sich langsam anfuehlt. */
.ld-z.wartet .lz-blase{opacity:.62}
.ld-z.fehl .lz-blase{opacity:1;background:var(--live-rot)}
.lz-hk{display:inline-block;animation:ldHk .3s cubic-bezier(.22,1,.36,1) both}
@keyframes ldHk{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){ .lz-hk{animation:none} }

/* — Die Pille, wenn waehrend des Nachlesens Neues kommt —
     Sie sitzt absolut im Raum und nicht im Lauf: der Lauf wird bei jedem
     Nachschub neu befuellt, ein Kind darin waere jedesmal weg. */
.ld-raum{position:relative}
.ld-neu{position:absolute;left:50%;bottom:18px;z-index:4;
  background:var(--pill-bg);color:var(--pill-fg);
  font-size:12px;font-weight:600;letter-spacing:.04em;padding:9px 17px;border-radius:999px;
  box-shadow:0 8px 24px rgba(26,26,23,.22);
  animation:ldPille .26s cubic-bezier(.22,1,.36,1) both}
@keyframes ldPille{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
@media(prefers-reduced-motion:reduce){ .ld-neu{animation:none;transform:translateX(-50%)} }

/* — Die ruhigen Zustaende: geplant, zu, verborgen, gesperrt — */
.ld-tafel{padding:54px 0;border-top:1px solid var(--line);text-align:left}
.ld-tafel h2{font-family:var(--serif);font-size:24px;line-height:1.24;font-weight:400}
.ld-tafel p{margin-top:12px;font-size:15px;color:var(--ink-soft);line-height:1.6;max-width:56ch}
.ld-tafel .btn-inline{margin-top:22px}
.ld-leer{padding:34px 4px;font-size:14px;color:var(--faint);line-height:1.6}

/* — Die Liste vergangener Sitzungen — */
.ld-alt{display:flex;align-items:baseline;gap:14px;padding:15px 0;
  border-bottom:1px solid var(--line);cursor:pointer}
.ld-alt:hover .la-t{color:var(--ink)}
.ld-alt .la-t{flex:1 1 auto;min-width:0;font-family:var(--serif);font-size:18px;line-height:1.3;color:var(--ink-soft)}
.ld-alt .la-d{flex:0 0 auto;font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}

/* — Der Zustand in der Verwaltungsliste — */
.ld-zust{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.ld-zust.is-live{color:var(--live-rot)}
.ld-zust.is-geplant{color:var(--mu-gelb)}
.ld-zust.is-zu{color:var(--faint)}

@media(max-width:860px){
  .ld-kopf{padding:30px 0 18px}
  .ld-kopf h1{font-size:27px}
  /* Die untere Navigation liegt fest am Boden. Ohne diesen Abstand verdeckt
     sie den Senden-Knopf. */
  .ld-unten{position:sticky;z-index:5;
    bottom:calc(60px + env(safe-area-inset-bottom,0px));
    padding-bottom:8px}
  /* Der Lauf zieht sich auf dem Handy ueber die ganze Breite, sonst bleiben
     von 76% Blasenbreite kaum noch Zeichen pro Zeile uebrig. */
  .ld-lauf{margin:0 -20px;border-left:0;border-right:0;padding:16px 12px 12px}
  .lz-blase{max-width:82%}
  .lz-ava{width:27px;height:27px;font-size:10px}
  .ld-z{gap:7px}
}

/* ================================================================
   CONTENT ANALYTICS — nur Fabian sieht davon je ein Pixel
   ================================================================
   Kein Balkenwald und keine Farbskala. Dieselben feinen Linien, dieselbe
   Schrift und dieselben Grossbuchstaben wie im Rest der Publikation: das
   Feld soll wie die Redaktionsseite eines Blattes wirken, nicht wie ein
   Werkzeug, das jemand zugekauft hat.

   Alles hier hängt an body.is-admin. Das ist die zweite Schranke; die erste
   ist der Server, der ohne Adminkonto gar keine Zahl herausgibt. */

.ca-zeile{display:none}
body.is-admin .ca-zeile{
  display:flex;align-items:center;gap:13px;flex-wrap:wrap;
  margin-top:9px;padding-top:8px;border-top:1px dotted var(--line);
  font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-soft);font-variant-numeric:tabular-nums}
.ca-zeile b{font-weight:600;color:var(--ink);letter-spacing:.04em}
.ca-zeile .ca-leer{letter-spacing:.09em;opacity:.7}

/* Der Knopf neben "Bearbeiten" und in der Leser-Werkzeugleiste */
.ca-knopf{display:none}
body.is-admin .ca-knopf{display:inline-flex;align-items:center;gap:6px}

.ca-hinten{position:fixed;inset:0;z-index:1200;background:rgba(18,18,18,.34);
  opacity:0;pointer-events:none;transition:opacity .18s}
.ca-hinten.auf{opacity:1;pointer-events:auto}

.ca-feld{position:fixed;top:0;right:0;bottom:0;z-index:1201;
  width:min(520px,100vw);background:var(--paper);
  border-left:1px solid var(--line);
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .22s ease;
  box-shadow:-18px 0 44px rgba(18,18,18,.10)}
.ca-feld.auf{transform:none}
@media(prefers-reduced-motion:reduce){
  .ca-hinten,.ca-feld{transition:none}
}

.ca-kopf{flex:0 0 auto;padding:20px 22px 14px;border-bottom:1px solid var(--line)}
.ca-kopf .ca-oben{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.ca-marke{font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-soft)}
.ca-titel{font-family:var(--serif,inherit);font-size:19px;line-height:1.28;margin:7px 0 6px}
.ca-unter{font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-soft)}
.ca-zu{flex:0 0 auto;border:1px solid var(--line);background:none;color:var(--ink);
  width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:15px;line-height:1}
.ca-zu:hover{background:var(--paper-2)}

.ca-spannen{display:flex;gap:4px;margin-top:14px;flex-wrap:wrap}
.ca-sp{border:1px solid var(--line);background:none;color:var(--ink-soft);cursor:pointer;
  padding:5px 10px;border-radius:3px;font-size:10px;letter-spacing:.11em;
  text-transform:uppercase;font-family:inherit}
.ca-sp.an{border-color:var(--ink);color:var(--ink);background:var(--paper-2)}

.ca-leib{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:4px 22px 40px}

.ca-gruppe{padding:20px 0;border-bottom:1px solid var(--line)}
.ca-gruppe:last-child{border-bottom:0}
.ca-h{font-size:10px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 14px}

/* Die vier Kopfzahlen */
.ca-vier{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line)}
.ca-k{background:var(--paper);padding:14px 15px}
.ca-k .ca-n{font-family:var(--serif,inherit);font-size:27px;line-height:1;
  font-variant-numeric:tabular-nums}
.ca-k .ca-b{font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-soft);margin-top:7px}

/* Balken: eine Linie, kein Farbverlauf */
.ca-b-z{display:grid;grid-template-columns:52px 1fr 68px;align-items:center;
  gap:10px;padding:5px 0;font-size:11.5px;font-variant-numeric:tabular-nums}
.ca-b-n{color:var(--ink-soft);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ca-b-s{height:3px;background:var(--line);position:relative}
.ca-b-s i{position:absolute;inset:0 auto 0 0;background:var(--ink);display:block}
.ca-b-z.ist-member .ca-b-s i{background:var(--member-blau)}
.ca-b-z.ist-frei .ca-b-s i{background:var(--mu-gelb)}
.ca-b-w{text-align:right;color:var(--ink)}
.ca-b-w em{font-style:normal;color:var(--ink-soft);font-size:10px;margin-left:5px}

/* Breite Namen (Quellen, Klicks) brauchen mehr Platz als 52px. Drei Spalten
   müssen es bleiben — bei zweien fällt die Zahl unter den Balken. */
.ca-liste .ca-b-z{grid-template-columns:minmax(0,1fr) 84px 84px}
.ca-liste .ca-b-n{font-size:11px;letter-spacing:.02em;text-transform:none;
  color:var(--ink)}

.ca-leerlauf{font-size:11.5px;color:var(--ink-soft);line-height:1.6;
  border:1px dashed var(--line);padding:13px 14px}

.ca-fuss{font-size:10.5px;color:var(--ink-soft);line-height:1.65;padding:18px 0 0}

@media(max-width:700px){
  /* Auf dem Handy volle Fläche von unten, nicht ein schmaler Streifen. */
  .ca-feld{width:100vw;top:auto;height:92vh;border-left:0;
    border-top:1px solid var(--line);border-radius:12px 12px 0 0;
    transform:translateY(100%)}
  .ca-feld.auf{transform:none}
  .ca-leib{padding:4px 17px calc(50px + env(safe-area-inset-bottom,0px))}
  .ca-kopf{padding:16px 17px 12px}
  .ca-titel{font-size:17px}
  .ca-k .ca-n{font-size:23px}
}

/* =======================================================================
   RESEARCH-ARTIKEL (seit 01.10.2026)
   Gilt für jede Ausgabe im Leser, gezeichnet von renderReader().
   Alles hängt an `#reader #readerBody.ra`, damit es die älteren Regeln
   für .article, die Lesemodi und den Fokus sicher schlägt, ohne die
   Erklärungen und die Vorschau im Editor zu berühren.

   Raster:  Navigation | Artikel | Werkzeuge
            ab 1240px drei Spalten, ab 1000px zwei (ohne Werkzeuge),
            darunter eine Spalte mit der Navigation als Leiste.
   Spalten: --ra-breit ist die Artikelspalte (Charts, Tabellen, Titelbild),
            --ra-text die Lesebreite des Fliesstexts darin. Text, Titel und
            Charts teilen dieselbe linke Kante.
   Akzent:  Gelb für offen lesbares Research, Member-Blau für Member.
            Der Akzent ordnet, er färbt nie ganze Flächen.
   ======================================================================= */
#reader{--ra-oben:64px}
#reader #readerBody.ra{
  --ra-breit:820px; --ra-text:680px;
  --ra-akzent:var(--mu-gelb);
  --ra-akzent-text:color-mix(in srgb,var(--mu-gelb) 70%,var(--ink));
  max-width:1360px;margin:0 auto;padding:0 48px;counter-reset:abb}
#reader #readerBody.ra-member{--ra-akzent:var(--member-blau);--ra-akzent-text:var(--member-blau)}
/* Die Gattung schlaegt den Zugang: das Morning Briefing ist violett, auch offen. */
#reader #readerBody.ra.gk-morning{--ra-akzent:var(--morning-violett);--ra-akzent-text:var(--morning-violett)}
/* Redaktioneller Marker aus der Pipeline: nur die markierten Worte, fein
   unterlegt in der Akzentfarbe, nie ein Kasten. */
#reader #readerBody .ra-main mark.ra-mark{background:linear-gradient(transparent 62%,color-mix(in srgb,var(--ra-akzent) 22%,transparent) 62%);
  color:inherit;padding:0 .08em;border-radius:0}

/* ---- Raster ---- */
#reader #readerBody .ra-grid{display:grid;align-items:start;column-gap:56px;
  grid-template-columns:minmax(200px,1fr) minmax(0,var(--ra-breit)) minmax(200px,1fr)}
#reader #readerBody .ra-hero{grid-column:2;grid-row:1}
#reader #readerBody .ra-nav{grid-column:1;grid-row:2}
#reader #readerBody .ra-main{grid-column:2;grid-row:2;min-width:0}
#reader #readerBody .ra-tools{grid-column:3;grid-row:2}

/* ---- Kopf ---- */
#reader #readerBody .ra-hero{padding:68px 0 0;margin-bottom:60px}
#reader #readerBody .ra-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;
  font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
#reader #readerBody .ra-k-sep{padding:0 .7em;color:var(--line-2)}
#reader #readerBody .ra-zugang{padding:3px 7px;letter-spacing:.14em}
#reader #readerBody .ra-zugang.frei{background:var(--hl);color:var(--ink)}
#reader #readerBody .ra-zugang.mem{background:var(--member-blau);color:var(--paper)}
#reader #readerBody .ra-kicker .gk-morning{color:var(--morning-violett)}
#reader #readerBody .ra-titel{font-family:var(--serif);font-weight:500;font-size:clamp(38px,4.3vw,62px);
  line-height:1.05;letter-spacing:-.016em;margin:26px 0 0;max-width:17em;color:var(--ink);text-wrap:balance}
#reader #readerBody .ra-titel-2{display:block;color:var(--ink-soft);font-weight:400}
#reader #readerBody .ra-sub{margin:16px 0 0;font-family:var(--serif);font-style:italic;font-size:21px;line-height:1.4;color:var(--ink-soft);max-width:34em}
#reader #readerBody .ra-lead{margin:28px 0 0;font-family:var(--serif);font-style:normal;font-weight:400;
  font-size:calc(clamp(19px,1.55vw,22px) * var(--read-scale,1));line-height:1.5;color:var(--ink-soft);max-width:var(--ra-text);text-wrap:pretty}
#reader #readerBody .ra-byline{display:flex;align-items:center;gap:12px;margin-top:32px}
#reader #readerBody .ra-foto{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none;background:var(--paper-2);border:1px solid var(--line)}
#reader #readerBody .ra-by-t{display:flex;flex-direction:column;gap:2px;min-width:0;font-family:var(--sans)}
#reader #readerBody .ra-autor{font-size:14px;font-weight:600;color:var(--ink)}
#reader #readerBody a.ra-autor{text-decoration:none}
#reader #readerBody a.ra-autor:hover{text-decoration:underline;text-underline-offset:3px}
/* Hinweiszeile unter dem Artikel (raHinweisHTML, artikel_hinweis) */
#reader #readerBody .ra-hinweis{margin-top:22px;font-family:var(--sans);font-size:12px;line-height:1.6;color:var(--faint);max-width:var(--ra-text)}
#reader #readerBody .ra-hinweis a{color:var(--ink-soft);text-decoration:none}
#reader #readerBody .ra-hinweis a:hover{text-decoration:underline}
#reader #readerBody .ra-meta{font-size:13px;color:var(--ink-soft)}
#reader #readerBody .ra-meta .ra-k-sep{padding:0 .5em}
#reader #readerBody .ra-byline .art-share{margin-left:auto}
#reader #readerBody .ra-hero .cover{margin:40px 0 0}
#reader #readerBody .ra-hero .cover .ph{border:1px solid var(--line)}
#reader #readerBody .ra-hero .cover figcaption{font-family:var(--sans);font-size:12.5px;font-weight:400;letter-spacing:0;color:var(--ink-soft)}

/* ---- Kapitel-Navigation (links) ---- */
#reader #readerBody .ra-nav{justify-self:end;width:100%;max-width:220px;font-family:var(--sans);
  position:sticky;top:calc(var(--ra-oben) + 36px);max-height:calc(100vh - var(--ra-oben) - 60px);overflow-y:auto;scrollbar-width:none}
#reader #readerBody .ra-nav::-webkit-scrollbar{display:none}
#reader #readerBody .ra-nav-h{font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin:0 0 12px 15px}
#reader #readerBody .ra-nav ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--line);position:relative}
/* Lesefortschritt: die Linie der Liste füllt sich von oben, eine Spur dunkler. */
#reader #readerBody .ra-nav ol::before{content:"";position:absolute;left:-1px;top:0;width:1px;height:100%;
  background:var(--ink-soft);opacity:.8;transform-origin:top;transform:scaleY(var(--ra-prog,0))}
#reader #readerBody .ra-nav-akt,#reader #readerBody .ra-nav-prog{display:none}
#reader #readerBody .ra-nav a{display:grid;grid-template-columns:24px 1fr;gap:4px;padding:6px 4px 6px 14px;margin-left:-1px;
  border-left:2px solid transparent;font-size:13px;line-height:1.38;color:var(--faint);text-decoration:none;
  transition:color .18s ease,border-color .18s ease}
#reader #readerBody .ra-nav-t{min-width:0;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
#reader #readerBody .ra-nav-n{font-size:11.5px;font-variant-numeric:tabular-nums;padding-top:1px}
#reader #readerBody .ra-nav a:hover{color:var(--ink-soft)}
#reader #readerBody .ra-nav a.on{color:var(--ink);border-left-color:var(--ra-akzent);position:relative;z-index:1}
#reader #readerBody .ra-nav a.on .ra-nav-n{color:var(--ra-akzent-text)}
#reader #readerBody .ra-nav a:focus-visible{outline:2px solid var(--ra-akzent);outline-offset:1px}

/* ---- Werkzeuge (rechts) ----
   Symbol und Wort, keine Linie, keine Flächen: sie sollen nicht wie ein
   zweites Inhaltsverzeichnis aussehen. Nur die Werkzeuge kleben, der
   Member-Hinweis darunter tritt am Artikelende zurück. */
#reader #readerBody .ra-tools{justify-self:start;width:100%;max-width:200px;font-family:var(--sans);align-self:stretch}
#reader #readerBody .ra-tools-kleb{position:sticky;top:calc(var(--ra-oben) + 36px);padding-top:24px}
#reader #readerBody .ra-tools ul{list-style:none;margin:0;padding:0}
#reader #readerBody .ra-tool{display:flex;align-items:center;gap:11px;width:100%;min-height:36px;text-align:left;padding:6px 8px;margin-left:-8px;
  background:none;border:0;border-radius:4px;cursor:pointer;font:inherit;font-size:13.5px;font-weight:500;letter-spacing:0;color:var(--ink-soft);transition:color .15s}
#reader #readerBody .ra-tool .ra-ic{width:17px;height:17px;flex:none;color:var(--faint);transition:color .15s}
#reader #readerBody .ra-tool:hover,#reader #readerBody .ra-tool[aria-expanded="true"]{color:var(--ink)}
#reader #readerBody .ra-tool:hover .ra-ic,#reader #readerBody .ra-tool[aria-expanded="true"] .ra-ic{color:var(--ink)}
#reader #readerBody .ra-tool.on .ra-ic{color:var(--ra-akzent-text);fill:currentColor}
#reader #readerBody .ra-tool:focus-visible{outline:2px solid var(--ra-akzent);outline-offset:1px}
#reader #readerBody .ra-tt{margin-top:8px}
#reader #readerBody .ra-tt-l{display:block;font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin:0 0 4px}
#reader #readerBody .ra-tt-i{display:flex;flex-wrap:wrap;align-items:center;margin-left:-11px}
#reader #readerBody .ra-tt-i .ra-ib{width:38px;height:38px}
#reader #readerBody .ra-tt-i .ra-ib .ra-ic{width:17px;height:17px}
#reader #readerBody .ra-tt-i .ra-ab-st{flex-basis:100%;padding-left:11px;font-size:12px;color:var(--ink-soft)}
#reader #readerBody .ra-tt-i .ra-ab-st:empty{display:none}
#reader #readerBody .ra-tools .ca-knopf{display:none}
body.is-admin #reader #readerBody .ra-tools .ca-knopf{display:list-item}
#reader #readerBody .ra-tools-pitch{margin-top:30px;padding-top:22px;border-top:1px solid var(--line);font-size:13px;line-height:1.5;color:var(--ink-soft);
  transition:opacity .3s ease,visibility .3s}
#reader #readerBody .ra-tools-pitch.weg{opacity:0;visibility:hidden}
#reader #readerBody .ra-tp-k{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:10px}
#reader #readerBody .ra-tools-pitch p{margin:0 0 8px}
#reader #readerBody .ra-tools-pitch .ra-tp-t{font-family:var(--serif);font-weight:600;font-size:22px;line-height:1.12;letter-spacing:-.01em;color:var(--ink);margin-bottom:10px}
#reader #readerBody .ra-tools-pitch a{display:inline-block;margin-top:6px;font-size:13.5px;font-weight:700;color:var(--member-blau);text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:3px}
#reader #readerBody .ra-tools-pitch a:focus-visible{outline:2px solid var(--member-blau);outline-offset:3px}

/* ---- Symbolknöpfe (Byline, Abschluss) ---- */
#reader #readerBody .ra-ib{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;
  background:none;color:var(--ink-soft);cursor:pointer;transition:color .15s,background-color .15s}
#reader #readerBody .ra-ib .ra-ic{width:18px;height:18px}
#reader #readerBody .ra-ib:hover,#reader #readerBody .ra-ib[aria-expanded="true"]{color:var(--ink);background:color-mix(in srgb,var(--ink) 6%,transparent)}
#reader #readerBody .ra-ib:focus-visible{outline:2px solid var(--ra-akzent);outline-offset:2px}
#reader #readerBody .ra-ib.on .ra-ic{color:var(--ra-akzent-text);fill:currentColor}
#reader #readerBody .ra-ib.ok{color:var(--ink)}
#reader #readerBody .ra-ib.ca-knopf{display:none}
body.is-admin #reader #readerBody .ra-ib.ca-knopf{display:inline-flex}
#reader #readerBody .ra-by-tools{margin-left:auto;display:flex;gap:2px;margin-right:-8px}

/* ---- Lesespalte ---- */
#reader #readerBody .ra-main .prose p,
#reader #readerBody .ra-main .article-intro p{font-size:calc(19px * var(--read-scale,1));line-height:1.7;
  color:color-mix(in srgb,var(--ink) 86%,var(--paper));margin-top:1.15em;max-width:var(--ra-text)}
#reader #readerBody .ra-main .article-intro{margin-top:0}
#reader #readerBody .ra-main .article-intro p:first-child{margin-top:0}
#reader #readerBody .ra-main .article-intro p:first-child{font-size:calc(20.5px * var(--read-scale,1));line-height:1.66}
#reader #readerBody .ra-main .prose p strong{color:var(--ink);font-weight:600}
#reader #readerBody .ra-main .prose ul,#reader #readerBody .ra-main .prose ol{max-width:var(--ra-text);margin:1.05em 0 0 1.2em;
  font-size:calc(19px * var(--read-scale,1));line-height:1.65;color:color-mix(in srgb,var(--ink) 86%,var(--paper))}
#reader #readerBody .ra-main .prose li+li{margin-top:.4em}
/* Der Zeitungsmodus behält seine Serifenschrift, aber nicht den Blocksatz:
   auf schmalen Spalten reisst Blocksatz Löcher in die Zeilen. */
body.theme-news #reader #readerBody .ra-main .prose p,
body.theme-news #reader #readerBody .ra-main .article-intro p{line-height:1.66;color:#1b1a14;text-align:left}

/* Kapitel: Nummer und Stichwort klein über der Überschrift, kein Strich,
   keine Hintergrundziffer. */
#reader #readerBody .ra-main .chapter{margin-top:104px;scroll-margin-top:calc(var(--ra-oben) + 24px)}
#reader #readerBody .ra-main .article-intro + .chapter,
#reader #readerBody .ra-main > .chapter:first-child{margin-top:80px}
#reader #readerBody .ra-main .chapter-head{display:flex;align-items:baseline;gap:12px;margin:0 0 16px;max-width:var(--ra-text)}
#reader #readerBody .ra-main .chapter-head .rule{display:none}
#reader #readerBody .ra-main .chapter-head .cn{font-family:var(--sans);font-style:normal;font-size:12px;font-weight:700;
  letter-spacing:.06em;color:var(--ra-akzent-text);font-variant-numeric:tabular-nums}
#reader #readerBody .ra-main .chapter-head .cl{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft);white-space:normal;font-variant:normal}
#reader #readerBody .ra-main .chapter h3,
#reader #readerBody .ra-main .fazit h3,
#reader #readerBody .ra-main h2.ch-h{font-size:clamp(27px,2.5vw,35px);line-height:1.16;letter-spacing:-.014em;
  max-width:var(--ra-text);margin:0 0 14px;color:var(--ink);text-wrap:balance}
#reader #readerBody .ra-main h3:focus,#reader #readerBody .ra-main h2.ch-h:focus{outline:none}
#reader #readerBody .ra-main h3:focus-visible,#reader #readerBody .ra-main h2.ch-h:focus-visible{outline:2px solid var(--ra-akzent);outline-offset:4px}
#reader #readerBody .ra-main .fazit{margin-top:96px;border-top:0;padding-top:0;scroll-margin-top:calc(var(--ra-oben) + 24px)}
#reader #readerBody .ra-main .fazit-head{display:flex;gap:12px;margin:0 0 14px;max-width:var(--ra-text);
  border-top:2px solid var(--ink);padding-top:16px}
#reader #readerBody .ra-main .fazit-head .rule{display:none}
#reader #readerBody .ra-main .fazit-head .label{color:var(--ink);letter-spacing:.16em}
#reader #readerBody .ra-main .sec-divider{max-width:var(--ra-text);margin-top:96px}

/* Pullquote: ein Satz, eine Zeile Luft davor und danach. */
#reader #readerBody .ra-main .pull{font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:calc(clamp(22px,2vw,27px) * var(--read-scale,1));line-height:1.36;color:var(--ink);
  margin:48px 0;padding:0;border:0;max-width:24em;text-wrap:balance}
#reader #readerBody .ra-main .pull::before{content:"";display:block;width:36px;height:2px;background:var(--ra-akzent);margin-bottom:18px}

/* Merkkästen: sparsam und ruhig. */
#reader #readerBody .ra-main .cx{max-width:var(--ra-text);margin:40px 0;border-left-width:2px;border-left-color:var(--line-2);padding-left:22px}
#reader #readerBody .ra-main .cx .cx-k{color:var(--ink-soft)}
#reader #readerBody .ra-main .cx.cx-achtung{border-left-color:var(--red)}
#reader #readerBody .ra-main .cx.cx-zahl{border-left-color:var(--ra-akzent)}
#reader #readerBody .ra-main .cx.cx-zahl .cx-k{color:var(--ra-akzent-text)}

/* Grosse Zahl im Text (!kennzahl). */
#reader #readerBody .ra-zahl{margin:52px 0;max-width:var(--ra-text)}
#reader #readerBody .ra-zahl-v{display:inline-block;padding-top:16px;border-top:2px solid var(--ra-akzent);
  font-family:var(--serif);font-weight:500;font-size:calc(clamp(46px,5.6vw,76px) * var(--read-scale,1));line-height:.98;
  letter-spacing:-.02em;text-transform:uppercase;color:var(--ink);font-variant-numeric:lining-nums tabular-nums}
#reader #readerBody .ra-zahl-t{margin-top:12px;font-family:var(--sans);font-size:calc(16.5px * var(--read-scale,1));line-height:1.5;color:var(--ink-soft);max-width:34em}

/* ---- Abbildungen ----
   Breiter als der Text (volle Artikelspalte). Die Nummer zählt das CSS. */
#reader #readerBody .ra-main .chart-ph{margin:60px 0;max-width:100%;counter-increment:abb;background:none;border:0;border-radius:0;box-shadow:none;padding:0}
#reader #readerBody .ra-main .chart-ph .ph{border:1px solid var(--line)}
#reader #readerBody .ra-main .fig-kopf{display:flex;flex-direction:column;gap:6px;margin:0 0 16px;max-width:var(--ra-text)}
#reader #readerBody .ra-main .fig-label{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ra-akzent-text)}
#reader #readerBody .ra-main .fig-label::before{content:"Abbildung " counter(abb,decimal-leading-zero)}
#reader #readerBody .ra-main .fig-label-x::before{content:"·";padding:0 .7em;color:var(--line-2)}
#reader #readerBody .ra-main .fig-titel{font-family:var(--serif);font-size:23px;line-height:1.25;color:var(--ink);text-wrap:balance}
#reader #readerBody .ra-main .fig-text{font-family:var(--sans);font-size:15.5px;line-height:1.5;color:var(--ink-soft)}
#reader #readerBody .ra-main .chart-ph figcaption{margin-top:14px;max-width:var(--ra-text);
  font-family:var(--sans);font-size:14px;font-weight:400;letter-spacing:0;line-height:1.55;color:var(--ink-soft)}
#reader #readerBody .ra-main .chart-ph .ph{border-radius:0;box-shadow:none}
#reader #readerBody .ra-main .fig-quelle{display:block;margin-top:6px;font-size:12px;color:var(--faint)}
#reader #readerBody .ra-main .fig-schmal{display:none}

/* ---- Tabellen ----
   Berichte bringen ihre Tabellen mit eigenem Satz mit. Hier nur die Hülle,
   die auf dem Telefon seitlich scrollt, und ein Satz für Tabellen ohne
   eigene Auszeichnung. */
#reader #readerBody .ra-tab-huelle{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
#reader #readerBody .ra-tab-huelle:focus-visible{outline:2px solid var(--ra-akzent);outline-offset:4px}
#reader #readerBody .ra-tab-huelle.ra-tab-mehr{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
#reader #readerBody .ra-tab{margin:40px 0}
#reader #readerBody .ra-tab table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:15px;font-variant-numeric:tabular-nums}
#reader #readerBody .ra-tab table:not([style]) th{text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);padding:10px 18px 10px 0;border-top:1.5px solid var(--ink);border-bottom:1px solid var(--ink);white-space:nowrap}
#reader #readerBody .ra-tab table:not([style]) td{padding:12px 18px 12px 0;border-bottom:1px solid var(--line);color:var(--ink);vertical-align:top}

/* ---- Artikelende ---- */
#reader #readerBody .ra-main .letter-pitch{max-width:var(--ra-text);margin:72px 0 0;padding:44px 0;background:none;
  border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0}
#reader #readerBody .ra-main .letter-embed{max-width:var(--ra-text);margin-left:0}
#reader #readerBody .ra-abschluss{max-width:var(--ra-text);margin:64px 0 0;padding-top:20px;border-top:1px solid var(--line);font-family:var(--sans)}
#reader #readerBody .ra-ab-kopf{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;font-size:12.5px;color:var(--ink-soft)}
#reader #readerBody .ra-ende{display:inline-block;font-size:14px;line-height:1;color:var(--ra-akzent)}
#reader #readerBody .ra-ab-t{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
#reader #readerBody .ra-ab-zeile{display:flex;align-items:center;flex-wrap:wrap;gap:10px 24px;margin-top:16px}
#reader #readerBody .ra-ab-knopf{display:inline-flex;align-items:center;gap:9px;min-height:40px;padding:0 2px;background:none;border:0;cursor:pointer;
  font:inherit;font-size:13.5px;font-weight:500;color:var(--ink-soft);transition:color .15s}
#reader #readerBody .ra-ab-knopf .ra-ic{width:17px;height:17px;color:var(--faint)}
#reader #readerBody .ra-ab-knopf:hover,#reader #readerBody .ra-ab-knopf:hover .ra-ic{color:var(--ink)}
#reader #readerBody .ra-ab-knopf.on .ra-ic{color:var(--ra-akzent-text);fill:currentColor}
#reader #readerBody .ra-ab-knopf:focus-visible{outline:2px solid var(--ra-akzent);outline-offset:2px}
#reader #readerBody .ra-ab-teilen{display:flex;align-items:center;flex-wrap:wrap;gap:0}
#reader #readerBody .ra-ab-l{font-size:13.5px;font-weight:500;color:var(--ink-soft);margin-right:4px}
#reader #readerBody .ra-ab-st{font-size:12.5px;color:var(--ink-soft);margin-left:6px;min-width:1px}
#reader #readerBody.ra-ue-da .ra-main .letter-pitch{display:none}
/* Member haben, was der eingebettete Angebotsblock verkauft. Ohne diese Zeile
   sah ein zahlender Member unter Berichten und Marktupdates "Den Letter
   ansehen" oder sogar einen alten Stripe-Zahllink mit 34.90. Der Inhalt bleibt
   unberührt, nur die Anzeige fällt weg. Der Admin sieht ihn weiter. */
body.is-member #readerBody .letter-pitch{display:none}
#reader #readerBody .ra-uebergang{max-width:var(--ra-text);margin:72px 0 0;padding:52px 0 8px;border-top:3px solid var(--line-2)}
#reader #readerBody .ra-uebergang .ra-tp-k{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:18px}
#reader #readerBody .ra-ue-t{font-family:var(--serif);font-weight:600;font-size:clamp(40px,4.4vw,58px);line-height:1.02;letter-spacing:-.022em;color:var(--ink);text-wrap:balance;margin:0}
#reader #readerBody .ra-uebergang p{margin:0;font-family:var(--sans);font-size:18px;line-height:1.6;color:var(--ink-soft);max-width:30em}
/* Text links, das Bild des Letters rechts: drei Ausgaben im Umschlag, wie im
   bisherigen Pitch. Leicht gedreht und mit Schatten, als läge es auf dem Tisch. */
#reader #readerBody .ra-ue-zeile{display:grid;grid-template-columns:minmax(0,1fr) 248px;gap:40px;align-items:center;margin-top:26px}
#reader #readerBody .ra-ue-bild{display:block;line-height:0;transform:rotate(2deg);transition:transform .35s ease}
#reader #readerBody .ra-ue-bild img{width:100%;height:auto;border:6px solid var(--paper);outline:1px solid var(--line-2);
  box-shadow:0 18px 34px -16px rgba(20,18,12,.45),0 2px 6px rgba(20,18,12,.12)}
#reader #readerBody .ra-uebergang:hover .ra-ue-bild{transform:rotate(0deg) translateY(-3px)}
#reader #readerBody .ra-ue-a{display:inline-block;position:relative;margin-top:30px;padding-bottom:12px;font-family:var(--sans);font-size:18px;font-weight:700;letter-spacing:0;
  color:var(--member-blau);text-decoration:none;border:0;transition:color .15s}
#reader #readerBody .ra-ue-a::after{content:"";position:absolute;left:0;bottom:0;width:52%;height:2px;background:currentColor;transition:width .25s ease}
#reader #readerBody .ra-ue-a:hover::after{width:100%}
#reader #readerBody .ra-ue-a span{display:inline-block;transition:transform .2s ease}
#reader #readerBody .ra-ue-a:hover span{transform:translateX(4px)}
#reader #readerBody .ra-ue-a:focus-visible{outline:2px solid var(--member-blau);outline-offset:3px}
/* Geld-zurueck-Garantie unter Pitch und Bezahlschranke, gleiche Zeile wie in der Kasse. */
p.garantie-zeile,#reader #readerBody p.garantie-zeile{font-family:var(--sans);display:inline-flex;align-items:center;gap:9px;margin:16px 0 0;
  padding:8px 13px 8px 9px;border-radius:999px;font-size:13.5px;font-weight:600;line-height:1.3;
  color:var(--green);background:color-mix(in srgb,var(--green) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--green) 28%,transparent)}
p.garantie-zeile .gz-haken{display:inline-grid;place-items:center;width:20px;height:20px;
  border-radius:50%;background:var(--green);color:var(--paper);font-size:12px;font-weight:700;flex:none}
#reader #readerBody .ra-uebergang p.garantie-zeile{margin:14px 0 18px}
#reader #readerBody .pw-angebot p.garantie-zeile,.pw-angebot p.garantie-zeile{display:flex;width:fit-content;margin:16px auto 0}
#reader #readerBody .ra-uebergang p.ra-ue-preis{margin-top:22px;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
#reader #readerBody .ra-main .artfoot{max-width:var(--ra-text);margin-top:64px}
#reader #readerBody .ra-main .notes-panel,#reader #readerBody .ra-main .preview-gate{max-width:var(--ra-text)}
#reader #readerBody .tldr-toggle{background:none;color:var(--ink);border:1px solid var(--line-2);margin:0 0 34px}
#reader #readerBody .tldr-toggle:hover{border-color:var(--ink);opacity:1}
#reader #readerBody .tldr-toggle .tt-min{border-left-color:var(--line-2)}
#reader #readerBody .tldr{max-width:var(--ra-text);margin:0 0 40px;border-color:var(--line-2);border-radius:2px;background:none}
#reader #readerBody .ra-main .explain-links{max-width:var(--ra-text)}

/* ---- Breiter Schirm: die Werkzeuge stehen rechts, nicht doppelt oben ---- */
@media(min-width:1240px){
  #reader #readerBody .ra-by-tools{display:none}
}
/* ---- Laptop klein und Tablet quer: Navigation links, keine Werkzeugspalte ---- */
@media(max-width:1239px){
  #reader #readerBody.ra{padding:0 40px}
  #reader #readerBody .ra-grid{grid-template-columns:200px minmax(0,1fr);column-gap:44px}
  #reader #readerBody .ra-tools{display:none}
  #reader #readerBody.ra-ohne-nav .ra-grid{grid-template-columns:minmax(0,1fr);max-width:var(--ra-breit);margin:0 auto}
  #reader #readerBody.ra-ohne-nav .ra-hero,#reader #readerBody.ra-ohne-nav .ra-main{grid-column:1}
}
/* ---- Tablet hoch und Telefon: eine Spalte, Navigation als Leiste ---- */
@media(max-width:999px){
  #reader #readerBody.ra{padding:0 32px}
  #reader #readerBody .ra-grid,
  #reader #readerBody.ra-ohne-nav .ra-grid{display:block;max-width:var(--ra-text);margin:0 auto}
  #reader #readerBody .ra-hero{padding-top:44px;margin-bottom:0}
  #reader #readerBody .ra-nav{position:sticky;top:var(--ra-oben);z-index:30;justify-self:auto;max-width:none;width:auto;max-height:none;overflow:visible;
    margin:36px -32px 0;background:var(--paper);border-bottom:1px solid var(--line)}
  #reader #readerBody .ra-nav-h{display:none}
  #reader #readerBody .ra-nav-akt{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:0 32px;background:none;border:0;cursor:pointer;
    font:inherit;font-size:14px;text-align:left;color:var(--ink)}
  #reader #readerBody .ra-nav-akt-n{font-size:12px;font-weight:700;color:var(--ra-akzent-text);font-variant-numeric:tabular-nums}
  #reader #readerBody .ra-nav-akt-n:empty{display:none}
  #reader #readerBody .ra-nav-akt-t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
  #reader #readerBody .ra-nav-akt .ra-ic{width:16px;height:16px;color:var(--ink-soft);transition:transform .2s ease}
  #reader #readerBody .ra-nav.offen .ra-nav-akt .ra-ic{transform:rotate(180deg)}
  #reader #readerBody .ra-nav-akt:focus-visible{outline:2px solid var(--ra-akzent);outline-offset:-3px}
  /* Fortschritt als Haarlinie am unteren Rand der Leiste. */
  #reader #readerBody .ra-nav-prog{display:block;position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ra-akzent);
    transform-origin:left;transform:scaleX(var(--ra-prog,0))}
  #reader #readerBody .ra-nav ol{display:none;position:absolute;left:0;right:0;top:100%;border-left:0;padding:8px 0 12px;
    background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 14px 24px -18px rgba(0,0,0,.25);max-height:62vh;overflow-y:auto}
  #reader #readerBody .ra-nav ol::before{display:none}
  #reader #readerBody .ra-nav.offen ol{display:block}
  #reader #readerBody .ra-nav a{grid-template-columns:30px 1fr;padding:10px 32px;margin:0;border-left:0;font-size:15px;color:var(--ink-soft)}
  #reader #readerBody .ra-nav a.on{color:var(--ink);font-weight:500}
  #reader #readerBody .ra-nav a:focus-visible{outline-offset:-3px}
  #reader #readerBody .ra-main{padding-top:44px}
  #reader #readerBody.ra-ohne-nav .ra-main{padding-top:52px}
  #reader #readerBody .ra-main .chart-ph,
  #reader #readerBody .ra-main .ra-tab-huelle{max-width:none}
}
@media(max-width:600px){
  #reader{--ra-oben:58px}
  #reader #readerBody.ra{padding:0 20px}
  #reader #readerBody .ra-hero{padding-top:30px}
  #reader #readerBody .ra-kicker{font-size:10px;letter-spacing:.13em}
  #reader #readerBody .ra-titel{font-size:clamp(31px,8.4vw,40px);line-height:1.08;margin-top:18px}
  #reader #readerBody .ra-lead{font-size:calc(18px * var(--read-scale,1));margin-top:20px;line-height:1.5}
  #reader #readerBody .ra-byline{margin-top:24px}
  #reader #readerBody .ra-foto{width:36px;height:36px}
  #reader #readerBody .ra-hero .cover{margin:28px 0 0}
  #reader #readerBody .ra-nav{margin:28px -20px 0}
  #reader #readerBody .ra-nav-akt{padding:0 20px}
  #reader #readerBody .ra-nav a{padding:11px 20px}
  #reader #readerBody .ra-by-tools .ra-ib{width:44px;height:44px}
  #reader #readerBody .ra-ab-zeile{gap:8px 18px}
  #reader #readerBody .ra-ab-teilen{width:100%;order:-1;margin-left:-10px}
  #reader #readerBody .ra-main .artfoot{margin-top:48px}
  #reader #readerBody .ra-ab-teilen .ra-ib{width:44px;height:44px}
  #reader #readerBody .ra-ab-l{display:none}
  #reader #readerBody .ra-main{padding-top:34px}
  #reader #readerBody .ra-main .prose p,
  #reader #readerBody .ra-main .article-intro p{font-size:calc(18px * var(--read-scale,1));line-height:1.62}
  #reader #readerBody .ra-main .chapter{margin-top:68px}
  #reader #readerBody .ra-main .chapter h3,
  #reader #readerBody .ra-main .fazit h3,
  #reader #readerBody .ra-main h2.ch-h{font-size:clamp(24px,6.6vw,29px)}
  #reader #readerBody .ra-main .fazit{margin-top:72px}
  #reader #readerBody .ra-main .pull{margin:38px 0;font-size:calc(21px * var(--read-scale,1))}
  /* Charts und Titelbild bleiben im Textrand (Fabian: nicht randlos). */
  #reader #readerBody .ra-main .chart-ph{margin:44px 0}
  #reader #readerBody .ra-main .chart-ph figcaption{font-size:13.5px}
  #reader #readerBody .ra-main .has-mobil .fig-breit{display:none}
  #reader #readerBody .ra-main .has-mobil .fig-schmal{display:block}
  #reader #readerBody .ra-main .ra-tab-huelle{margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px}
  /* Lieber seitlich scrollen als jede Zelle auf drei Zeilen quetschen. */
  #reader #readerBody .ra-main .ra-tab-huelle table{min-width:560px}
  #reader #readerBody .ra-zahl{margin:42px 0}
  #reader #readerBody .ra-uebergang{margin-top:56px;padding-top:40px}
  #reader #readerBody .ra-ue-t{font-size:clamp(34px,9vw,42px)}
  #reader #readerBody .ra-uebergang p{font-size:17px}
  #reader #readerBody .ra-ue-zeile{grid-template-columns:1fr;gap:0}
  #reader #readerBody .ra-ue-bild{order:-1;width:min(100%,320px);margin:4px auto 30px}
  #reader #readerBody .ra-ue-a{font-size:17px}
}

/* ---- Fokus und Druck ---- */
body.focus-mode #reader #readerBody .ra-nav,
body.focus-mode #reader #readerBody .ra-tools,
body.focus-mode #reader #readerBody .ra-by-tools,
body.focus-mode #reader #readerBody .ra-uebergang{display:none}
@media print{
  #reader #readerBody .ra-nav,#reader #readerBody .ra-tools,#reader #readerBody .ra-uebergang,#reader #readerBody .art-share,
  #reader #readerBody .ra-by-tools,#reader #readerBody .ra-ab-zeile,#raPop,#raPopHinter{display:none!important}
  #reader #readerBody.ra{padding:0;max-width:none}
  #reader #readerBody .ra-grid{display:block}
  #reader #readerBody .ra-hero{padding-top:0}
}
@media (prefers-reduced-motion: reduce){
  #reader #readerBody .ra-nav a,#reader #readerBody .ra-tools-pitch,#reader #readerBody .ra-nav-akt .ra-ic{transition:none}
}

/* ---- Leserleiste im Artikel ----
   Die drei schwebenden Knöpfe (Fokus, Aa, Drucken) und Merken/Daten der
   Leiste gibt es im Artikel nicht mehr: alles steht in der Werkzeugspalte
   rechts oder unter 1240px in der Byline. Gäste sehen die Leiste gar nicht,
   eingeloggte Leser behalten "Zurück". */
#reader .rb-tools{display:none}
body.is-guest #reader .reader-bar{border-bottom:0}
body.is-guest #reader .reader-bar-inner{display:none}
#reader.ra-hat-nav .reading-progress{display:none}

/* ---- Teilen: ein kleines Fenster am Knopf ---- */
#raPop{position:fixed;z-index:200;min-width:216px;max-width:calc(100vw - 24px);padding:8px;font-family:var(--sans);
  background:var(--paper);color:var(--ink);border:1px solid var(--line-2);border-radius:6px;box-shadow:0 10px 30px -12px rgba(0,0,0,.18)}
#raPop[hidden]{display:none}
#raPop .ra-pop-h{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);padding:6px 10px 8px}
#raPop .ra-pop-l{display:flex;flex-direction:column}
#raPop .ra-pop-i{display:flex;align-items:center;gap:12px;width:100%;min-height:38px;padding:8px 10px;background:none;border:0;border-radius:4px;
  font:inherit;font-size:14px;color:var(--ink);text-align:left;cursor:pointer}
#raPop .ra-pop-i .ra-ic{width:17px;height:17px;flex:none;color:var(--ink-soft)}
#raPop .ra-pop-i:hover,#raPop .ra-pop-i:focus-visible{background:color-mix(in srgb,var(--ink) 6%,transparent);outline:none}
#raPop .ra-pop-i:focus-visible{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--ink) 30%,transparent)}
#raPop .ra-pop-i.ok,#raPop .ra-pop-i.ok .ra-ic{color:var(--ink)}
#raPop .ca-knopf{display:none}
body.is-admin #raPop .ca-knopf{display:flex}
/* Unter 600px kommt es als Blatt von unten, mit grossen Zielen für den Daumen. */
#raPop.ist-blatt{left:0!important;right:0;top:auto!important;bottom:0;max-width:none;border-radius:14px 14px 0 0;border-width:1px 0 0;
  padding:10px 12px calc(14px + env(safe-area-inset-bottom,0px));animation:raBlatt .22s ease}
#raPop.ist-blatt .ra-pop-h{text-align:center;padding:8px 0 10px}
#raPop.ist-blatt .ra-pop-i{min-height:50px;font-size:16px;padding:10px 14px}
#raPopHinter{position:fixed;inset:0;z-index:199;background:rgba(20,18,12,.22)}
#raPopHinter[hidden]{display:none}
@keyframes raBlatt{from{transform:translateY(24px);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion: reduce){ #raPop.ist-blatt{animation:none} #reader #readerBody .ra-ue-bild{transition:none} }

/* ---- Zahlen-Marker im Member-Research: Blau statt Gelb ----
   Eine Farbe, die der Autor selbst gesetzt hat (style="--hl:..."), gilt weiter. */
#reader #readerBody.ra-member .prose .hl{--hl:color-mix(in srgb,var(--member-blau) 15%,var(--paper))}
/* ===========================================================
   MARKT (/markt)
   Der feste Bereich fuer Marktdaten. Vorerst die Ankuendigung:
   gleiche Papiertoene, gleiche Schriften, gleiche Haarlinien wie
   der Rest des Hauses, nur mit mehr Luft und groesserer Schrift.
   Bewusst kurz: Headline, ein Satz, "Bald." 
   =========================================================== */
.mk{max-width:980px;padding:96px 0 120px}

.mk-titel{font-weight:600;text-transform:uppercase;
  font-size:clamp(40px,5.4vw,76px);line-height:1;letter-spacing:-.02em}
/* Zeilenfall je Geraet: am Rechner drei Zeilen, am Telefon fuenf, damit
   jede Zeile fast die ganze Breite fuellt statt winzig zu werden. */
.mk-titel br.m{display:none}
.mk-titel em{font-style:normal;color:var(--member-blau)}

.mk-vorspann{margin-top:36px;max-width:640px}
.mk-vorspann p{font-family:var(--serif);font-size:21px;line-height:1.45;color:var(--ink-soft)}
.mk-vorspann p + p{margin-top:14px}
.mk-vorspann .mk-lead{font-size:24px;line-height:1.35;color:var(--ink-soft)}

/* ——— Schluss ——— */
.mk-schluss{margin-top:88px;padding-top:30px;border-top:1px solid var(--ink)}
.mk-bald{font-weight:600;text-transform:uppercase;font-size:clamp(64px,10vw,140px);line-height:.86;letter-spacing:-.03em}


/* Telefon: die Zeile soll fast die ganze Breite fuellen, nicht
   proportional schrumpfen. */
@media(max-width:600px){
  .mk{padding:36px 0 64px}
  .mk-titel{font-size:10vw;line-height:.98;letter-spacing:-.03em}
  .mk-titel br.d{display:none}
  .mk-titel br.m{display:inline}
  .mk-vorspann{margin-top:28px}
  .mk-vorspann .mk-lead{font-size:21px}
  .mk-schluss{margin-top:72px;padding-top:24px}
  .mk-bald{font-size:24vw}
}