/* Stiftung ex oriente – neues Design (03.11.2026), Stil nach "Structured – Renaissance gallery on putty paper"
   (styles.refero.design): warmes Kittgrau und Knochenweiß als Flächen, Schwarz als einzige Gegenfarbe, große
   Serifen-Überschriften (Playfair Display, lokal) mit enger Laufweite, sachliche Grotesk (Inter) für Text, harte
   Wechsel zwischen hellen und schwarzen Abschnitten, Haarlinien, keine Schatten, Knöpfe als Pillen.
   Statt Ölgemälden tragen die Tuschelandschaften das Bild; Farbe gibt es nur im Siegel des Logos und im roten
   Pinselstrich aus hero-effekt.css. footer.css bleibt eingebunden und wird hier überschrieben (hell, ohne Landschaft). */

@font-face { font-family: "ST Serif"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("fonts/playfair-display-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "ST Serif"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("fonts/playfair-display-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "ST Serif"; font-style: italic; font-weight: 400 900; font-display: swap;
  src: url("fonts/playfair-display-latin-wght-italic.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "ST Serif"; font-style: italic; font-weight: 400 900; font-display: swap;
  src: url("fonts/playfair-display-latin-ext-wght-italic.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "ST Sans"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "ST Sans"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
  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; }

:root {
  --st-putty: #c4c3b6;     /* Galeriewand: Kopfbereiche */
  --st-bone: #e9e7e3;      /* Lesefläche */
  --st-chalk: #f2f1ee;     /* Karten, Fußbereich */
  --st-vellum: #cfccc4;    /* Haarlinien auf Knochenweiß */
  --st-graphite: #595855;  /* Nebentext */
  --st-ink: #111110;       /* Text, schwarze Räume */
  --st-text: #2b2a28;
  --st-wide: 1240px;
  --st-read: 780px;
  --st-pad: 24px;
  --st-serif: "ST Serif", "Playfair Display", Georgia, "Songti SC", serif;
  --st-sans: "ST Sans", Inter, "Helvetica Neue", system-ui, -apple-system, sans-serif;
}

/* ---------- Grundlage ---------- */
html, body, .body-bg { background: var(--st-bone) !important; }
body { font-family: var(--st-sans) !important; font-size: 16.5px; line-height: 1.65; color: var(--st-text); -webkit-font-smoothing: antialiased; }
h1, h2, h3, .h1, .h2, .h3 { font-family: var(--st-serif); font-weight: 400; color: var(--st-ink); letter-spacing: -.012em; }
h1, .h1 { font-size: clamp(2.6rem, 1.6rem + 4vw, 5.6rem); line-height: 1; letter-spacing: -.03em; }
h2, .h2 { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 3.1rem); line-height: 1.08; letter-spacing: -.02em; }
h3, .h3 { font-size: clamp(1.4rem, 1.2rem + .7vw, 1.9rem); line-height: 1.2; }
h4, h5 { font-family: var(--st-sans); font-weight: 600; color: var(--st-ink); }
h1 i, h2 i, h3 i { font-style: italic; }
strong, b { font-weight: 600; color: var(--st-ink); }
::selection { background: var(--st-ink); color: var(--st-bone); }
.text-justify { text-align: left !important; }
.st-hide { display: none !important; }

.frame { --frame-color: var(--st-text); --frame-link-color: var(--st-ink); --frame-link-hover-color: var(--st-ink); }
.body-bg a:not(.st-btn):not(.nav-link):not(.btn) { color: var(--st-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.body-bg a:not(.st-btn):not(.nav-link):not(.btn):hover { text-decoration-thickness: 2px; }

.st-label { display: block; font-family: var(--st-sans); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--st-graphite); margin: 0 0 1.1rem; }

/* Knöpfe: Pillen */
.st-btn, .body-bg .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 46px; padding: .6rem 1.35rem;
  border-radius: 29px; border: 1px solid var(--st-ink);
  background: var(--st-ink) !important; color: var(--st-bone) !important;
  font-family: var(--st-sans); font-size: 14.5px; font-weight: 500; line-height: 1.2;
  text-decoration: none !important; box-shadow: none !important;
  transition: background-color .2s ease, color .2s ease;
}
.st-btn:hover, .body-bg .btn:hover { background: transparent !important; color: var(--st-ink) !important; }
.st-btn--line { background: transparent !important; color: var(--st-ink) !important; }
.st-btn--line:hover { background: var(--st-ink) !important; color: var(--st-bone) !important; }
.st-btn--inv { background: var(--st-bone) !important; color: var(--st-ink) !important; border-color: var(--st-bone); }
.st-btn--inv:hover { background: transparent !important; color: var(--st-bone) !important; }
.st-btns { display: flex; flex-wrap: wrap; gap: 10px; }

.body-bg .frame-container-default { max-width: calc(var(--st-wide) + 2 * var(--st-pad)); padding-left: var(--st-pad); padding-right: var(--st-pad); }
main .frame { padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: 0; }
main .frame-type-div { display: none; }
main p, main li { max-width: 72ch; }
main hr { border: 0; border-top: 1px solid var(--st-vellum); opacity: 1; }

/* ---------- Kopf ---------- */
#page-header.navbar {
  background: rgba(233, 231, 227, .97) !important;
  border-bottom: 1px solid var(--st-vellum);
  box-shadow: none !important;
  padding-top: .5rem; padding-bottom: .5rem;
}
#page-header .navbar-brand { padding: 0; height: auto; }
#page-header .navbar-brand img { height: 58px; width: auto; max-height: none; }
#page-header .nav-link::before, #page-header .nav-link::after { display: none !important; }
#page-header .nav-link-main {
  font-family: var(--st-sans) !important; font-size: 15px; font-weight: 450;
  color: var(--st-ink) !important; padding: .5rem .85rem !important;
  text-decoration: none; background-image: linear-gradient(var(--st-ink), var(--st-ink)); background-repeat: no-repeat; background-position: .85rem calc(100% - .35rem); background-size: 0 1px;
  transition: background-size .25s ease;
}
#page-header .nav-link-main:hover { background-size: calc(100% - 1.7rem) 1px; }
#page-header .nav-link-main[aria-current="true"] { background-size: calc(100% - 1.7rem) 1px; }
#page-header .nav-link-main.active[aria-current="false"] { background-size: 0 1px; }
#page-header .nav-link-main.st-navcta { border: 1px solid var(--st-ink); border-radius: 29px; margin-left: .4rem; background-image: none; padding: .45rem 1.1rem !important; }
#page-header .nav-link-main.st-navcta:hover, #page-header .nav-link-main.st-navcta[aria-current="true"] { background: var(--st-ink); color: var(--st-bone) !important; }
@media (min-width: 992px) { #page-header .navbar-collapse { justify-content: flex-end; } #page-header .navbar-nav { align-items: center; } }
@media (max-width: 991.98px) {
  #page-header .navbar-brand img { height: 46px; }
  #page-header .navbar-toggler { border: 1px solid var(--st-ink); border-radius: 29px; padding: .4rem .75rem; }
  #page-header .navbar-collapse { padding: .5rem 0 1rem; }
  #page-header .nav-link-main.st-navcta { display: inline-block; margin: .5rem 0 0; }
}

/* ---------- Kopfbereich jeder Seite (Text mit Tuschelandschaft) ---------- */
.body-bg > .frame.frame-has-backgroundimage {
  background: var(--st-putty) !important;
  padding: clamp(3.5rem, 8vw, 7rem) 0 clamp(3rem, 6vw, 5rem) !important;
  border-bottom: 1px solid #aeac9f;
  overflow: hidden;
}
.body-bg > .frame.frame-has-backgroundimage .frame-backgroundimage { mix-blend-mode: multiply; opacity: .2 !important; filter: grayscale(1); }
.body-bg > .frame.frame-has-backgroundimage h1 { margin-bottom: 2.2rem !important; max-width: 16ch; }
.body-bg > .frame.frame-has-backgroundimage h1 br { display: none; }
.body-bg > .frame.frame-has-backgroundimage .frame-inner > p,
.body-bg > .frame.frame-has-backgroundimage .frame-inner > ul { font-size: 17px; line-height: 1.7; color: var(--st-text); }
.st-cols { columns: 2 340px; column-gap: 3.5rem; column-rule: 1px solid #aeac9f; }
.st-cols > * { break-inside: avoid; }
.st-cols p { max-width: none; }
.st-sign { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid #aeac9f; max-width: 320px; }
.st-sign strong { font-family: var(--st-serif); font-weight: 400; font-size: 1.35rem; display: block; }

/* ---------- Schwarzer Raum: aktueller Jour Fixe ---------- */
.st-room { background: var(--st-ink) !important; color: rgba(233, 231, 227, .82); padding: clamp(3.5rem, 8vw, 6.5rem) 0 !important; margin-top: clamp(3rem, 6vw, 5rem); }
.st-room h2, .st-room h3, .st-room strong { color: var(--st-bone) !important; }
.st-room a:not(.st-btn) { color: var(--st-bone) !important; }
.st-room .st-label { color: rgba(233, 231, 227, .6); }
.st-room .textpic { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.st-room .textpic-gallery, .st-room .textpic-text { width: auto !important; max-width: none !important; float: none !important; margin: 0 !important; padding: 0 !important; }
.st-room .textpic-gallery { position: sticky; top: 2rem; }
.st-room .textpic-gallery img { border-radius: 9px; width: 100%; height: auto; }
.st-room .frame-header h2 { font-size: clamp(1.1rem, 1rem + .3vw, 1.3rem); font-family: var(--st-sans); font-weight: 500; letter-spacing: .02em; margin-bottom: 1.2rem !important; color: rgba(233, 231, 227, .7) !important; }
.st-room .st-note { display: inline-block; font-family: var(--st-sans); font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--st-ink) !important; background: var(--st-bone); border-radius: 29px; padding: .45rem 1rem; margin: 0 0 1.4rem !important; letter-spacing: 0; }
.st-room .st-title { font-size: clamp(1.9rem, 1.3rem + 2vw, 3rem); line-height: 1.1; margin: 0 0 1.4rem !important; }
.st-room .st-title strong { font-weight: 400; }
.st-room p { max-width: 62ch; }

/* ---------- Spalten (z. B. Konfuzius-Institut) ---------- */
main .section-row { row-gap: 16px; }
main .section-column > .frame { background: var(--st-chalk); border: 1px solid var(--st-vellum); border-radius: 9px; padding: clamp(1.4rem, 3vw, 2rem) !important; margin-bottom: 16px; }
main .section-column > .frame .frame-container { padding: 0 !important; }
main .section-column h2 { font-size: clamp(1.5rem, 1.3rem + .6vw, 1.9rem); }

/* ---------- Spenden-Band (schwarz) vor dem Fußbereich ---------- */
.st-give { background: var(--st-ink); color: rgba(233, 231, 227, .82); }
.st-give-inner { max-width: calc(var(--st-wide) + 2 * var(--st-pad)); margin: 0 auto; padding: clamp(3.5rem, 8vw, 6rem) var(--st-pad); display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 2rem 4rem; align-items: end; }
.st-give h2 { color: var(--st-bone) !important; margin: 0 !important; }
.st-give p { margin: 0 0 1.6rem; max-width: 46ch; }
.st-give .st-label { color: rgba(233, 231, 227, .6); }

/* ---------- Fußbereich (überschreibt footer.css: hell, ohne Landschaft) ---------- */
#page-footer .footer-section-content {
  background: var(--st-chalk) !important; color: var(--st-text) !important;
  border-top: 0 !important; font-family: var(--st-sans); font-size: 14.5px;
  padding: 3.5rem 0 2.5rem !important;
}
#page-footer .footer-section-content::before, #page-footer .footer-section-content::after { display: none !important; }
#page-footer .footer-section-content *:not(a) { color: var(--st-text); }
#page-footer .footer-section-content strong { color: var(--st-ink) !important; }
#page-footer .footer-section-content a { color: var(--st-ink) !important; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; background: none !important; }
#page-footer .footer-section-content-column > .frame:first-child::before {
  color: var(--st-graphite) !important; font-family: var(--st-sans); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  background: none !important; border-bottom: 1px solid var(--st-vellum); padding-bottom: .7rem; margin-bottom: 1rem;
}
#page-footer .footer-section-content h3, #page-footer .footer-section-content h5 { color: var(--st-graphite) !important; background: none !important; }
#page-footer .footer-section-content .frame-container { padding-left: 0 !important; padding-right: 0 !important; }

/* ---------- Cookie-Hinweis ---------- */
body .cc-window { font-family: var(--st-sans) !important; background: var(--st-chalk) !important; color: var(--st-ink) !important; border: 1px solid var(--st-vellum); border-radius: 9px !important; box-shadow: none !important; }
body .cc-window a, body .cc-window .cc-link { color: var(--st-ink) !important; }
body .cc-window .cc-btn { border-radius: 29px !important; font-weight: 500 !important; }
body .cc-window .cc-compliance > .cc-btn.cc-allow-all { background: var(--st-ink) !important; border-color: var(--st-ink) !important; color: var(--st-bone) !important; }
body .cc-window .cc-compliance > .cc-btn:not(.cc-allow-all) { background: transparent !important; border: 1px solid var(--st-ink) !important; color: var(--st-ink) !important; }

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 991.98px) {
  .st-room .textpic, .st-give-inner { grid-template-columns: 1fr; }
  .st-room .textpic-gallery { position: static; }
}
@media (max-width: 767.98px) {
  :root { --st-pad: 18px; }
  body { font-size: 16px; }
  .st-cols { columns: 1; }
  .st-give .st-btns .st-btn { flex: 1 1 100%; }
}
.st-give .st-btn--line { color: var(--st-bone) !important; border-color: var(--st-bone); }
.st-give .st-btn--line:hover { background: var(--st-bone) !important; color: var(--st-ink) !important; }

/* Startseite: Platz für den roten Pinselstrich (hero-effekt.css) unter der Überschrift */
.st-home #c1 h1 { margin-bottom: calc(.7em + 1rem) !important; }

/* Karte (Google Maps, erst nach Zustimmung geladen) */
#page-content > iframe.dp--iframe {
  display: block; width: calc(100% - 2 * var(--st-pad)) !important; max-width: var(--st-wide);
  margin: clamp(2.5rem, 5vw, 4rem) auto clamp(3rem, 6vw, 5rem); border-radius: 9px; filter: grayscale(.85);
}
.dp--overlay { border-radius: 9px; background: var(--st-putty) !important; color: var(--st-ink) !important; }
.dp--overlay-header { font-family: var(--st-serif); font-size: 1.6rem; }
.dp--overlay .db--overlay-submit { background: var(--st-ink) !important; color: var(--st-bone) !important; border: 0 !important; border-radius: 29px !important; padding: .65rem 1.3rem !important; font-family: var(--st-sans); }
/* Kontakt-Zeile auf der Startseite */
.st-home #c4 .frame-inner { border-top: 1px solid var(--st-vellum); padding-top: 2rem; }
.body-bg > .frame.frame-has-backgroundimage .frame-inner > h2 { margin-top: 2.6rem; margin-bottom: 1rem; font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.6rem); }
.body-bg > .frame.frame-has-backgroundimage .frame-inner > p, .body-bg > .frame.frame-has-backgroundimage .frame-inner > ul { max-width: 72ch; }
/* Pinselstrich immer unter der letzten Zeile der Überschrift (auch wenn sie umbricht) */
.st-home #c1.frame-has-backgroundimage h1::after { top: auto; bottom: -.55em; }

/* Spalten-Karten (z. B. Konfuzius-Institut): Abstand zum Kopfbereich darüber (Wunsch 03.11.2026) */
main .section-row:has(> .section-column > .frame) { margin-top: clamp(2.5rem, 5vw, 4rem); }
main .section-column:has(> .frame) { display: flex; flex-direction: column; gap: 16px; }
main .section-column > .frame { margin-top: 0 !important; margin-bottom: 0 !important; }

/* Kopfbild als echte Tusche: schwarz-weiß statt bräunlich-grün (Wunsch 03.11.2026). !important, weil die Keyframes
   aus hero-effekt.css sonst den Filter überschreiben; Fläche etwas heller. */
.body-bg > .frame.frame-has-backgroundimage { background: #dad8d0 !important; border-bottom-color: #c2c0b6; }
.body-bg > .frame.frame-has-backgroundimage .frame-backgroundimage { filter: grayscale(1) contrast(1.08) !important; mix-blend-mode: multiply; opacity: .2 !important; }
.st-cols, .st-sign { column-rule-color: #c2c0b6; border-top-color: #c2c0b6; }

/* Schwarzer Raum: auch verschachtelte Elemente (Seite Jour Fixe: Verweis-Element mit dem Jour Fixe darin) hell setzen –
   jedes .frame setzt --frame-color selbst, daher hier für alle Ebenen */
.st-room, .st-room .frame { --frame-color: rgba(233, 231, 227, .82); --frame-link-color: var(--st-bone); --frame-link-hover-color: var(--st-bone); color: rgba(233, 231, 227, .82); }
.st-room p, .st-room li, .st-room span:not(.st-label) { color: inherit; }
.st-room .frame { background: transparent !important; padding-top: 0 !important; }
/* Spalten-Karten: auch Abstand nach unten (zum schwarzen Spenden-Band), Wunsch 03.11.2026 */
main .section-row:has(> .section-column > .frame) { margin-bottom: clamp(3rem, 6vw, 5rem); }