/*
Theme Name:   Fischereiverein Marktoberdorf – Divi Child
Description:  Divi-5-Child-Theme für den Fischereiverein Marktoberdorf e.V. – DSGVO-konform und barrierefrei umgesetzt von eq-valent (UX & Branding) und fairwilly® Webservice (Webentwicklung & KI-Automatisierung).
Author:       eq-valent & fairwilly® Webservice
Author URI:   https://www.fairwilly.de
Template:     Divi
Version:      2.0.0
*/

/* --- Skip-Link / Screenreader-Text (WCAG 2.4.1) --- */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Hoehere Spezifitaet, um Divis Inline-:focus-Regel zu schlagen.
   clip-path:none ist entscheidend - Divi versteckt per clip-path, nicht clip.
   Heller Hintergrund + Rahmen, damit der Kasten sich vom dunkelblauen
   Navi-Balken absetzt. font-size fluid 16px (Mobile) -> 20px (Desktop). */
body .skip-link.screen-reader-text:focus {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100000;
  display: inline-block;
  width: auto;
  height: auto;
  margin: 0;
  padding: 10px 18px;
  clip: auto;
  clip-path: none;
  overflow: visible;
  background: #ffffff;
  color: #000a58;
  border: 2px solid #000a58;
  border-radius: 4px;
  text-decoration: underline;
  font-weight: 600;
  line-height: 1.2;
  font-size: clamp(1rem, 0.9167rem + 0.4167vw, 1.25rem);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* kein dauerhafter Fokusring am Inhalt nach dem Sprung */
#main-content:focus {
  outline: none;
}

/* Map: rounded corners on the wrapper (reliable clipping, no slivers) */
.gewaesser-karte {
	border-radius: 10px;
	overflow: hidden;
}

/* Frontend only: fill column height. Scoped with :not(.et-fb) because
   the Visual Builder DOM resolves the 100% chain against the full page. */
body:not(.et-fb) .et_flex_column:has(.gewaesser-karte--crop:not(.gewaesser-karte--banner)) .et_pb_group,
body:not(.et-fb) .et_flex_column:has(.gewaesser-karte--crop:not(.gewaesser-karte--banner)) .et_pb_code,
body:not(.et-fb) .et_flex_column:has(.gewaesser-karte--crop:not(.gewaesser-karte--banner)) .et_pb_code_inner,
body:not(.et-fb) .gewaesser-karte--crop:not(.gewaesser-karte--banner) {
	height: 100%;
}
.gewaesser-karte--crop {
	position: relative;
}
.gewaesser-karte--crop svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

/* Visual Builder: preview the excerpt at a fixed aspect ratio */
.et-fb .gewaesser-karte--crop {
	aspect-ratio: 5 / 4;
}

/* Startseite: breiter Karten-Banner. Definiert seine Hoehe selbst
   (gleicher clamp wie die Section), haengt also NICHT an der
   100%-Kette der Detailseiten. SVG fuellt per --crop-Absolute + slice. */
.gewaesser-karte--banner {
	position: relative;
	height: clamp(360px, 37.5vw, 566px);
}

/* Visual Builder: Banner mit echter Hoehe statt 5/4-Preview */
.et-fb .gewaesser-karte--crop.gewaesser-karte--banner {
	aspect-ratio: auto;
	height: clamp(360px, 37.5vw, 566px);
}

/* Overview: full map at natural aspect ratio */
.gewaesser-karte--full svg {
	width: 100%;
	height: auto;
	display: block;
}

/* --- Fix: Optimierer-injizierte <picture>-Elemente ---------------------- */
/* Der AVIF-Konverter wickelt Divis img in ein <picture>, das Divis
   Width-Setting (stylt nur wrap + img) nicht kennt. Ohne diese Regel
   schrumpft das Bild im Flex-Wrap auf seine intrinsische Breite. */
.et_pb_image .et_pb_image_wrap picture {
	width: 100%;
}

.et-db #et-boc .et-l [data-loop-item].et-last-child,
.et-db #et-boc .et-l [data-loop-item].et-last-child .et_pb_link,
.et-db #et-boc .et-l [data-loop-item].et-last-child .et_pb_text {
    border-bottom: none !important;
}

/* Ausnahme zur Loop-Border-Regel: Kategorie-Pills (/aktuelles/) sind
   Loop-Items, ihr Rahmen ist aber gewollt - Border am letzten Item
   wiederherstellen. Klasse "pill-filter" an der Container-Gruppe.
   WICHTIG: nur am Text-Modul (der Pill selbst) wiederherstellen -
   auf dem Loop-Wrapper ergaebe es eine zweite, gerade Linie. */
.et-db #et-boc .et-l .pill-filter [data-loop-item].et-last-child .et_pb_text,
.et-db #et-boc .et-l .pill-filter .et_pb_text[data-loop-item].et-last-child {
    border-bottom: 1.5px solid currentColor !important;
}

/* Fangstatistik-Section + Hero-Button ausblenden, wenn Feld leer */
.keine-fangstatistik #fangstatistik,
.keine-fangstatistik .anker--fangstatistik {
    display: none;
}

/* --- Bild fuellt seine Group komplett, Hoehe folgt der Nachbar-Card ---- */
/* Klasse "bildCover" am Image-Modul. Anders als Aspect Ratio 3:2
   (feste Proportion = Luecke, sobald der Nachbartext hoeher/niedriger
   ausfaellt) streckt sich das Bild auf die Spaltenhoehe und wird per
   object-fit: cover beschnitten. Beim Stacking auf dem Phone faellt
   das Bild automatisch auf sein natuerliches Seitenverhaeltnis zurueck. */
.et-db #et-boc .et-l .et_pb_group:has(> .bildCover) {
    align-self: stretch;
    display: flex;
}
.et-db #et-boc .et-l .bildCover {
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
}
.et-db #et-boc .et-l .bildCover .et_pb_image_wrap,
.et-db #et-boc .et-l .bildCover picture {
    width: 100%;
    height: 100% !important;
}
.et-db #et-boc .et-l .bildCover img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    aspect-ratio: auto !important;
}

/* --- Hero-Parallax: Beschnitt fuer den JS-Effekt (a11y.js) ------------- */
/* overflow "clip" statt "hidden" (hidden wuerde einen Scroll-Container
   erzeugen). Bewegung und Skalierung kommen komplett aus a11y.js -
   hier KEIN scale/animation setzen, sonst multipliziert sich das mit
   dem JS-transform (doppelte Skalierung). */
.et-db #et-boc .et-l .HeroParallax,
.et-db #et-boc .et-l .HeroParallax .et_pb_image_wrap {
    overflow: clip !important;
}

/* --- Partner-Logos: einheitliche Groesse, linksbuendig ------------------ */
/* Klasse "partner-logo" am Image-Modul. Feste Boxhoehe, Logo skaliert
   proportional hinein (contain), linksbuendig auf der Textachse der
   Karte. Breite Wortmarken und hohe Signets wirken so gleich schwer. */
.et-db #et-boc .et-l .partner-logo {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;                 /* Divi-Zentrierung neutralisieren */
}
.et-db #et-boc .et-l .partner-logo .et_pb_image_wrap,
.et-db #et-boc .et-l .partner-logo picture {
    height: 100%;
    width: auto;
    max-width: 100%;
    margin: 0;                        /* Auto-Margins (Zentrierung) raus */
}
.et-db #et-boc .et-l .partner-logo img {
    height: 100%;
    width: auto;
    max-width: 260px;   /* Deckel fuer sehr breite Wortmarken */
    object-fit: contain;
}

/* --- Vereinsgeschichte: eingeklappt nur die ersten 5 Eintraege --------- */
/* Klasse "historie-eingeklappt" setzt/entfernt a11y.js per Button. */
.et-db #et-boc .et-l .historie-liste.historie-eingeklappt > .et_pb_group:nth-child(n+6) {
    display: none;
}

/* --- Toggle-Buttons (Historie + Termine): Icon wechselt mit Zustand ---- */
/* Divi 5 rendert Button-Icons ueber ::before (ETmodules-Font,
   data-icon-Attribut). "L" = Plus, "K" = Minus. Divi kodiert den
   Content hart, daher Override ueber das aria-expanded-Attribut,
   das das jeweilige Toggle-JS beim Klick setzt. */
.et-db #et-boc .et-l .js-historie-toggle[aria-expanded="true"]::before,
.et-db #et-boc .et-l .js-termine-toggle[aria-expanded="true"]::before {
    content: "K" !important;   /* ETmodules-Glyphe: Minus */
}

/* --- Termine: eingeklappt nur die ersten 8 kommenden Termine ----------- */
/* Klasse "termin-limit-versteckt" setzt/entfernt das Termine-JS aus der
   functions.php. Eigene Klasse statt inline display, damit sich das
   Limit nicht mit dem Ausblenden vergangener Termine (inline style)
   in die Quere kommt. Ohne JS bleibt die Liste komplett sichtbar. */
.et-db #et-boc .et-l .termin-card.termin-limit-versteckt {
    display: none !important;
}

/* Aktive Kategorie-Pill: blau gefuellt, weisse Schrift.
   Klasse "pill-aktiv" setzt a11y.js auf den Archivseiten. */
.et-db #et-boc .et-l .pill-filter .pill-aktiv.et_pb_text {
    background-color: #000A58;
    border-color: #000A58;
}
.et-db #et-boc .et-l .pill-filter .pill-aktiv.et_pb_text p {
    color: #fff;
}

/* --- WS Form: Fehlerzustand beruhigt sich waehrend der Eingabe --------- */
/* Invalides Feld mit Fokus zeigt den normalen Fokusrahmen statt Rot,
   die Fehlermeldung pausiert (visibility statt display: kein
   Layout-Springen). Beim Verlassen ohne Korrektur kehrt der
   Fehlerzustand zurueck - Rot bleibt also als Signal erhalten. */
.wsf-field-wrapper:focus-within .wsf-field[aria-invalid="true"],
.wsf-field[aria-invalid="true"]:focus {
    border-color: #000A58 !important;
}
.wsf-field-wrapper:focus-within .wsf-invalid-feedback {
    visibility: hidden !important;
}
/* --- Rechtliches: Impressum / Datenschutzerklaerung -------------------- */
/* Klasse "rechtliches" an der Section. Schriften und Farben folgen den
   Divi-Global-Variablen: Heading = Plus Jakarta Sans, Body = Nunito Sans,
   alles in Dunkelblau (Primary #000A58). Links dauerhaft unterstrichen -
   noetig, weil sie farblich nicht mehr vom Fliesstext abweichen
   (WCAG 1.4.1: Farbe allein reicht nicht als Link-Kennzeichnung).
   Groessen fluid (Mobile -> Desktop), Gewicht 600 statt 400 -
   Plus Jakarta Sans wirkt in Regular als Ueberschrift zu duenn. */
.rechtliches h2 {
    font-family: 'Plus Jakarta Sans', Helvetica, Arial, sans-serif;
    font-size: clamp(1.75rem, 1.4rem + 1.75vw, 2.8125rem); /* 28px -> 45px */
    font-weight: 600;
    line-height: 1.4em;
    color: #000A58;
}
.rechtliches h3 {
    font-family: 'Plus Jakarta Sans', Helvetica, Arial, sans-serif;
    font-size: clamp(1.375rem, 1.2083rem + 0.8333vw, 1.875rem); /* 22px -> 30px */
    font-weight: 600;
    line-height: 1.4em;
    color: #000A58;
}
.rechtliches h4 {
    font-family: 'Plus Jakarta Sans', Helvetica, Arial, sans-serif;
    font-size: clamp(1.0625rem, 1.0208rem + 0.2083vw, 1.1875rem); /* 17px -> 19px */
    font-weight: 600;
    line-height: 1.4em;
    color: #000A58;
}
.rechtliches p,
.rechtliches ul li,
.rechtliches ul li a {
    font-family: 'Nunito Sans', Helvetica, Arial, sans-serif;
    font-size: clamp(1rem, 0.9583rem + 0.2083vw, 1.125rem); /* 16px -> 18px */
    line-height: 1.4em;
    color: #000A58;
}
.rechtliches p a,
.rechtliches ul li a {
    color: #000A58;
    text-decoration: underline;
    text-underline-offset: 2px;   /* etwas Luft zur Grundlinie */
}
.rechtliches p a:hover,
.rechtliches ul li a:hover {
    text-decoration-thickness: 2px;   /* dezentes Hover-Feedback */
}

/* --- Footer: Rechtslinks-Zeile vereinheitlichen ------------------------ */
/* Klasse "footer-rechtslinks" an die Zeile mit Impressum / Datenschutz /
   Cookie-Einstellungen. Hover-Linie als Border statt text-decoration,
   eng unter dem Text (padding 0, 1px) - bewusst dezenter als die
   Menuelinien (10px / 1.5px). Transparente Border im Ruhezustand =
   kein Layout-Sprung beim Hover. */
.et-db #et-boc .et-l .footer-rechtslinks a {
    text-decoration: none !important;
    padding-bottom: 0px;
    border-bottom: 1px solid transparent;
}
.et-db #et-boc .et-l .footer-rechtslinks a:hover,
.et-db #et-boc .et-l .footer-rechtslinks a:focus-visible {
    border-bottom-color: #FFFFFF;   /* Weiss, wie der Linktext */
}

/* --- Beitragsbilder (Blog-Loop): einheitlicher 3:2-Zuschnitt ----------- */
/* Klasse "beitragsbild-cover" am Image-Modul in der Loop (einmal im
   Template setzen, gilt fuer alle Items). aspect-ratio + object-fit
   cover beschneidet Hoch- und Querformate auf dieselbe Kartenhoehe -
   live verifiziert: 3 Karten einheitlich statt 232-551px. picture-
   Regel wegen der Optimierer-Wrapper (FastPixel/AVIF), height mit
   !important gegen Divis Inline-Height. */
.et-db #et-boc .et-l .beitragsbild-cover .et_pb_image_wrap,
.et-db #et-boc .et-l .beitragsbild-cover picture {
    width: 100%;
    display: block;
}
.et-db #et-boc .et-l .beitragsbild-cover img {
    width: 100%;
    aspect-ratio: 3 / 2;
    height: auto !important;
    object-fit: cover;
    display: block;
}


/* --- Header-Logo: ragt oben und unten aus der Header-Zeile ------------- */
/* Zielbild: das Logo ist hoeher als die weisse Header-Zeile und ragt je
   20px oben in die blaue TopNavi und unten ins Hero-Bild.

   Zwei Dinge muessen zusammenkommen:

   1. overflow: visible auf der GANZEN Kette (Section > Row > Column >
      Menue-Modul > Logo-Wrap). Ein einziges "hidden" irgendwo darin
      kappt das Logo an der Kante - genau das war der Ausgangszustand.

   2. Negative Margins SYMMETRISCH (-20px oben UND unten). Divi zentriert
      die Menuezeile vertikal an der Box des Logo-Wraps. Ein einseitiger
      Versatz (nur margin-bottom oder ein translateY) verschiebt diese
      Mitte - das Menue wandert mit. Symmetrisch schrumpft die Box
      gleichmaessig, die Mitte bleibt liegen, das Menue steht weiter
      mittig im weissen Bereich.

   z-index: 10 legt das Logo VOR die blaue TopNavi und das Hero-Bild -
   ohne das verschwindet der Ueberstand dahinter. */
.et-db #et-boc .et-l .et_pb_menu,
.et-db #et-boc .et-l .et_pb_menu_inner_container,
.et-db #et-boc .et-l .et_pb_menu .et_pb_menu__logo-wrap,
.et-db #et-boc .et-l .et_pb_menu .et_pb_menu__logo {
    overflow: visible !important;
}
/* Auch die Header-Section und ihre Row muessen offen sein, sonst kappt
   die uebergeordnete Ebene den Ueberstand trotz offener Modul-Kette. */
.et-db #et-boc .et-l--header .et_pb_section,
.et-db #et-boc .et-l--header .et_pb_row,
.et-db #et-boc .et-l--header .et_flex_column {
    overflow: visible !important;
}

.et-db #et-boc .et-l .et_pb_menu__logo-wrap {
    position: relative;
    z-index: 10;
    margin-top: -20px;      /* ragt in die blaue TopNavi */
    margin-bottom: -20px;   /* ragt ins Hero-Bild */
}

/* Phone/Tablet: Divi stapelt Logo und Menue - der Ueberstand wuerde ins
   Menue statt ins Bild ragen, daher zurueck auf null. */
@media (max-width: 980px) {
    .et-db #et-boc .et-l .et_pb_menu__logo-wrap {
        margin-top: 0;
        margin-bottom: 0;
    }
}

/* --- Menuepunkte vertikal mittig in der Header-Zeile ------------------- */
/* Divi setzt an den Menue-Links line-height: 14px bei font-size: 20px -
   die Zeilenbox ist kleiner als die Schrift. Der Link wird per stretch auf
   die volle Zeilenhoehe (100px) gezogen, der Text sitzt aber mit
   padding: 31px 0 OBEN in der Content-Box statt in deren Mitte. Ergebnis:
   Text ca. 12px zu hoch, darunter der Rest als Leerraum - das Menue wirkt
   dadurch aus der Mitte gerutscht, obwohl die Zeile selbst stimmt.
   Live gemessen: Versatz Textmitte zu Zeilenmitte vorher 12px, danach 0px.
   Das Padding bleibt bewusst unangetastet, damit der Hover-Unterstrich an
   seiner Position bleibt - zentriert wird ueber den Flex-Container. */
.et-db #et-boc .et-l .et_pb_menu .et-menu > li > a {
    display: flex;
    align-items: center;
    line-height: 1.3;
}