/* ============================================================
   THEOLOGOS — DEINE EIGENEN ANPASSUNGEN
   ============================================================
   ► DIESE DATEI GEHÖRT DIR. Claude fasst sie NIE an.
   ► Sie wird NACH aegean.css / modern.css geladen und gewinnt
     deshalb automatisch (zusätzlich !important wo nötig).
   ► Beim Umschalten Tradition⇄Modern tauschst du NUR
     aegean.css ⇄ modern.css — DIESE Datei bleibt immer gleich.
   ------------------------------------------------------------
   Laden (functions.php), Reihenfolge entscheidend:
     1) aegean.css   (oder modern.css)
     2) custom.css   ← diese Datei, ZULETZT
   Beispiel:
     wp_enqueue_style('aegean', '.../styles/aegean.css', array(), '1.0');
     wp_enqueue_style('custom', '.../styles/custom.css',
                      array('aegean'), '1.0');   // hängt an aegean
   ============================================================ */


/* ---- HERO „KARTE": Höhe & Überlappung ---------------------- */
/* Bildhöhe (Band hinter der Karte) 
body.aegean #et-boc .et-l .hero-card__media {
  min-height: 60vh !important;
}
*/
/* Wie weit die Textkarte übers Bild nach oben rückt
   (mehr Minus = höher · 0 = keine Überlappung) */
body.aegean #et-boc .et-l .hero-card__panel {
  margin-top: -300px !important;
  margin-left: -15%!important;
  
  /*background transparenter machen*/
  background: color-mix(in srgb, var(--surface) 80%, transparent) !important;
  
  
}

body.aegean #et-boc .et-l .tile__body h3 { grid-row: 3 !important; align-self: end !important; }



@media (max-width: 620px) {
  body.aegean #et-boc .et-l .hero-card__panel {
    margin-top: -220px !important;
  }
}


/* ---- HERO „KARTE"  :Veranstaltung */
body.single .hero-card__panel h1 {
 
  font-size: var(--event-title-size, clamp(1.3rem, 4.5vw, 1.5rem)) !important;
  line-height: 1.15 !important;
  
}





/* ---- FIX: Veranstaltungs-Karten volle Breite -------------- */
/* Divi zwängt Code-Modul-Inhalte teils in einen schmalen
   Flex-Kontext → Karten schrumpfen. Das erzwingt volle Breite. */
body.aegean #et-boc .et-l .et_pb_code_inner > a.card,
body.aegean #et-boc .et-l .et_pb_code_inner a.card {
  width: 100% !important;
  box-sizing: border-box !important;
  flex: 1 1 100% !important;
}
/* Falls die Karten in einem Flex-Row-Container nebeneinander
   stehen, hier auf Spalte stellen: */
body.aegean #et-boc .et-l .et_pb_code_inner {
  display: block !important;
}


/* ---- FIX: Divi-Button als Outline (btn--outline) ---------- */
/* Macht ein Divi-Button-Modul mit Zusatzklasse btn--outline
   wirklich transparent mit Rahmen (statt gefüllt). */
body.aegean #et-boc .et-l a.et_pb_button.btn--outline {
  background-color: transparent !important;
  color: var(--brand) !important;
  border: 1.5px solid var(--brand) !important;
}
body.aegean #et-boc .et-l a.et_pb_button.btn--outline:hover {
  background-color: var(--brand) !important;
  color: #fff !important;
  border-color: var(--brand) !important;
}


/* ============================================================
   ROBUSTE FALLBACKS (unabhängig von body.aegean!)
   Wirken auch, wenn die Body-Klasse "aegean" auf der Seite fehlt.
   ============================================================ */

/* 1) Veranstaltungs-Karten IMMER volle Breite + linksbündig.
   Divi zentriert/schrumpft Code-Modul-Inhalte → das hebt es auf. */
.et_pb_code_inner,
.et_pb_text_inner {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
}
.et_pb_code_inner a.card,
a.card {
  display: flex !important;
  width: 100% !important;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  align-self: stretch !important;
}

/* 2) Outline-Button: auf JEDEM Element mit btn--outline,
   auch Divi-Buttons (et_pb_button), ohne body.aegean. */
.btn--outline,
a.et_pb_button.btn--outline {
  background-color: transparent !important;
  background-image: none !important;
  color: var(--brand, #8B5A2B) !important;
  border: 1.5px solid var(--brand, #8B5A2B) !important;
}
.btn--outline:hover,
a.et_pb_button.btn--outline:hover {
  background-color: var(--brand, #8B5A2B) !important;
  color: #fff !important;
}

/* ---- footer überschriften ---------------- */
body.aegean #et-boc .et-l .site-footer__label {
  font-family: var(--font-body) !important;
  font-size: .72rem !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--sand) !important;
}


/* Footer-Hintergrund = Newsletter-Farbe */
body.aegean #et-boc .et-l .site-footer {
  background: var(--footer-bg) !important;
  
}

/* Header-Hintergrund = Newsletter-Farbe */
body.aegean #et-boc .et-l .actual-header {
  background: var(--sand) !important;
}

body.aegean #et-boc .et-l .et_pb_code_inner > a.card { width: 100% !important; }




.et_pb_code.force-full-code,
.et_pb_code.force-full-code .et_pb_code_inner {
    width: 100% !important;
    min-width: 100% !important;
    display: block !important;
    float: none !important;
}

/*Logo*/
.hdr-brand__logo { height: 64px!important; }                 /* Logo-Größe */
.hdr-brand { gap: 1em; }                            /* Abstand Logo ↔ Text */
.hdr-brand__name { font-size: 1.7rem; }             /* Schriftzug-Größe */
.hdr-brand__sub { letter-spacing: .24em; }          /* Sperrung der Unterzeile */




body.aegean #et-boc .et-l h1, body.aegean #et-boc .et-l .et_pb_fullwidth_header h1.et_pb_module_header {
  font-size: clamp(1.4rem, 5.5vw, 2rem) !important;
}




/* ============================================================
   DETAILSEITE (Beitrag + Veranstaltung) — .hero-postcard
   Selektor IMMER body.single — NIE #et-boc (gibt's hier nicht)
   Alle Werte optional: löschen = Standard greift.
   ============================================================ */
body.single {
  /* — KARTE — */
  --fmt-event-card-width:  90%;                        /* Breite der Textkarte (z.B. 80%, 760px) */
  --fmt-event-overlap:     -80px;                      /* wie weit die Karte ins Bild ragt (Desktop) */
  --fmt-event-overlap-m:   -56px;                      /* dito Mobil */

  /* — BILD-BAND — */
  --hero-h:                50vh;                        /* Bildhöhe Desktop */
  --hero-h-m:              38vh;                        /* Bildhöhe Mobil */

  /* — TITEL — */
  --fmt-event-title-size:   clamp(1.4rem, 5vw, 2.4rem); /* wächst mit Bildschirm (min, fließend, max) */
  --fmt-event-title-color:  var(--ink);                 /* Farbe (z.B. var(--brand)) */
  --fmt-event-title-font:   var(--font-head);           /* Schriftart (z.B. var(--font-body)) */
  --fmt-event-title-weight: 700;                        /* Schriftstärke: 400 / 600 / 700 / 900 */
  --fmt-event-title-lh:     1.15;                       /* Zeilenhöhe */
}

/* — ABSCHNITTE: Beschreibung & Organisatorisches — */
body.single {
  --fmt-section-width:        680px;          /* Breite der Textabschnitte */
  --fmt-section-title-size:   1.3rem;         /* Überschrift „Beschreibung" / „Organisatorisches" */
  --fmt-section-title-color:  var(--ink);     /* Farbe der Überschrift */
  --fmt-section-title-weight: 700;            /* 400 / 600 / 700 / 900 */
  --fmt-section-title-font:   var(--font-head);
  --fmt-section-text-size:    1rem;           /* Textgröße */
  --fmt-section-text-color:   var(--ink);     /* Textfarbe */
  --fmt-section-text-lh:      1.6;            /* Zeilenhöhe */

  /* — EINDRÜCKE-GALERIE — */
  --fmt-gallery-cols:   3;                     /* Spalten Desktop */
  --fmt-gallery-cols-m: 2;                     /* Spalten Mobil */
  --fmt-gallery-gap:    8px;                   /* Abstand zwischen Bildern */
  --fmt-gallery-radius: 15px;                  /* Eckenrundung der Bilder */
  --fmt-gallery-ratio:  1 / 1;                 /* Bildformat: 1/1 quadratisch, 4/3, 16/9 … */
}
/* Fix wegen falscher Silbentrennung*/
.hero-postcard__panel h1 {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  column-count: 1 !important;
  box-sizing: border-box !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
}
.hero-postcard__panel {
  display: block !important;
}

/*
Bedienung:

    Nur Zahlen ändern. Was du beim Standard lassen willst, kannst du löschen — die Zeile ist dann einfach weg, der Default greift.
    Kein !important bei Variablen — weglassen.
    Titel-Größe: erste Zahl = klein (Handy), letzte = groß (Desktop), mittlere (vw) = Tempo des Mitwachsens.

Wenn dir eine Variable mal nicht reicht (z.B. Padding der Karte, Eckdaten-Schrift), kannst du zusätzlich direkt die Klasse ansprechen — immer mit body.single davor:

body.single .hero-postcard__panel { padding: 32px; }
body.single .hero-postcard__media { border-radius: 0; }

*/

.event-section {
  max-width: var(--fmt-event-card-width, 90%) !important;
  margin: 1.6em auto 0;
  text-align: left;
  margin-bottom: 60px;
}

/*geschchte theologos - menü oben bündig*/

@media (min-width: 768px) {
  .gp-side {
    top: 0px;
    }
}

.gp-summary {
   margin-bottom: 40px !important;
   font-size: 0.96rem;
   font-style: italic;
}

#row-brand-tint { background-color: color-mix(in srgb, var(--brand) 20%, transparent) !important; }


/* Sticky-Header: weicher Uebergang + geschrumpfter Zustand.
   Divi macht "sticky", dieser Block macht nur die Optik.
   Alle drei Werte unabhaengig anpassbar. */
#site-header {
  transition: padding .25s ease, min-height .25s ease;
}
#site-header .hdr-brand__logo {
  transition: width .25s ease, height .25s ease;
}
#site-header .et-menu > li > a {
  transition: font-size .25s ease, padding .25s ease;
}

#site-header.is-shrunk {
  padding-block: 10px !important;      /* Standard z.B. 20px -> hier -50% */
}
#site-header.is-shrunk .hdr-brand__logo {
  width: 32px !important;              /* Standard z.B. 48px -> hier -33% */
  height: 32px !important;
}
#site-header.is-shrunk .et-menu > li > a {
  font-size: .93em !important;         /* -12% relativ zur normalen Groesse */
}
#site-header {
  min-height: 104px;
}
#site-header.is-shrunk {
  max-height: 42px !important;
}
#site-header {
  display: flex !important;
  align-items: center !important;
}
#site-header, #site-header * {
  transition: min-height .25s ease, height .25s ease, padding .25s ease;
}
#site-header.is-shrunk,
#site-header.is-shrunk > .et_pb_row,
#site-header.is-shrunk .et_pb_row_inner {
  min-height: 62px !important;
  background-color: #f5f0e6ed !important; */  
 
}

.photo-credit {
  position: absolute; right: 12px; bottom: 12px; z-index: 3;
  font-size: .72rem; font-weight: 600; color: #fff;
  background: rgba(139, 90, 43, 0.69); padding: 3px 13px 3px 13px; border-radius: 999px;
  backdrop-filter: blur(3px); letter-spacing: .01em;
}

.photo-credit-wrap { position: relative; }
.photo-credit-wrap::after {
  content: "© " attr(data-credit);
  position: absolute; right: 12px; bottom: 12px; z-index: 3;
  font-size: .72rem; font-weight: 600; color: #fff;
  background: rgba(139, 90, 43, 0.69) !important; padding: 10px 13px 10px 13px !important; !important; border-radius: 999px;
  backdrop-filter: blur(3px);
}

.hero-card__panel {
  background: color-mix(in srgb, var(--surface) 80%, transparent) !important;
}


@media (min-width: 760px) {
  .people {
    grid-template-columns: repeat(3,1fr) !important;
  }
}
.person__name {
	font-size:18px !important;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}

.fmt-ev-card {
	border: 1.5px solid color-mix(in srgb, var(--brand) 60%, transparent) !important;
}

/* Die Buttonleiste mobile auf allen Geräten nach unten drücken*/
@media (max-width: 720px) {
  body.has-mnav { padding-bottom: 112px !important; }
  .mnav { padding-bottom: 0 !important; }
}

gp-nav__label {
  font-size: 1.42rem !important;
 }
 
 /* ============================================================
   KOPIERSCHUTZ · Kulturverein Theologos
   - Bilder global: kein Ziehen / kein iOS-Langdruck-Menue
   - .kvt-protect : Text-Bereich gegen Markieren/Kopieren sperren
   - .kvt-ok      : Ausnahme - innerhalb gesperrter Bereiche frei
   - Buttons/Links/Formulare bleiben immer benutzbar
   ============================================================ */

/* 1) ALLE Bilder: nicht ziehen, kein Langdruck-Menue (iOS) */
img {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
}

/* 2) Geschuetzte Text-Bereiche (Klasse an Sektion/Zeile/Modul) */
.kvt-protect, .kvt-protect * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  cursor: default;
}

/* 3) AUSNAHMEN: Buttons, Links, Formularfelder bleiben nutzbar */
.kvt-protect a,
.kvt-protect button,
.kvt-protect .et_pb_button,
.kvt-protect input,
.kvt-protect textarea,
.kvt-protect select {
  -webkit-user-select: auto;
  user-select: auto;
  cursor: pointer;
}
.kvt-protect input,
.kvt-protect textarea {
  -webkit-user-select: text;
  user-select: text;
  cursor: text;
}

/* 4) FREIGABE trotz Sperre (z. B. Adresse, Telefon) */
.kvt-ok, .kvt-ok * {
  -webkit-user-select: text !important;
  user-select: text !important;
  -webkit-touch-callout: default !important;
  cursor: auto;
}

/* ============================================================
   KOPIERSCHUTZ · Kulturverein Theologos ENDE   
   ============================================================ */
   
   
body.aegean #et-boc .et-l .tile__body h3 { grid-row: 3 !important; align-self: end !important; }


/* ----NEWS Überschriften kleiner */
body.aegean #et-boc .et-l h3.fmt-news-card__title { font-size: clamp(1.4rem, 2.6vw, 1.4rem) !important; }


/*body.aegean #et-boc .et-l h3.fmt-news-card__title { overflow-wrap: break-word !important; hyphens: auto !important; }
body.aegean #et-boc .et-l h3.fmt-news-card__title { hyphens: auto !important; overflow-wrap: break-word !important; }*/

body.aegean #et-boc .et-l h3.fmt-news-card__title { hyphens: auto !important; overflow-wrap: normal !important; word-break: normal !important; hyphenate-limit-chars: 8 4 4 !important; }



/*' --- News Text Blocksatz und zeilenanstand*/
#et-boc .et-l .aegean-x, body.aegean #et-boc .et-l .et_pb_text, body.aegean #et-boc .et-l .et_pb_text_inner, body.aegean #et-boc .et-l p, body.aegean #et-boc .et-l li {
  text-align: justify;
  line-height: 1.5em;
}