/* ---------------------------------------------- Typografische Titelflaechen */
.jtitel{position:relative;overflow:hidden;background:var(--jt-grund);
  color:var(--jt-schrift);aspect-ratio:16/9;display:flex;align-items:flex-end;
  padding:clamp(18px,3.2vw,30px);isolation:isolate}
.jtitel::after{content:'';position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--grad);opacity:.85}
.jtitel .jt-zahl{position:absolute;right:clamp(16px,3vw,30px);bottom:clamp(-16px,-2vw,-8px);
  z-index:-1;font-family:var(--display);font-weight:300;font-style:italic;
  font-size:clamp(96px,19vw,168px);line-height:.78;color:var(--jt-schrift);
  opacity:.09;pointer-events:none;user-select:none}
.jtitel .jt-inhalt{display:block;max-width:72%}
.jtitel .jt-dach{display:block;font-family:var(--ui);font-size:10px;font-weight:400;
  letter-spacing:.3em;text-transform:uppercase;color:var(--jt-leise)}
.jtitel .jt-strich{display:block;width:26px;height:1px;background:var(--jt-schrift);
  opacity:.38;margin:12px 0 13px}
.jtitel .jt-titel{display:block;font-family:var(--display);font-weight:300;
  font-size:clamp(21px,2.6vw,27px);line-height:1.16;letter-spacing:.005em;
  color:var(--jt-schrift)}

/* Die grosse Fassung oben auf einer Beitragsseite */
.jtitel.gross{aspect-ratio:auto;min-height:clamp(300px,42vw,470px);
  padding:clamp(30px,5vw,58px);align-items:flex-end}
.jtitel.gross .jt-zahl{font-size:clamp(170px,28vw,330px);opacity:.075;
  right:clamp(24px,4vw,54px);bottom:clamp(-30px,-3.5vw,-16px)}
.jtitel.gross .jt-inhalt{max-width:74%}
.jtitel.gross .jt-dach{font-size:11px;letter-spacing:.34em}
.jtitel.gross .jt-strich{width:44px;margin:18px 0 20px;opacity:.45}
.jtitel.gross .jt-titel{font-size:clamp(34px,6.4vw,74px);line-height:1.05}

.card .jtitel{border-bottom:1px solid var(--line)}
.card:hover .jtitel .jt-zahl{opacity:.13}
.jtitel .jt-zahl{transition:opacity .45s ease}

@media (max-width:640px){
  .jtitel .jt-inhalt,
  .jtitel.gross .jt-inhalt{max-width:88%}
  .jtitel.gross{min-height:260px}
}
/* MEHNEH Journal. Gemeinsame Gestaltung aller Beitraege. */
@font-face{font-family:'Jost';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/jost-latin-300-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/jost-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:'Jost';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/jost-latin-ext-300-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/jost-latin-ext-400-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Jost';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/jost-cyrillic-300-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/jost-cyrillic-400-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/cormorant-garamond-latin-300-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300;font-display:swap;src:url('../fonts/cormorant-garamond-latin-300-italic.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/cormorant-garamond-latin-ext-300-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300;font-display:swap;src:url('../fonts/cormorant-garamond-latin-ext-300-italic.woff2') format('woff2');unicode-range:U+0100-02BA,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/cormorant-garamond-cyrillic-300-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300;font-display:swap;src:url('../fonts/cormorant-garamond-cyrillic-300-italic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

:root{
  --ink:#1b1b1b; --light:#faf8f5; --muted:#6b6862; --line:rgba(27,27,27,.12);
  --grad:linear-gradient(90deg,#FE7B02 0%,#FE3F21 33%,#F858BC 66%,#575ECF 100%);
  --display:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --ui:'Jost','Helvetica Neue',Arial,sans-serif;
  --pad:clamp(24px,6vw,96px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--light);color:var(--ink);
     font-family:var(--ui);font-weight:300;font-size:17px;line-height:1.75;
     -webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;height:auto}
a{color:inherit}

header.j{position:sticky;top:0;z-index:20;background:rgba(250,248,245,.94);
  backdrop-filter:blur(12px);border-bottom:1px solid rgba(27,27,27,.07);
  padding:16px var(--pad);display:flex;align-items:center;justify-content:space-between;gap:20px}
header.j .brand{font-size:14px;letter-spacing:.34em;text-decoration:none}
header.j nav{display:flex;flex-wrap:wrap;gap:24px;font-size:11px;letter-spacing:.22em;text-transform:uppercase}
@media (max-width:560px){
  header.j{gap:12px}
  header.j nav{gap:14px;font-size:10px;letter-spacing:.14em;justify-content:flex-end}
}
header.j nav a{text-decoration:none;color:var(--muted)}
header.j nav a:hover{color:var(--ink)}

.wrap{max-width:720px;margin:0 auto;padding:0 var(--pad)}
.wide{max-width:1120px;margin:0 auto;padding:0 var(--pad)}

.eyebrow{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);
  margin:0 0 18px;display:block}
article h1{font-family:var(--display);font-weight:300;line-height:1.1;letter-spacing:.01em;
  font-size:clamp(34px,6vw,64px);margin:0}
article .lead{font-family:var(--display);font-size:clamp(19px,2.4vw,26px);line-height:1.5;
  color:#3a3733;margin:0 0 clamp(30px,4vw,44px);font-style:italic}
.aufmacher{margin:clamp(24px,4vw,40px) auto 0}
/* Die Ueberschrift steht in der Titelflaeche. Fuer Suchmaschinen und
   Vorleseprogramme bleibt sie zusaetzlich als h1 im Quelltext. */
.nur-lesbar{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
article h2{font-family:var(--display);font-weight:300;font-size:clamp(24px,3.4vw,34px);
  line-height:1.2;margin:clamp(46px,6vw,66px) 0 18px}
article p{margin:0 0 22px}
article ul{margin:0 0 26px;padding:0;list-style:none}
article ul li{position:relative;padding-left:26px;margin-bottom:12px}
article ul li::before{content:'';position:absolute;left:2px;top:14px;width:10px;height:1px;
  background:var(--ink);opacity:.55}
blockquote{margin:clamp(38px,5vw,52px) 0;padding:0 0 0 26px;border-left:2px solid transparent;
  border-image:var(--grad) 1;font-family:var(--display);font-style:italic;
  font-size:clamp(21px,2.8vw,28px);line-height:1.35;color:var(--ink)}
.note{margin:34px 0;padding:22px 24px;background:#f2efea;border:1px solid var(--line);
  font-size:15px;line-height:1.7;color:#43403b}
.meta-line{margin:34px 0 0;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
hr.rule{width:64px;height:2px;background:var(--grad);border:0;margin:clamp(48px,7vw,80px) auto}

/* Uebersicht */
.j-head{padding:clamp(70px,10vw,130px) 0 clamp(30px,5vw,50px);text-align:center}
.j-head h1{font-family:var(--display);font-weight:300;font-size:clamp(34px,6vw,62px);margin:0}
.j-head p{color:var(--muted);max-width:52ch;margin:22px auto 0}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:clamp(28px,4vw,48px);padding-bottom:clamp(70px,10vw,120px)}
.card{display:block;text-decoration:none;border:1px solid var(--line);background:#fff;
  transition:transform .35s ease,box-shadow .35s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 20px 50px rgba(0,0,0,.07)}
.card .body{padding:26px 26px 30px}
.card .dach{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
.card h2{font-family:var(--display);font-weight:300;font-size:24px;line-height:1.25;margin:12px 0 10px}
.card p{margin:0;font-size:15px;color:var(--muted);line-height:1.7}
.card .more{margin-top:18px;font-size:11px;letter-spacing:.22em;text-transform:uppercase}

/* Abschluss */
.j-cta{background:#0e0d0c;color:#e8e4dd;text-align:center;padding:clamp(60px,8vw,110px) var(--pad);margin-top:clamp(50px,7vw,90px)}
.j-cta h2{font-family:var(--display);font-weight:300;font-size:clamp(26px,4vw,42px);margin:0 0 18px}
.j-cta p{color:#b9b2a6;max-width:46ch;margin:0 auto 30px}
.j-cta a.btn{display:inline-block;border:1px solid #e8e4dd;color:#e8e4dd;padding:16px 34px;
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;text-decoration:none;
  transition:background .35s ease,color .35s ease}
.j-cta a.btn:hover{background:#e8e4dd;color:#0e0d0c}

/* Dieselbe Fussleiste wie auf der Startseite, damit alle Seiten gleich enden. */
footer.j{padding:clamp(56px,8vw,96px) var(--pad);text-align:center;
  border-top:1px solid rgba(27,27,27,.07)}
footer.j .wordmark-sm{font-family:var(--display);font-weight:300;
  font-size:clamp(26px,4vw,40px);letter-spacing:.16em}
footer.j .claim{display:block;margin-top:10px;font-size:11px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--muted)}
footer.j .grad-line{height:2px;width:120px;background:var(--grad);margin:34px auto}
footer.j .meta{margin:0;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted)}
footer.j .meta a{text-decoration:none;border-bottom:1px solid var(--line)}
footer.j .meta a:hover{color:var(--ink)}