/* =====================================================================
   Internationale Martin-Buber-Stiftung
   Statische Nachbildung der Website (ohne CMS)
   Exakte Werte aus dem Original-Theme (onepage / custom.css):
     Türkis  #32b9be   ·   Violett #6e378c
     Schrift Open Sans  ·  Fließtext 15px / weight 300
     Überschriften weight 400 (NICHT fett)
   ===================================================================== */

/* ---------- Reset / Grundlagen ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

::selection { background: #6e378c; color: #fff; }
::-moz-selection { background: #6e378c; color: #fff; }

body {
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 300;            /* Original: body weight 300 */
    line-height: 1.5;            /* Original-Fließtext 1.5em */
    color: #6e378c;
    background: #ffffff;
    position: relative;
    padding-top: 240px;          /* Platz für den großen Kopf im Ausgangszustand */
    -webkit-font-smoothing: antialiased;
}

a { color: #6e378c; text-decoration: none; transition: color .2s; }
a:hover { color: #6e378c; }

img { max-width: 100%; height: auto; display: block; }

/* Überschriften – exakte Größen/Zeilenhöhen, weight 400 */
h1, h2, h3, h4, h5, h6 { font-family: "Open Sans", sans-serif; font-weight: 400; color: #6e378c; }
h1 { font-size: 37px; line-height: 44px; }
h2 { font-size: 30px; line-height: 35px; margin-bottom: 18px; }
h3 { font-size: 26px; line-height: 33px; margin-bottom: 14px; }
h4 { font-size: 22px; line-height: 28px; margin-bottom: 12px; }

p { margin: 0 0 8px 0; }         /* Original: p margin 0 0 8px 0 */

.container {
    width: 100%;
    margin: 0 auto;
    padding: 0 150px;           /* 150px Innenabstand für Inhalte (Logo, Menü, Text) – Hintergründe bleiben vollbreit */
}

/* ---------- Kopfbereich: zwei Zustände ----------
   Oben: großer türkiser Kopf mit schräger Unterkante, kleiner weißer Streifen darüber.
   Gescrollt: springt zu kompaktem, flachem Sticky-Balken. */
.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 240px;
    background: #32b9be;
    z-index: 1000;
    /* schräge Unterkante: rechts höher beschnitten -> türkis links höher (wie Original) */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 72px), 0 100%);
}
.site-header.scrolled {
    top: 0;
    height: 150px;          /* gerader Sticky-Zustand: ca. 50px höher */
    clip-path: none;
    box-shadow: 0 1px 6px rgba(0,0,0,.12);
}
.site-header .container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.site-header .logo { display: flex; align-items: center; }
.site-header .logo img { height: 135px; width: auto; }          /* erster Header: Logo 10% kleiner */
.site-header.scrolled .logo { transform: translateY(25px); }   /* zweiter Header: Logo 25px nach unten */
.site-header.scrolled .logo img { height: 127.5px; }           /* zweiter Header: Logo 15% kleiner */
.navmenu { transform: translateY(-40px); }                     /* erster Header: Navigation 40px höher */
.site-header.scrolled .navmenu { transform: none; }            /* zweiter Header: Navigation normal */

.navmenu ul {
    list-style: none;
    display: flex;
    align-items: center;
}
.navmenu ul li {
    position: relative;
    margin: 0 30px 0 0;
}
.navmenu ul li:last-child { margin-right: 0; }

/* Feiner "/"-Trenner zwischen allen Menüpunkten (Original: opacity .15) */
.navmenu ul li:not(:last-child)::after {
    content: '/';
    position: absolute;
    right: -18px;
    top: 50%;
    transform: translateY(-50%);
    color: #ffffff;
    opacity: .15;
    font-size: 16px;
    font-weight: 400;
    pointer-events: none;
}

.navmenu ul li a {
    position: relative;
    display: block;
    color: #ffffff;
    font-size: 16px;
    font-weight: 400;
    line-height: 18px;
    padding: 10px 0;
}
.navmenu ul li a:hover { color: #ffffff; }

/* Dünne 1px-Linie als Kennzeichen der aktiven Seite / beim Hover */
.navmenu ul li a::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    bottom: 2px;
    height: 1px;
    background: #6e378c;
    opacity: 0;
    transition: opacity .2s;
}
.navmenu ul li a:hover::after,
.navmenu ul li.current a::after { opacity: 1; }

/* Mobiles Menü */
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 10px; }
.nav-toggle span { display: block; width: 26px; height: 3px; background: #fff; margin: 4px 0; border-radius: 2px; }

/* ---------- Abschnitte ---------- */
.page_section { padding: 60px 0; scroll-margin-top: 110px; }

.section-intro p { font-size: 15px; }
.section-intro a, .col a { text-decoration: underline; }

/* Vollbreite Banner (ehem. Slider) */
/* Vollbreite Banner als schräge Blöcke (Original: schräge Ober-/Unterkante) */
.fullwidth-banner {
    width: 100%;
    min-height: 320px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    clip-path: polygon(0 54px, 100% 0, 100% calc(100% - 54px), 0 100%);
}
.banner-buber  { aspect-ratio: 1920 / 878; }   /* echtes Bildformat -> nichts wird abgeschnitten */
.banner-people { aspect-ratio: 1920 / 378; min-height: 196px; }   /* zweiter Trenner: -10% */

/* ---------- Mehrspaltige Textblöcke ---------- */
.columns { display: flex; flex-wrap: wrap; gap: 40px; margin-top: 40px; }
.columns > .col { flex: 1 1 280px; min-width: 260px; }
.col p { font-size: 15px; line-height: 1.5; }
.col .head-purple { color: #6e378c; }

/* Farbvarianten für einzelne Spalten (Original EN: Spalte 3 = türkis) */
.col-teal p, .col-teal { color: #32b9be; }
.col-teal a { color: #32b9be; }
.col p.lead-teal { font-size: 18px; color: #32b9be; margin-bottom: 8px; }

/* Aufzählungen Personen */
.person-list p { margin-bottom: 2px; font-size: 15px; }
.person-list .bullet { display: inline-block; width: 14px; vertical-align: -2px; margin-right: 6px; }
.person-list .city { color: #6e378c; padding-left: 26px; }
.person-list .spacer { height: 12px; }

/* Personen & Kontakt: gleiches 3-Spalten-Raster wie der Martin-Buber-Text, damit
   die rechte Spalte exakt unter dessen 2. Spalte fluchtet (linke bleibt in Spalte 1) */
@media (min-width: 768px) {
    #personen .columns,
    #persons  .columns,
    #kontakt  .columns,
    #contact  .columns {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 40px;
    }
}

/* Literatur-Liste (Original: <strong> türkis) */
.literature { color: #32b9be; }
.literature .lit-title { font-weight: 700; color: #32b9be; margin-bottom: 10px; }
.literature ul { list-style: square; padding-left: 20px; }
.literature li { color: #32b9be; margin-bottom: 14px; line-height: 1.5; }

/* ---------- Galerie ---------- */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; }
.gallery a { display: block; position: relative; overflow: hidden; border-radius: 2px; }
.gallery img { width: 100%; aspect-ratio: 600/468; object-fit: cover; transition: transform .4s; }
.gallery a::after { content: ""; position: absolute; inset: 0; background: rgba(110,55,140,0); transition: background .3s; }
.gallery a:hover img { transform: scale(1.06); }
.gallery a:hover::after { background: rgba(110,55,140,.25); }

/* ---------- Kontaktbereich ---------- */
/* Kontakt als schräges Parallelogramm (Original 16-25-10) */
.kontakt-block {
    position: relative;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    color: #fff;
    padding: 107px 0;          /* dritter Trenner: -10% */
    margin-top: 40px;
    clip-path: polygon(0 72px, 100% 0, 100% calc(100% - 72px), 0 100%);
}
.kontakt-block .container { position: relative; z-index: 1; }
.kontakt-block h2 { color: #fff; margin-bottom: 30px; }
.kontakt-block .columns { margin-top: 0; }
.kontakt-block p { color: #fff; margin-bottom: 4px; font-size: 15px; }

/* ---------- Inhaltsseiten (Impressum / Datenschutz) ---------- */
.content-page { padding: 50px 0 70px; min-height: 60vh; }
.content-page h1 { font-size: 30px; line-height: 35px; color: #6e378c; margin-bottom: 24px; font-weight: 400; }
.content-page h2 { font-size: 26px; margin-top: 30px; }
.content-page h3 { font-size: 22px; line-height: 28px; margin-top: 26px; color: #6e378c; }
.content-page p { font-size: 15px; line-height: 1.5; }
.content-page ul { padding-left: 22px; margin-bottom: 16px; }
.content-page li { font-size: 15px; line-height: 1.5; margin-bottom: 8px; }
.content-page a { text-decoration: underline; word-break: break-word; }

/* ---------- Fußbereich (Original: weiß, violetter Text, schlicht) ---------- */
.pre-footer { display: none; }   /* kein türkiser Balken – Original-Footer ist weiß */
.footer-bottom {
    background: #ffffff;
    color: #6e378c;
    padding: 28px 0;
    margin-top: 30px;
    font-size: 13px;
    border-top: 1px solid #ececec;
}
.footer-bottom .container { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.footer-bottom a { color: #6e378c; }
.footer-bottom a:hover { color: #32b9be; }
.footer-menu ul { list-style: none; display: flex; gap: 18px; }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.88); display: none; align-items: center; justify-content: center; z-index: 2000; padding: 30px; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 88vh; width: auto; border-radius: 2px; box-shadow: 0 0 30px rgba(0,0,0,.5); }
.lightbox .lb-close, .lightbox .lb-nav { position: absolute; background: rgba(255,255,255,.12); border: 0; color: #fff; font-size: 30px; line-height: 1; width: 52px; height: 52px; border-radius: 50%; cursor: pointer; transition: background .2s; }
.lightbox .lb-close:hover, .lightbox .lb-nav:hover { background: rgba(255,255,255,.28); }
.lightbox .lb-close { top: 22px; right: 26px; }
.lightbox .lb-prev { left: 26px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-next { right: 26px; top: 50%; transform: translateY(-50%); }

/* ---------- Responsiv ---------- */
@media (max-width: 1280px) {
    .container { padding: 0 60px; }   /* 150px Gutter auf kleineren Bildschirmen reduzieren */
}
@media (max-width: 1024px) {
    .gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    /* Mobil: flacher, kompakter Kopf ohne Schräge */
    body { padding-top: 88px; }
    .container { padding: 0 20px; }
    .site-header,
    .site-header.scrolled { top: 0; height: 88px; clip-path: none; }
    .site-header .logo img,
    .site-header.scrolled .logo img { height: 64px; }

    .nav-toggle { display: block; }
    .navmenu {
        position: absolute;
        top: 88px; left: 0; right: 0;
        background: #32b9be;
        display: none;
        padding: 6px 0 16px;
        transform: none;            /* Mobil: kein Versatz */
    }
    .navmenu.open { display: block; }
    .navmenu ul { flex-direction: column; align-items: stretch; }
    .navmenu ul li { margin: 0; }
    .navmenu ul li:not(:last-child)::after { display: none; }   /* keine "/" im mobilen Menü */
    .navmenu ul li a { padding: 12px 24px; }
    .navmenu ul li a::after { display: none; }

    .columns { gap: 26px; }
    h2 { font-size: 24px; line-height: 30px; }
    .lightbox .lb-prev { left: 10px; }
    .lightbox .lb-next { right: 10px; }
}