/* ---------------------------------------------------------------
   Die Gestaltung des Trachtengau Niederbayern, live seit 12.10.2026.
   Jede Regel haengt an der Body-Klasse .tgnb-vorschau. Die setzt das
   mu-plugin tgnb-vorschau.php fuer jeden Besucher; nur ?vorschau=aus
   nimmt sie weg. Der Name stammt aus der Vorschauzeit - umbenennen
   heisst, alle Regeln hier anzufassen.
   --------------------------------------------------------------- */

.tgnb-vorschau {
  --tgnb-blau:      #00508C;  /* aus dem Wappen gemessen, fuer Text und Flaechen */
  --tgnb-himmel:    #0083B4;  /* RAL 5015, nur fuer die Rautung */
  --tgnb-dunkel:    #0A3A63;
  --tgnb-rot:       #C83C50;  /* Loewenrot, nur auf Weiss */
  --tgnb-gold:      #C8A646;
  --tgnb-text:      #3A4753;
  --tgnb-band:      124px;
}

/* --- Schrift ------------------------------------------------------ */
.tgnb-vorschau,
.tgnb-vorschau p,
.tgnb-vorschau li,
.tgnb-vorschau .et_pb_text,
.tgnb-vorschau #top-menu a,
.tgnb-vorschau input,
.tgnb-vorschau button {
  font-family: 'Alegreya Sans', 'Segoe UI', sans-serif;
}

.tgnb-vorschau h1,
.tgnb-vorschau h2,
.tgnb-vorschau h3,
.tgnb-vorschau h4,
.tgnb-vorschau .entry-title {
  font-family: Vollkorn, Georgia, serif;
  font-weight: 700;
  text-wrap: balance;
}

.tgnb-vorschau h1 { color: var(--tgnb-blau); line-height: 1.12; }
.tgnb-vorschau h2 { color: var(--tgnb-blau); line-height: 1.18; }
.tgnb-vorschau h3 { color: var(--tgnb-blau); line-height: 1.22; }

/* Die Fliesstextfarbe wird GEERBT, nicht direkt auf p/li gesetzt.
   Grund: eine direkt gesetzte Farbe schlaegt immer eine geerbte - auch
   eine mit !important. Divi gibt die Textfarbe eines Moduls aber genau
   so aus (".et_pb_text_11.et_pb_text{color:#FFF!important}"), also am
   Modul und nicht am Absatz. Stuende unsere Farbe am p, wuerde jede im
   Baukasten eingestellte Textfarbe wirkungslos - das muss funktionieren,
   weil die Seite von jemand anderem gepflegt wird. */
.tgnb-vorschau #main-content { color: var(--tgnb-text); }

.tgnb-vorschau p,
.tgnb-vorschau li { line-height: 1.62; }

/* --- Divis Standard "Textfarbe: Hell" (dunkler Hintergrund) --------- */
/* Setzt der Redakteur im Baukasten "Textfarbe: Hell", vergibt Divi die
   Klasse .et_pb_bg_layout_dark. Daran haengen wir uns, statt einzelne
   Abschnitte zu adressieren - so gilt es auch fuer kuenftige. */
.tgnb-vorschau .et_pb_bg_layout_dark,
.tgnb-vorschau .et_pb_bg_layout_dark h1,
.tgnb-vorschau .et_pb_bg_layout_dark h2,
.tgnb-vorschau .et_pb_bg_layout_dark h3,
.tgnb-vorschau .et_pb_bg_layout_dark h4,
.tgnb-vorschau .et_pb_bg_layout_dark p,
.tgnb-vorschau .et_pb_bg_layout_dark li { color: #FFFFFF; }

.tgnb-vorschau .et_pb_bg_layout_dark a { color: #FFFFFF; }
.tgnb-vorschau .et_pb_bg_layout_dark a:hover { color: var(--tgnb-gold); }

/* --- Farben: Divis Werksblau ersetzen ------------------------------ */
.tgnb-vorschau a { color: var(--tgnb-blau); }
.tgnb-vorschau a:hover { color: var(--tgnb-dunkel); }

.tgnb-vorschau .et_pb_button,
.tgnb-vorschau button[type="submit"],
.tgnb-vorschau input[type="submit"] {
  background-color: var(--tgnb-blau) !important;
  border-color: var(--tgnb-blau) !important;
  color: #FFFFFF !important;
  border-radius: 0 !important;
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 700;
}

/* Auf dunklem Grund umgedreht: weisse Flaeche, blaue Schrift. Sonst
   stand unser blauer Button-Hintergrund auf dem blauen Abschnitt. */
.tgnb-vorschau .et_pb_bg_layout_dark .et_pb_button,
.tgnb-vorschau .et_pb_button.et_pb_bg_layout_dark {
  background-color: #FFFFFF !important;
  border-color: #FFFFFF !important;
  color: var(--tgnb-blau) !important;
}

.tgnb-vorschau .et_pb_bg_layout_dark .et_pb_button:hover,
.tgnb-vorschau .et_pb_button.et_pb_bg_layout_dark:hover {
  background-color: var(--tgnb-gold) !important;
  border-color: var(--tgnb-gold) !important;
  color: var(--tgnb-dunkel) !important;
}

.tgnb-vorschau #top-menu li.current-menu-item > a {
  color: var(--tgnb-blau);
  border-bottom: 3px solid var(--tgnb-rot);
  padding-bottom: 4px;
}

/* --- Fahnenband und Abzeichen -------------------------------------- */
.tgnb-deko { position: relative; }

.tgnb-band {
  background-image: var(--tgnb-rautung);
  background-repeat: no-repeat;
  background-position: left top;
  border-right: 3px solid var(--tgnb-gold);
}

.tgnb-band::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 1.5px;
  background: var(--tgnb-gold);
  opacity: 0.7;
}

.tgnb-abzeichen {
  position: absolute;
  z-index: 100002;
  width: 196px; height: 236px;
  border-radius: 50%;
  background: linear-gradient(135deg, #D9BC74 0%, #B08D4F 46%, #8A6C36 100%);
  box-shadow: 0 2px 10px rgba(10, 34, 58, 0.32);
  display: flex; align-items: center; justify-content: center;
  z-index: 3;
}
.tgnb-abzeichen-innen {
  width: 180px; height: 220px; border-radius: 50%; background: #7E6230;
  display: flex; align-items: center; justify-content: center;
}
.tgnb-abzeichen-feld {
  width: 174px; height: 214px; border-radius: 50%; background: #FFFFFF;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.tgnb-abzeichen-feld img {
  height: 178px; width: auto; display: block;
  transform: translate(4px, -8px);   /* optische Mitte, gemessener Schwerpunktversatz */
}


/* ===================================================================
   Handy und Tablet: Band waagrecht oben, Abzeichen mittig darauf
   =================================================================== */
@media (max-width: 980px) {
  .tgnb-band {
    position: relative;
    height: 74px; width: 100%;
    border-right: none;
    border-bottom: 3px solid var(--tgnb-gold);
  }
  .tgnb-band::after { display: none; }

  .tgnb-abzeichen {
    top: 6px; left: 50%; margin-left: -66px;
    width: 132px; height: 158px;
  }
  .tgnb-abzeichen-innen { width: 120px; height: 146px; }
  .tgnb-abzeichen-feld  { width: 115px; height: 141px; }
  .tgnb-abzeichen-feld img { height: 117px; transform: translate(2px, -6px); }

  .tgnb-vorschau #page-container { padding-top: 96px; }
  .tgnb-vorschau .logo_container,
  .tgnb-vorschau #logo { display: none; }
}

/* ===================================================================
   Desktop: Band senkrecht links, blendet nach unten aus
   =================================================================== */
@media (min-width: 981px) {
  .tgnb-deko {
    position: absolute; top: 0; left: 0;
    width: var(--tgnb-band); height: 900px;
    pointer-events: none; z-index: 100001;   /* Divis #main-header liegt auf 99999 */
  }
  .tgnb-band {
    position: absolute; top: 0; left: 0; bottom: 0;
    width: calc(var(--tgnb-band) - 8px);
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 45%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 0, #000 45%, transparent 100%);
  }
  .tgnb-band::after { right: -5px; }

  .tgnb-abzeichen { top: 18px; left: 40px; }

  .tgnb-vorschau #page-container { padding-left: var(--tgnb-band); }

  /* Divis Logo weicht dem Abzeichen */
  .tgnb-vorschau .logo_container,
  .tgnb-vorschau #logo { display: none; }

  /* Der Inhalt oben braucht Luft neben dem Abzeichen */
  .tgnb-vorschau #main-content > .container,
  .tgnb-vorschau #et-main-area > #main-content { padding-left: 120px; }
}

/* ===================================================================
   Anpassungen an Divis vorhandenes Markup
   =================================================================== */

/* Die alte Rautenleiste als JPG von 2018 weicht dem neuen Band.
   Nur das Bild ausblenden - ":has()" auf den Abschnitt nimmt den Text mit. */
.tgnb-vorschau img[src*="bayern-raute"] { display: none; }

/* Das Logo im Inhalt ist jetzt doppelt - das Abzeichen traegt es.
   Erst nur das Bild ausblenden: diese Regel wirkt in jedem Browser. */
.tgnb-vorschau .et_pb_blurb img[src*="logo-trachtengau"] { display: none; }

/* Und dann den ganzen Baustein. Ohne Bild blieb in der rechten Spalte
   die nackte Ueberschrift "Trachtengau Niederbayern" stehen - auf 20
   Seiten, denn es ist das globale Modul 65 "Logo_rechts".
   :has() kennen nur neuere Browser; wo es fehlt, greift die Regel
   darueber weiter und es bleibt beim bisherigen Zustand. */
.tgnb-vorschau .et_pb_blurb:has( img[src*="logo-trachtengau"] ) { display: none; }

/* Kopfzeile: weiss statt blau, damit Abzeichen und Band wirken */
.tgnb-vorschau #main-header {
  background-color: #FFFFFF !important;
  box-shadow: none !important;
  border-bottom: 1px solid #D8DCE2;
}
.tgnb-vorschau #top-menu > li > a { color: #3A4753 !important; }
.tgnb-vorschau #top-menu > li > a:hover { color: var(--tgnb-blau) !important; }
.tgnb-vorschau #top-menu > li.current-menu-item > a { color: var(--tgnb-blau) !important; }

/* Obere Leiste ruhiger */
.tgnb-vorschau #top-header {
  background-color: #EEF1F4 !important;
  color: #3A4753 !important;
  border-bottom: 1px solid #DDE2E8;
}
.tgnb-vorschau #top-header a,
.tgnb-vorschau #et-secondary-menu a { color: #3A4753 !important; }

@media (min-width: 981px) {
  /* Menue beginnt rechts vom Abzeichen */
  .tgnb-vorschau #main-header .container,
  .tgnb-vorschau #top-header .container { padding-left: 150px; }
  /* Abzeichen liegt ueber der Kopfzeile, wie eine angesteckte Medaille */
  .tgnb-deko { z-index: 100001; }   /* Divis #main-header liegt auf 99999 */
  /* Inhalt braucht die Einrueckung nur im obersten Bereich nicht doppelt */
  .tgnb-vorschau #et-main-area > #main-content { padding-left: 0; }
}

/* ===================================================================
   Divi setzt diese Werte über Theme-Optionen und eigenes Inline-CSS.
   Deshalb hier mit "body" davor, sonst gewinnt Divi.
   =================================================================== */

/* Obere Leiste: das blasse Cyan (#e0f8f9 aus den Theme-Optionen) wird Grau */
body.tgnb-vorschau #top-header,
body.tgnb-vorschau #et-secondary-nav {
  background-color: #EEF1F4 !important;
  color: #3A4753 !important;
  border-bottom: 1px solid #DDE2E8;
}
body.tgnb-vorschau #top-header a,
body.tgnb-vorschau #et-secondary-nav a,
body.tgnb-vorschau #et-secondary-nav li a {
  color: #3A4753 !important;
}
body.tgnb-vorschau #top-header a:hover,
body.tgnb-vorschau #et-secondary-nav a:hover { color: var(--tgnb-blau) !important; }

/* Hauptmenü: Divi faerbt die Links weiss (menu_link) und aktiv gruen (#22af1f) */
body.tgnb-vorschau #top-menu > li > a { color: #3A4753 !important; }

/* --- Untermenue (Ausklapper) --------------------------------------- */
/* Divis Option menu_link steht auf #ffffff und menu_link_active auf
   dem Werksgruen #22af1f. Das passte zum alten dunkelblauen Kopf; auf
   dem hellen Kopf ergibt es weiss auf weiss (1,00:1). Die Regeln oben
   greifen nicht, weil "> li > a" nur die oberste Ebene trifft - die
   Ausklapper liegen eine Ebene tiefer. */
body.tgnb-vorschau #page-container #top-menu li ul,
body.tgnb-vorschau #page-container #top-menu li ul.sub-menu {
  background-color: #FFFFFF !important;
  border-top: 3px solid var(--tgnb-blau) !important;
  box-shadow: 0 8px 20px rgba(10, 58, 99, 0.18) !important;
  padding: 10px 0 !important;
}

body.tgnb-vorschau #page-container #top-menu li ul li a,
body.tgnb-vorschau #page-container #top-menu li li a {
  color: #3A4753 !important;
  font-family: 'Alegreya Sans', 'Segoe UI', sans-serif;
  padding: 8px 20px !important;
  width: auto !important;
}

body.tgnb-vorschau #page-container #top-menu li ul li a:hover,
body.tgnb-vorschau #page-container #top-menu li li a:hover {
  color: var(--tgnb-blau) !important;
  background-color: #EEF3F8 !important;
  opacity: 1 !important;
}

body.tgnb-vorschau #page-container #top-menu li ul li.current-menu-item > a,
body.tgnb-vorschau #page-container #top-menu li ul li.current_page_item > a {
  color: var(--tgnb-blau) !important;
  font-weight: 700;
}

body.tgnb-vorschau #top-menu > li > a:hover { color: var(--tgnb-blau) !important; }
body.tgnb-vorschau #top-menu > li.current-menu-item > a,
body.tgnb-vorschau #top-menu > li.current_page_item > a {
  color: var(--tgnb-blau) !important;
}

/* Der blaue Schlagschatten des alten Rauten-Abschnitts */
body.tgnb-vorschau .et_pb_section_0,
body.tgnb-vorschau .et_pb_section_1,
body.tgnb-vorschau .et_pb_row_0 {
  box-shadow: none !important;
  border-bottom: none !important;
}

/* ===================================================================
   Divi erzeugt aus den Theme-Optionen Regeln mit ZWEI IDs und
   !important, zum Beispiel:
     .et_secondary_nav_enabled #page-container #top-header{...!important}
   Dagegen kommt man nur mit mindestens gleicher Spezifitaet an.
   =================================================================== */

body.tgnb-vorschau.et_secondary_nav_enabled #page-container #top-header,
body.tgnb-vorschau #page-container #top-header {
  background-color: #EEF1F4 !important;
  border-bottom: 1px solid #DDE2E8 !important;
}
body.tgnb-vorschau #page-container #top-header,
body.tgnb-vorschau #page-container #top-header a,
body.tgnb-vorschau #page-container #et-secondary-nav a {
  color: #3A4753 !important;
}
body.tgnb-vorschau #page-container #top-header a:hover,
body.tgnb-vorschau #page-container #et-secondary-nav a:hover {
  color: var(--tgnb-blau) !important;
}
body.tgnb-vorschau #page-container #et-secondary-nav li ul {
  background-color: #EEF1F4 !important;
}

/* Kopfzeile weiss statt Divis #1a5b94 */
body.tgnb-vorschau #page-container #main-header,
body.tgnb-vorschau #page-container #main-header .nav li ul,
body.tgnb-vorschau #page-container #main-header .et_mobile_menu {
  background-color: #FFFFFF !important;
}

/* Fusszeilen-Navigation war ebenfalls cyan */
body.tgnb-vorschau #page-container #et-footer-nav {
  background-color: var(--tgnb-dunkel) !important;
}
body.tgnb-vorschau #page-container #et-footer-nav .bottom-nav a {
  color: #E3EAF2 !important;
}

/* ===================================================================
   Divi berechnet den oberen Abstand des Menues aus der Logohoehe
   (#et-top-navigation{padding-top:33px}, data-height-onload="235").
   Da das Logo jetzt das Abzeichen ist, bleibt unten Leere stehen.
   Gemessen: 8 px Luft oben, 95 px unten. Also mittig setzen.
   =================================================================== */
@media (min-width: 981px) {
  /* Divis Hoehe haengt an einer per JS gesetzten Logohoehe. Statt dagegen
     zu rechnen: die Leiste selbst mittig setzen, Hoehe festlegen. */
  /* Divis .container ist width:80%; max-width:1080px - dadurch wandert das
     Menue mit jeder Bildschirmbreite. Hier vollbreit mit festem Abstand
     rechts, damit es immer an derselben Stelle steht. */
  body.tgnb-vorschau #page-container #main-header .container,
  body.tgnb-vorschau #page-container #top-header .container {
    width: 100% !important;
    max-width: none !important;
    padding-right: 48px !important;
  }
  body.tgnb-vorschau #page-container #main-header .container {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-height: 112px !important;
    height: 112px !important;
  }
  body.tgnb-vorschau #page-container #top-header .container {
    display: flex !important;
    justify-content: flex-end !important;
  }
  /* Das Menue selbst darf nicht mehr floaten, sonst greift flex-end nicht */
  body.tgnb-vorschau #page-container #et-top-navigation,
  body.tgnb-vorschau #page-container #top-menu,
  body.tgnb-vorschau #page-container #et-secondary-menu {
    float: none !important;
    margin-right: 0 !important;
  }
  body.tgnb-vorschau #page-container #et-top-navigation,
  body.tgnb-vorschau.et_header_style_left #page-container #et-top-navigation {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    float: none !important;
  }
  body.tgnb-vorschau.et_header_style_left #page-container #et-top-navigation nav > ul > li > a,
  body.tgnb-vorschau #page-container #top-menu > li > a {
    padding-bottom: 0 !important;
  }
  body.tgnb-vorschau #page-container #main-header { min-height: 0 !important; height: auto !important; }
}

/* ===================================================================
   Handy: Divis menu_link-Option faerbt die Menuetexte weiss. Das ging,
   solange der Hintergrund blau war - jetzt ist er hell, also nachziehen.
   =================================================================== */
@media (max-width: 980px) {
  body.tgnb-vorschau #page-container .select_page,
  body.tgnb-vorschau #page-container .mobile_menu_bar,
  body.tgnb-vorschau #page-container .et_mobile_menu li a,
  body.tgnb-vorschau #page-container #mobile_menu li a,
  body.tgnb-vorschau #page-container #et_mobile_nav_menu a {
    color: #1A1D21 !important;
  }
  body.tgnb-vorschau #page-container .et_mobile_menu,
  body.tgnb-vorschau #page-container #mobile_menu {
    background-color: #FFFFFF !important;
    border-top: 3px solid var(--tgnb-blau) !important;
  }
  body.tgnb-vorschau #page-container .et_mobile_menu li a {
    border-bottom: 1px solid #E4E8ED !important;
  }
  /* Die Auswahlleiste braucht sichtbaren Grund */
  body.tgnb-vorschau #page-container #et_mobile_nav_menu .mobile_nav {
    background-color: #EEF1F4 !important;
    border: 1px solid #DDE2E8 !important;
  }

  /* Lücke schliessen: der Deko-Block traegt das Abzeichen selbst,
     deshalb braucht #page-container keinen zusaetzlichen Abstand mehr. */
  .tgnb-deko { height: 172px; }
  body.tgnb-vorschau #page-container { padding-top: 0 !important; }
}

/* ===================================================================
   Handy: Fotos stehen im Fliesstext umflossen, dadurch bleibt fuer den
   Text eine Spalte von wenigen Woertern. Das ist schon heute so, nicht
   erst durch die Vorschau - hier trotzdem gleich mit behoben.
   =================================================================== */
@media (max-width: 980px) {
  body.tgnb-vorschau .et_pb_text img,
  body.tgnb-vorschau .entry-content img {
    float: none !important;
    display: block !important;
    margin: 0 auto 18px !important;
    max-width: 100% !important;
    height: auto !important;
  }
  /* Luft zwischen Abzeichen und Menueleiste verringern */
  .tgnb-deko { height: 182px; }   /* Band 74 + Abzeichen bis 164 + 18 Luft */
  body.tgnb-vorschau #page-container #main-header { padding-top: 0 !important; }
  body.tgnb-vorschau #page-container #et_mobile_nav_menu { margin-top: 6px; }
}

/* ===================================================================
   Divi macht die Kopfzeile ueber .et_fullwidth_nav schon vollbreit.
   Das Menue wird darin aber nicht nach rechts geschoben - dafuer
   margin-left:auto auf dem Flex-Kind. Die linke Einrueckung entfaellt,
   weil das rechtsbuendige Menue das Abzeichen ohnehin nicht beruehrt;
   sie hat bei 1280 px nur den Umbruch von "Termine" verursacht.
   =================================================================== */
@media (min-width: 981px) {
  body.tgnb-vorschau.et_fullwidth_nav #page-container #main-header .container {
    padding-left: 0 !important;
    padding-right: 48px !important;
  }
  body.tgnb-vorschau #page-container #et-top-navigation {
    margin-left: auto !important;
  }
  body.tgnb-vorschau #page-container #top-menu {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
  }
  body.tgnb-vorschau #page-container #top-menu > li { padding-right: 20px; }
  body.tgnb-vorschau #page-container #top-menu > li:last-child { padding-right: 0; }
}

/* ===================================================================
   Gemessen: .container ist 1721 px breit, #et-top-navigation fuellt
   ihn mit 1650 px komplett aus - die Menuepunkte sitzen darin links.
   Also muss #et-top-navigation selbst der Flex-Container sein.
   =================================================================== */
@media (min-width: 981px) {
  body.tgnb-vorschau #page-container #et-top-navigation {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    width: 100% !important;
  }
  body.tgnb-vorschau #page-container #top-menu-nav { margin-left: auto !important; }
}

/* ===================================================================
   Nachtrag: Die Ausblendung der alten Rautenleiste stand ohne
   !important da. Divi hat fuer schmale Bildschirme eigene Regeln zu
   .et_pb_image, die spaeter kommen - deshalb kam das Bild auf dem
   Handy wieder zum Vorschein. Jetzt in allen Schreibweisen und fest.
   =================================================================== */
.tgnb-vorschau img[src*="bayern-raute"],
.tgnb-vorschau img[srcset*="bayern-raute"],
.tgnb-vorschau .et_pb_image_0,
.tgnb-vorschau .et_pb_image_0 .et_pb_image_wrap {
  display: none !important;
}

/* ===================================================================
   Handy: Divis .container ist auch hier nur 80 % breit, deshalb steht
   "Seite waehlen" eingerueckt. Vollbreit mit schmalem Rand.
   =================================================================== */
@media (max-width: 980px) {
  body.tgnb-vorschau #page-container #main-header .container,
  body.tgnb-vorschau #page-container #top-header .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }
  body.tgnb-vorschau #page-container #et_mobile_nav_menu,
  body.tgnb-vorschau #page-container .mobile_nav {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ===================================================================
   Der Name des Gaus. Divis Logo ist ausgeblendet, das Wappen allein
   sagt einem Ortsfremden nicht, auf wessen Seite er gelandet ist.
   =================================================================== */
.tgnb-name {
  position: absolute;
  text-decoration: none;
  pointer-events: auto;
  display: block;
}
.tgnb-name-haupt {
  display: block;
  font-family: Vollkorn, Georgia, serif;
  font-weight: 700;
  color: var(--tgnb-blau);
  line-height: 1.1;
}
.tgnb-name-unter {
  display: block;
  font-family: 'Alegreya Sans', sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5C6773;
  margin-top: 4px;
}

@media (min-width: 981px) {
  .tgnb-name { left: 258px; top: 58px; white-space: nowrap; }
  .tgnb-name-haupt { font-size: 27px; }
  .tgnb-name-unter { font-size: 12px; }
}

@media (max-width: 980px) {
  .tgnb-deko { height: 248px; }
  .tgnb-name {
    top: 172px; left: 16px; right: 16px;
    text-align: center;
  }
  .tgnb-name-haupt { font-size: 22px; }
  .tgnb-name-unter { font-size: 11px; }
}

/* ===================================================================
   Platzverteilung in der Kopfzeile. Das Menue hat sieben Punkte und
   braucht bei 1440 px rund 960 px Breite - zusammen mit dem Schriftzug
   wird es eng. Deshalb nach verfuegbarem Platz gestaffelt.
   =================================================================== */
@media (min-width: 981px) {
  /* Menue etwas kompakter, damit der Name danebenpasst */
  body.tgnb-vorschau #page-container #top-menu > li > a { font-size: 15px !important; }
  body.tgnb-vorschau #page-container #top-menu > li { padding-right: 15px !important; }
  body.tgnb-vorschau #page-container #top-menu > li:last-child { padding-right: 0 !important; }
}

/* ===================================================================
   Desktop gestapelt wie auf dem Handy: Name mit Unterzeile oben,
   Menue darunter rechts. Alles in eine Zeile zu zwingen hiess, die
   Unterzeile zu opfern und die Schrift zu schrumpfen - das sah
   gequetscht aus. Die zweite Zeile kostet nur rund 40 px Hoehe.
   =================================================================== */
@media (min-width: 981px) {
  body.tgnb-vorschau #page-container #main-header .container {
    height: 152px !important;
    min-height: 152px !important;
    align-items: flex-end !important;
    padding-bottom: 16px !important;
  }
  .tgnb-name { left: 258px; top: 52px; white-space: nowrap; }
  .tgnb-name-haupt { font-size: 29px; }
  .tgnb-name-unter { font-size: 12.5px; display: block; }

  /* Menue wieder in Normalgroesse, es hat jetzt die Zeile fuer sich */
  body.tgnb-vorschau #page-container #top-menu > li > a { font-size: 16px !important; }
  body.tgnb-vorschau #page-container #top-menu > li { padding-right: 22px !important; }
  body.tgnb-vorschau #page-container #top-menu > li:last-child { padding-right: 0 !important; }
}

/* ===================================================================
   Der Gauname in Fraktur. UnifrakturMaguntia geht auf Peter Schoeffers
   Mainzer Type zurueck - dieselbe Formenwelt wie die Backsteingotik in
   Landshut und Straubing. Nur der Name; Ueberschriften und Text
   bleiben Antiqua, sonst wird jede Zeile zur Entzifferungsaufgabe.
   =================================================================== */
.tgnb-name-haupt {
  font-family: UnifrakturMaguntia, Vollkorn, Georgia, serif;
  font-weight: 400;        /* Fraktur hat nur einen Schnitt */
  letter-spacing: 0.01em;
}

@media (min-width: 981px) {
  /* Fraktur baut niedriger als Antiqua, deshalb etwas groesser.
     line-height 1.0 war zu knapp: der Kasten ist dann genau so hoch
     wie der Schriftgrad, und die Oberlaengen der Fraktur-Versalien
     ragten oben heraus - in den grauen Balken. 1.15 fasst sie. */
  .tgnb-name-haupt { font-size: 38px; line-height: 1.15; }
  .tgnb-name { top: 60px; }
  .tgnb-name-unter { margin-top: 7px; }
}

@media (max-width: 980px) {
  .tgnb-name-haupt { font-size: 29px; line-height: 1.05; }
  .tgnb-name { top: 168px; }
  .tgnb-deko { height: 252px; }
}

/* ===================================================================
   Startseite neuer Aufteilung: Zahlenblock und Platz fuer das Abzeichen
   =================================================================== */
.tgnb-vorschau .tgnb-zahl { margin: 0 0 14px; line-height: 1.2; }
.tgnb-vorschau .tgnb-zahl strong {
  font-family: Vollkorn, Georgia, serif;
  font-size: 30px; color: var(--tgnb-blau); font-variant-numeric: tabular-nums;
}
.tgnb-vorschau .tgnb-zahl span { font-size: 14px; color: #5C6773; }

@media (min-width: 981px) {
  /* Der erste Abschnitt muss am Abzeichen vorbei, sonst steht die
     Ueberschrift dahinter. Gilt nur fuer die Startseite. */
  body.tgnb-vorschau.home #main-content .et_pb_section:first-of-type .et_pb_row,
  body.tgnb-vorschau.page-id-2 #main-content .et_pb_section:first-of-type .et_pb_row {
    padding-left: 150px !important;
  }
}

/* --- Nachrichten aus Divis Blog-Modul ------------------------------ */
/* Dritte Stufe: nur Titel und Datum, als schlichte Liste. Das Modul
   laeuft als fullwidth (siehe entwurf_blogmodule.php), hier wird es
   nur noch flach und zweispaltig ausgerichtet. */
.tgnb-vorschau .tgnb-meldungsliste .et_pb_post {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid #D9D5CC !important;
  box-shadow: none !important;
  padding: 11px 0 !important;
  margin: 0 !important;
  display: flex;
  align-items: baseline;
  gap: 18px;
}
.tgnb-vorschau .tgnb-meldungsliste .et_pb_post:last-child { border-bottom: 0 !important; }
.tgnb-vorschau .tgnb-meldungsliste .entry-title {
  margin: 0 !important; flex: 1 1 auto; font-size: 19px; line-height: 1.3;
}
.tgnb-vorschau .tgnb-meldungsliste .post-meta,
.tgnb-vorschau .tgnb-meldungsliste .post-meta a {
  /* #6B7480 waere auf dem beigen Grund nur 4,15:1 - knapp zu wenig.
     #5D6670 schafft 5,12:1 und sieht praktisch gleich aus. */
  margin: 0 !important; flex: 0 0 auto; font-size: 14px; color: #5D6670;
  white-space: nowrap;
}
.tgnb-vorschau .tgnb-meldungsliste .post-content,
.tgnb-vorschau .tgnb-meldungsliste .et_pb_image_container { display: none !important; }

/* --- Aufmacher: ein grosses Teaserbild ----------------------------- */
/* Die neueste Meldung muss als die wichtigste lesbar sein: Kennzeile,
   ein breites Bild, grosse Ueberschrift. Die drei gleich grossen Bilder
   von vorher sahen aus wie eine vierte Kartenreihe. */
.tgnb-vorschau .tgnb-aufmacher-block {
  background: transparent; border: 0; padding: 0 0 30px;
  border-bottom: 1px solid #D9D5CC;
}
.tgnb-vorschau .tgnb-aufmacher-marke {
  margin: 0 0 12px !important;
  font-family: 'Alegreya Sans', sans-serif;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  /* --tgnb-rot (#C83C50) schafft auf dem beigen Grund nur 4,37:1.
     #BE3449 ist derselbe Ton, etwas tiefer, und kommt auf 4,88:1. */
  color: #BE3449;
}
.tgnb-vorschau .tgnb-aufmacher-marke::after {
  content: ""; display: block; width: 46px; height: 3px;
  background: #BE3449; margin-top: 8px;
}

/* Ein Teaserbild, verlinkt auf den Beitrag. Keine Lightbox hier -
   siehe Begruendung im Plugin. */
.tgnb-vorschau .tgnb-aufmacher-bild {
  display: block;
  margin: 0 0 10px !important;   /* Divi setzt hier -20px fuer Karten */
  position: relative;
}
.tgnb-vorschau .tgnb-aufmacher-bild .entry-featured-image-url { display: block; }
.tgnb-vorschau .tgnb-aufmacher-bild img {
  width: 100%; height: 380px; object-fit: cover; object-position: center 35%;
  display: block;
}

.tgnb-vorschau .tgnb-aufmacher-titel { margin: 0 0 8px; font-size: 42px; line-height: 1.12; }
.tgnb-vorschau .tgnb-aufmacher-titel a { color: var(--tgnb-blau); text-decoration: none; }
.tgnb-vorschau .tgnb-aufmacher-datum {
  margin: 0 0 16px !important; font-size: 14px; color: #5D6670;
}
.tgnb-vorschau .tgnb-aufmacher-text {
  margin: 0 0 12px !important; max-width: 78ch; font-size: 18px; line-height: 1.62;
}
.tgnb-vorschau .tgnb-aufmacher-mehr { margin: 0 !important; }
.tgnb-vorschau .tgnb-aufmacher-mehr a { font-weight: 700; }
.tgnb-vorschau .tgnb-aufmacher-zahl { margin-left: 16px; font-size: 14px; color: #5D6670; }

/* Der ganze Aufmacher fuehrt in den Beitrag */
.tgnb-vorschau .tgnb-aufmacher-block { position: relative; }
.tgnb-vorschau .tgnb-aufmacher-titel a::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
}
.tgnb-vorschau .tgnb-aufmacher-block:hover .tgnb-aufmacher-titel a { color: var(--tgnb-dunkel); }
/* Das Plus beim Ueberfahren kommt aus Divis .et_overlay - es wird
   sichtbar, sobald der Zeiger ueber dem Block steht, nicht nur
   ueber dem Bild. */
.tgnb-vorschau .tgnb-aufmacher-block:hover .tgnb-aufmacher-bild .et_overlay {
  opacity: 1; z-index: 3;
}

/* --- Karten: gleich hoch und ganze Kachel anklickbar --------------- */
/* Divi stellt die Karten als Spalten nebeneinander, jede so hoch wie
   ihr Inhalt. Als Raster mit gestreckten Zeilen werden sie gleich hoch.
   NUR ab Tablettbreite: ohne Medienabfrage blieben auch auf dem Handy
   drei Spalten stehen, und die Seite lief seitlich aus dem Bild. */
@media (min-width: 981px) {
  .tgnb-vorschau .tgnb-karten .et_pb_salvattore_content {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 5.4755%;
    align-items: stretch;
  }
  .tgnb-vorschau .tgnb-karten .column {
    width: auto !important; margin: 0 !important; float: none !important;
    display: flex;
  }
  .tgnb-vorschau .tgnb-karten .et_pb_post { width: 100%; }
}

/* Handy und Tablett: untereinander, volle Breite */
@media (max-width: 980px) {
  .tgnb-vorschau .tgnb-karten .et_pb_salvattore_content { display: block; }
  .tgnb-vorschau .tgnb-karten .column {
    width: 100% !important; float: none !important; margin: 0 !important;
  }
  /* Der Abstand muss an den KACHELN haengen, nicht an der Spalte:
     Divi legt auf dem Handy alle drei Beitraege in eine Spalte, der
     Spaltenabstand kaeme also nur einmal ganz unten. */
  .tgnb-vorschau .tgnb-karten .et_pb_post {
    margin: 0 0 24px !important;
  }
  .tgnb-vorschau .tgnb-karten .et_pb_post:last-child { margin-bottom: 0 !important; }
}

/* --- Die drei Zahlen ---------------------------------------------- */
/* Auf dem Schirm beginnt der Grusswort-Text 30 px tiefer als die
   Zahlenspalte, weil das Textmodul custom_margin="30px" traegt. Die
   erste Zahl schwebte dadurch ueber der Oberkante des Vorstandsfotos.
   Gemessen: Foto und Text bei y=286, Zahlen bei y=256. */
@media (min-width: 981px) {
  .tgnb-vorschau .tgnb-begruessung .tgnb-zahlen { margin-top: 30px; }
}

/* --- Die drei Zahlen auf dem Handy -------------------------------- */
/* Auf dem Schirm stehen sie rechts neben dem Grusswort. Auf dem Handy
   rutschten sie hinter den ganzen Text - rund 1.900 px weit nach
   unten. Dort nimmt sie niemand mehr wahr. Deshalb nach oben und
   nebeneinander, als knappe Kennzahlenzeile. */
@media (max-width: 980px) {
  .tgnb-vorschau .tgnb-begruessung {
    display: flex !important;
    flex-direction: column;
  }
  .tgnb-vorschau .tgnb-begruessung .et_pb_column_1_4 {
    order: -1;
    width: 100% !important;
    margin-bottom: 18px !important;
  }
  .tgnb-vorschau .tgnb-begruessung .et_pb_column_3_4 {
    width: 100% !important;
  }
  .tgnb-vorschau .tgnb-zahlen .et_pb_text_inner {
    display: flex;
    gap: 10px;
    border-top: 1px solid #D9D5CC;
    border-bottom: 1px solid #D9D5CC;
    padding: 14px 0;
  }
  .tgnb-vorschau .tgnb-zahlen .tgnb-zahl {
    flex: 1 1 0;
    min-width: 0;
    margin: 0 !important;
    text-align: center;
  }
  .tgnb-vorschau .tgnb-zahlen .tgnb-zahl strong { font-size: 26px; line-height: 1.1; }
  .tgnb-vorschau .tgnb-zahlen .tgnb-zahl span {
    font-size: 12px; line-height: 1.25; display: block; margin-top: 3px;
  }
}

/* margin hier bewusst NICHT auf 0 erzwingen: die Medienabfrage weiter
   oben setzt auf dem Handy einen Abstand zwischen den Kacheln, und
   eine spaetere Regel mit gleichem Gewicht wuerde ihn wieder
   ausknipsen. Den Nullrand braucht nur das Raster ab 981 px. */
.tgnb-vorschau .tgnb-karten .et_pb_post {
  position: relative;
  display: flex; flex-direction: column;
}
@media (min-width: 981px) {
  .tgnb-vorschau .tgnb-karten .et_pb_post { margin: 0 !important; }
}
.tgnb-vorschau .tgnb-karten .entry-title a::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
}

/* Der Hinweis sitzt am Kartenende, damit er bei allen drei Karten auf
   einer Linie steht - sonst wandert er mit der Textlaenge. */
.tgnb-vorschau .tgnb-karten .post-content {
  display: flex; flex-direction: column; flex: 1 1 auto;
}
.tgnb-vorschau .tgnb-karten .more-link {
  margin-top: auto; padding-top: 14px;
  font-weight: 700; color: var(--tgnb-blau);
}
.tgnb-vorschau .tgnb-karten .more-link::after { content: " \203A"; }
.tgnb-vorschau .tgnb-karten .et_pb_post:hover { border-color: var(--tgnb-blau); }
.tgnb-vorschau .tgnb-karten .et_pb_post:hover .entry-title a { color: var(--tgnb-dunkel); }

/* --- Lightbox ------------------------------------------------------ */
/* Divi zeichnet die Pfeile selbst als Chevron. Eigene Dreiecke ueber
   ::before/::after ergaben zusaetzlich einen weissen Balken daneben -
   hier wird nur noch die Sichtbarkeit angehoben, nichts neu gezeichnet. */
.mfp-wrap .mfp-arrow { opacity: 0.75 !important; }
.mfp-wrap .mfp-arrow:hover,
.mfp-wrap .mfp-arrow:focus { opacity: 1 !important; }
/* Das Schliesskreuz steht bei Divi auf opacity 0.2 - kaum zu sehen. */
.mfp-wrap .mfp-close { opacity: 0.85 !important; font-size: 34px !important; }
.mfp-wrap .mfp-close:hover { opacity: 1 !important; }
.mfp-wrap .mfp-counter { font-size: 15px !important; opacity: 0.9; }

@media (max-width: 767px) {
  .tgnb-vorschau .tgnb-aufmacher-titel { font-size: 28px; }
  .tgnb-vorschau .tgnb-aufmacher-text { font-size: 17px; }
  .tgnb-vorschau .tgnb-aufmacher-bild img { height: 190px; }
  .tgnb-vorschau .tgnb-aufmacher-bilder img { height: 110px; }
  .tgnb-vorschau .tgnb-meldungsliste .et_pb_post { display: block; }
  .tgnb-vorschau .tgnb-meldungsliste .post-meta { margin-top: 3px !important; }
}