/* Theme Name: Enfold Child Theme URI: https://www.floorball.at Description: Child-Theme für floorball.at (Österreichischer Floorball Verband) Author: Gregor Wimmer / HERZBLUAT Author URI: https://www.herzbluat.at Template: enfold Version: 0.2.0 Text Domain: enfold-child */ /* ============================================================ ÖFBV CHILD-THEME · Etappe 1 — Fundament Stand: 15.10.2026 GRUNDSATZ Farben, Schrift und Containerbreite kommen aus den Enfold-Theme-Optionen. Hier steht nur, was Enfold nicht kann. ============================================================ */ /* ------------------------------------------------------------ 1 TOKENS — nur was Enfold nicht hat ------------------------------------------------------------ */ :root { /* 1.1 Markenverlauf, Richtung Left Bottom To Right Top = 45deg */ --oe-cyan: #0887d8; --oe-magenta: #b2006a; --oe-cyan-dunkel: #0670b4; --oe-verlauf: linear-gradient(45deg, var(--oe-cyan) 0%, var(--oe-magenta) 100%); --oe-verlauf-quer: linear-gradient(90deg, var(--oe-cyan) 0%, var(--oe-magenta) 100%); /* 1.2 Markenrot nur für Flächen ohne Schrift. Weiß auf #ff0000 erreicht 4,0:1 und fällt durch WCAG AA. Für alles mit Schrift gilt --enfold-main-color-primary. */ --oe-rot-marke: #ff0000; /* 1.3 Fehlerfarbe, bewusst nicht das Markenrot */ --oe-fehler: #b3001b; /* 1.4 Abstände, 8er-Raster */ --oe-sp-1: 8px; --oe-sp-2: 16px; --oe-sp-3: 24px; --oe-sp-4: 32px; --oe-sp-6: 48px; --oe-sp-8: 64px; --oe-sp-10: 80px; /* 1.5 Bausteine */ --oe-akzent: 4px; --oe-chip-hoehe: 38px; --oe-bild-ratio: 16 / 9; } /* ------------------------------------------------------------ 2 SEKTIONSÜBERSCHRIFTEN ------------------------------------------------------------ */ /* Gilt fuer jede Sonderueberschrift der Website, ohne Ausnahme. Bis 15.10. waren Ueberschriften in Verlaufsbaendern (Klasse custom-color-heading, weisse Schrift) ausgenommen. Die Baender sind inzwischen aufgeloest, siehe Abschnitt 21, deshalb gilt dieselbe Behandlung ueberall. */ #top div.av-special-heading { margin-bottom: var(--oe-sp-4); padding-bottom: 0; } /* Luft zwischen den Abschnitten. Enfold haengt jeder Ueberschrift, die auf ein anderes Element folgt, eine Klasse el_after_… an. Genau die bekommt den Abstand nach oben. Die erste Ueberschrift eines Containers hat sie nicht und bleibt deshalb unberuehrt — sonst entstuende doppelte Luft unter dem Menue und in den Farbsektionen. */ #top div.av-special-heading[class*="el_after_"] { clear: both; margin-top: var(--oe-sp-10); } /* Der Code-Block faellt bei der Google-Karte auf null Hoehe zusammen, weil deren Container gefloatet ist. Der folgende Abschnitt haengt sich dadurch direkt an die Karte. flow-root laesst den Block seine Inhalte wieder umschliessen. */ #top .avia_codeblock { display: flow-root; } /* Enfold floatet Spaltenreihen. Eine Ueberschrift danach muss freigestellt werden, sonst laeuft sie neben dem Float. Beim Freistellen kann der Browser den oberen Aussenabstand verschlucken, deshalb an dieser Stelle Innenabstand. */ #top div.av-special-heading[class*="el_after_av_one_"], #top div.av-special-heading[class*="el_after_av_two_"], #top div.av-special-heading[class*="el_after_av_three_"], #top div.av-special-heading[class*="el_after_av_four_"] { margin-top: 0; padding-top: var(--oe-sp-10); } /* Spalten liegen bei Enfold als Tabellenzellen vor und ignorieren margin-bottom. Der Abstand nach der letzten Kachelreihe kommt deshalb von der folgenden Ueberschrift, nicht von der Kachel. */ @media (max-width: 767px) { #top div.av-special-heading[class*="el_after_"] { margin-top: var(--oe-sp-8); } } /* Enfold laesst die Ueberschrift nach links schweben, damit rechts daneben Platz fuer die Zierlinie bleibt. Dadurch faellt der Container auf null Hoehe zusammen und der Verlaufsstrich landet ueber dem Text statt darunter. Also kein Float. */ #top div.av-special-heading > .av-special-heading-tag { float: none; display: block; width: auto; } #top .av-special-heading .special-heading-border { display: none; } /* Der Strich haengt an der Ueberschrift selbst, nicht am Block. So steht er auch dann direkt unter dem Titel, wenn darunter noch eine Unterueberschrift folgt. */ #top div.av-special-heading > .av-special-heading-tag::after { content: ''; display: block; width: 64px; height: var(--oe-akzent); background: var(--oe-verlauf); margin-top: var(--oe-sp-2); } /* Nicht im Cookie-Hinweis, dort ist die Ueberschrift reine Beschriftung und kein Seitenabschnitt. */ #top #av-consent-extra-info .av-special-heading-tag::after, #top .avia-cookie-consent .av-special-heading-tag::after, #top .av-inline-modal .av-special-heading-tag::after { display: none !important; } #top div.av-special-heading.center > .av-special-heading-tag::after, #top div.av-special-heading[class*="av-align-center"] > .av-special-heading-tag::after { margin-left: auto; margin-right: auto; } /* Enfold blendet das Feld fuer die Unterueberschrift nur im Stil "Modern" ein. Dieser Stil setzt die Ueberschrift zusaetzlich auf Magerschnitt 300. Wir holen das Gewicht zurueck, damit "Modern (links)" und "Standard" identisch aussehen. */ #top div.av-special-heading.modern-quote .av-special-heading-tag { font-weight: 600; } /* ------------------------------------------------------------ 2b UNTERUEBERSCHRIFT Erklaerender Einzeiler unter der Sektionsueberschrift. ------------------------------------------------------------ */ #top div.av-special-heading .av-subheading { margin-top: var(--oe-sp-2); max-width: 62ch; line-height: 1.5; font-size: 17px; } #top div.av-special-heading .av-subheading p:last-child { margin-bottom: 0; } /* ------------------------------------------------------------ 3 SEITENTITEL MIT MARKENVERLAUF ------------------------------------------------------------ */ #top .title_container { background: var(--oe-verlauf); border: 0; padding: var(--oe-sp-8) 0; } #top .title_container .main-title, #top .title_container .main-title a { color: #fff; font-weight: 700; text-transform: none; letter-spacing: 0; line-height: 1.15; text-shadow: none; } #top .title_container .breadcrumb, #top .title_container .breadcrumb a, #top .title_container .breadcrumb .sep { color: rgba(255, 255, 255, .92); text-shadow: none; } #top .title_container .breadcrumb a:hover { color: #fff; } @media (max-width: 767px) { #top .title_container { padding: var(--oe-sp-6) 0; } } /* ------------------------------------------------------------ 4 NAVIGATION ------------------------------------------------------------ */ #top .av-main-nav > li { position: relative; } #top .av-main-nav > li.current-menu-item > a::after, #top .av-main-nav > li.current-menu-ancestor > a::after, #top .av-main-nav > li.current_page_item > a::after { content: ''; position: absolute; left: 15px; right: 15px; bottom: 10px; height: 3px; background: var(--oe-verlauf); } #top .av-main-nav ul { min-width: 260px; } #top .av-main-nav ul li a { line-height: 1.35; padding-top: 12px; padding-bottom: 12px; height: auto; min-height: 0; } #top .av-main-nav ul li { border-bottom: 1px solid rgba(0, 0, 0, .08); } #top .av-main-nav ul li:last-child { border-bottom: 0; } /* ------------------------------------------------------------ 5 FOKUS SICHTBAR MACHEN ------------------------------------------------------------ */ #top a:focus-visible, #top button:focus-visible, #top input:focus-visible, #top select:focus-visible, #top textarea:focus-visible, #top .avia-button:focus-visible, #top [tabindex]:focus-visible { outline: 3px solid var(--oe-magenta); outline-offset: 3px; border-radius: 2px; } #top *:focus:not(:focus-visible) { outline: none; } /* ------------------------------------------------------------ 6 BUTTONS ------------------------------------------------------------ */ #top .avia-button { border-radius: 0; font-weight: 700; letter-spacing: .02em; min-height: 44px; transition: background-color .2s ease, color .2s ease; } /* ------------------------------------------------------------ 7 TOUCH-ZIELE (WCAG 2.5.8) ------------------------------------------------------------ */ @media (max-width: 989px) { #top .av-main-nav a, #top .av-burger-menu-main, #top .avia-button, #top #scroll-top-link { min-height: 44px; } } /* ------------------------------------------------------------ 8 TYPOGRAFIE-DETAILS ------------------------------------------------------------ */ #top h1, #top h2, #top h3, #top h4, #top .slide-entry-title, #top .av-masonry-entry-title { hyphens: auto; -webkit-hyphens: auto; text-wrap: balance; } /* ------------------------------------------------------------ 9 NACH-OBEN-BUTTON ------------------------------------------------------------ */ #top #scroll-top-link { border-radius: 0; border: 0; width: 44px; height: 44px; line-height: 44px; } /* ------------------------------------------------------------ 10 BEWEGUNGSEMPFINDLICHKEIT ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { #top *, #top *::before, #top *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } /* Enfold blendet Elemente per Animation ein. Werden die Animationen gekappt, bleiben sie im Startzustand stehen (halbe Groesse, unsichtbar). Deshalb hier der Endzustand. .slide-entry-wrap ist ausgenommen: dort steuert das Karussell die Sichtbarkeit bewusst. */ #top .avia_animate_when_visible:not(.slide-entry-wrap), #top .avia_animate_when_almost_visible:not(.slide-entry-wrap), #top .av-animated-generic, #top .avia-gallery-thumb img, #top .avia_transform img { transform: none !important; opacity: 1 !important; } /* Nachtrag 15.10.: Die Ausnahme oben war zu weit gefasst. Das Karussell setzt per JavaScript opacity: 0 und blendet anschliessend ein. Faellt die Animation weg, bleibt es auf 0 stehen — auf 641 Beitraegen war der Block "Mehr News" dadurch unsichtbar. Die jeweils aktive Seite des Karussells bekommt den Endzustand deshalb fest. */ #top .avia-content-slider .slide-entry-wrap.active-slide { opacity: 1 !important; } } /* ------------------------------------------------------------ 11 TEASERBOX — vorbereitet, noch nicht aktiv Wird scharf, sobald das Blog-Raster-Element die CSS-Klasse "oe-teaser" trägt (Phase 3). ------------------------------------------------------------ */ #top .oe-teaser .slide-entry-wrap { display: flex; flex-wrap: wrap; gap: var(--oe-sp-4); } #top .oe-teaser .slide-entry { width: calc((100% - 2 * var(--oe-sp-4)) / 3); margin: 0; float: none; clear: none; display: flex; flex-direction: column; position: relative; background: #fff; padding-left: var(--oe-akzent); } #top .oe-teaser .slide-entry::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--oe-akzent); background: var(--oe-verlauf); } #top .oe-teaser .slide-image { margin: 0; order: 1; overflow: hidden; aspect-ratio: var(--oe-bild-ratio); background: #f5f5f5; display: block; } #top .oe-teaser .slide-image img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; display: block; transition: transform .3s ease; } #top .oe-teaser .slide-entry:hover .slide-image img { transform: scale(1.03); } #top .oe-teaser .image-overlay { display: none !important; } #top .oe-teaser .slide-content { order: 2; display: flex; flex-direction: column; padding: 0; margin: 0; } #top .oe-teaser .slide-meta { order: 1; align-self: flex-start; margin: calc(-1 * var(--oe-chip-hoehe)) 0 0 0; padding: 0; min-height: 0; border: 0; position: relative; z-index: 2; } #top .oe-teaser .slide-meta-time, #top .oe-teaser .slide-meta time { display: block; font-size: 15px; height: var(--oe-chip-hoehe); line-height: var(--oe-chip-hoehe); padding: 0 var(--oe-sp-2); background: #1d1d1b; color: #fff; font-weight: 700; letter-spacing: .02em; border: 0; margin: 0; } #top .oe-teaser .slide-meta-del, #top .oe-teaser .slide-meta-comments { display: none; } /* Enfold verpackt den Titel in
. Die Reihenfolge muss daher auf dem header sitzen, sonst steht der Titel vor dem Datums-Chip und der Chip legt sich darueber. */ #top .oe-teaser .entry-content-header { order: 2; display: block; margin: 0; padding: 0; border: 0; } #top .oe-teaser .slide-entry-title { margin: var(--oe-sp-2) var(--oe-sp-2) 0 var(--oe-sp-2); font-size: 19px; line-height: 1.3; font-weight: 700; } #top .oe-teaser .entry-footer, #top .oe-teaser .pagination-wrap { display: none; } #top .oe-teaser .entry-content { order: 3; margin: var(--oe-sp-1) var(--oe-sp-2) var(--oe-sp-3) var(--oe-sp-2); line-height: 1.5; } /* Weiterlesen-Link. Enfold haengt ihn in den Auszug. Damit er in allen drei Kacheln einer Reihe auf gleicher Hoehe steht, wird die Kachel bis zur vollen Hoehe gestreckt und der Link nach unten geschoben. Gestaltung wie die Links in den Projektkacheln. */ /* Keine feste Hoehe setzen: ein definiertes Mass haengt die Dehnung der Flex-Zeile aus, und die Kacheln einer Reihe werden wieder unterschiedlich hoch. align-items: stretch erledigt es. */ #top .oe-teaser .slide-entry-wrap { align-items: stretch; } #top .oe-teaser .slide-content { flex: 1 1 auto; } #top .oe-teaser .entry-content { flex: 1 1 auto; display: flex; flex-direction: column; } #top .oe-teaser .read-more-link { margin-top: auto; padding-top: var(--oe-sp-2); } #top .oe-teaser .read-more-link .more-link { font-size: 17px; color: var(--oe-cyan-dunkel); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } #top .oe-teaser .read-more-link .more-link:hover, #top .oe-teaser .read-more-link .more-link:focus-visible { color: var(--oe-magenta); } #top .oe-teaser .read-more-link .more-link-arrow { display: none; } @media (max-width: 989px) { #top .oe-teaser .slide-entry { width: calc((100% - var(--oe-sp-4)) / 2); } } @media (max-width: 767px) { #top .oe-teaser .slide-entry-wrap { gap: var(--oe-sp-3); } #top .oe-teaser .slide-entry { width: 100%; } } /* ============================================================ ETAPPE 2 — Fließtext, Partner, Socket, Teilen-Leiste Stand: 15.10.2026 Schriftgrößen stehen in den Enfold-Theme-Optionen (Basis 17 px, H1 40, H2 30, H3 24). ============================================================ */ /* ------------------------------------------------------------ 12 FLIESSTEXT Zeilenhöhe an die neue Basisgröße angepasst. ------------------------------------------------------------ */ #top .entry-content-wrapper p, #top .template-page .entry-content-wrapper p, #top .post-entry .entry-content p { line-height: 1.6; margin-bottom: var(--oe-sp-2); } #top .entry-content-wrapper li { line-height: 1.6; } /* ------------------------------------------------------------ 13 PARTNERLOGOS Aufbau: .avia-gallery > .avia-gallery-thumb (ein Container) > a (ein Element je Logo). Die Logos werden sonst in 121x121-Quadrate gezwungen. Hier auf gemeinsame optische Höhe gebracht, Seitenverhältnis bleibt erhalten. ------------------------------------------------------------ */ #top #partner .avia-gallery { border: 0; height: auto !important; } #top #partner .avia-gallery-thumb { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--oe-sp-6) var(--oe-sp-8); width: auto !important; height: auto !important; float: none !important; border: 0 !important; } #top #partner .avia-gallery-thumb a { flex: 0 0 auto; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; display: block; overflow: visible; } #top #partner .avia-gallery-thumb img { transform: none !important; opacity: .78; width: 160px !important; max-width: 100%; height: 80px !important; object-fit: contain; border: 0 !important; padding: 0 !important; display: block; filter: grayscale(100%); opacity: .78; transition: filter .25s ease, opacity .25s ease; } #top #partner .avia-gallery-thumb a:hover img, #top #partner .avia-gallery-thumb a:focus-visible img { filter: none; opacity: 1; } /* Fördergeber, die Vollfarbe verlangen: im Element die CSS-Klasse oe-logo-vollfarbe setzen */ #top .oe-logo-vollfarbe img { filter: none !important; opacity: 1 !important; height: 72px !important; max-width: 200px; } @media (max-width: 767px) { #top #partner .avia-gallery-thumb { gap: var(--oe-sp-4); } #top #partner .avia-gallery-thumb img { height: 44px !important; max-width: 120px; } } /* ------------------------------------------------------------ 14 SOCKET Abschlussleiste mit Verlaufskante. ------------------------------------------------------------ */ #top #socket { background: #1d1d1b; border-top: 3px solid transparent; border-image: var(--oe-verlauf-quer) 1; padding: var(--oe-sp-3) 0; } #top #socket, #top #socket .copyright, #top #socket a { font-size: 15px; line-height: 1.5; } #top #socket a { text-decoration: underline; text-underline-offset: 2px; } /* ------------------------------------------------------------ 15 TEILEN-LEISTE Nur noch im Footer. Sechs Fremdmarkenfarben waren das lauteste Element der Seite, hier auf Grau zurückgenommen. ------------------------------------------------------------ */ #top .shariff ul li a { background: #f0f0f0 !important; color: #1d1d1b !important; border-radius: 0 !important; border: 0 !important; } #top .shariff ul li a:hover, #top .shariff ul li a:focus-visible { background: #1d1d1b !important; color: #fff !important; } #top .shariff ul li a .share_text, #top .shariff ul li a .shariff-text { font-size: 13px; font-weight: 600; } /* ------------------------------------------------------------ 16 BILDER ALLGEMEIN Verhindert Verzerrung, wo Enfold feste Maße setzt. ------------------------------------------------------------ */ #top .av-masonry-image-container, #top .av-masonry-entry .av-masonry-image-container { background-size: cover; background-position: center 35%; } /* ------------------------------------------------------------ 17 KACHELN — Projekte und Verantwortung Liegt auf Enfold-Spalten mit der Klasse "oe-kachel". ------------------------------------------------------------ */ /* Enfold gibt jeder Spaltenreihe 50 px Abstand nach oben. Unter einer Ueberschrift ergibt das zusammen mit deren 32 px zu viel. Deshalb: direkt unter der Ueberschrift kein eigener Abstand, zwischen zwei Kachelreihen die regulaeren 32 px. */ #top .flex_column_table.av-equal-height-column-flextable:not(:first-child):has(> .oe-kachel) { margin-top: 0; } #top .flex_column_table:has(> .oe-kachel) + .flex_column_table.av-equal-height-column-flextable:not(:first-child):has(> .oe-kachel) { margin-top: var(--oe-sp-4); } #top .oe-kachel { background: #fff; box-shadow: 0 0 0 1px #e3e3e3; border-left: var(--oe-akzent) solid transparent; border-image: var(--oe-verlauf) 1; padding: var(--oe-sp-3) !important; } #top .oe-kachel .av_textblock_section { margin: 0; } #top .oe-kachel .avia_textblock { padding: 0; } #top .oe-kachel h3 { margin: 0 0 var(--oe-sp-2) 0; padding: 0; font-size: 19px; font-weight: 700; line-height: 1.3; text-transform: none; letter-spacing: 0; } #top .oe-kachel .oe-kuerzel { display: inline-block; margin-left: var(--oe-sp-1); font-size: 13px; font-weight: 400; letter-spacing: .08em; color: #666; text-transform: uppercase; vertical-align: middle; } #top .oe-kachel .avia_textblock p { margin: 0; font-size: 17px; line-height: 1.5; } /* Der Button ist hier kein Button, sondern ein Textlink. */ #top .oe-kachel .avia-button-wrap { margin: var(--oe-sp-3) 0 0 0; padding: 0; } #top .oe-kachel .avia-button { font-size: 17px !important; line-height: 1.5; background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0; min-width: 0; color: var(--oe-cyan-dunkel) !important; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } #top .oe-kachel .avia-button:hover { color: var(--oe-magenta) !important; } @media (min-width: 768px) { #top .oe-kachel { min-height: 100%; } } /* Am Telefon stehen die Kacheln untereinander. Dann gilt ein einheitlicher Abstand, auch ueber den Reihenwechsel hinweg. */ @media (max-width: 767px) { #top .oe-kachel { margin-bottom: var(--oe-sp-3) !important; } #top .flex_column_table:has(> .oe-kachel) + .flex_column_table.av-equal-height-column-flextable:not(:first-child):has(> .oe-kachel) { margin-top: 0; } } /* Abschluss der Seite: Abstand zur Fusszeile. */ #top #main > .container_wrap_first + .container_wrap:last-of-type, #top .avia-builder-el-last.av-special-heading { margin-bottom: 0; } /* ------------------------------------------------------------ 18 FOOTERNAVIGATION Vier Spalten in der Seite "Footer Content". ------------------------------------------------------------ */ #top .oe-footerspalte { padding-top: var(--oe-sp-8); margin-bottom: var(--oe-sp-4); } #top .oe-footerspalte h3 { margin: 0 0 var(--oe-sp-2) 0; padding: 0; font-size: 15px; font-weight: 700; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; } #top .oe-footerspalte ul { list-style: none; margin: 0; padding: 0; } #top .oe-footerspalte p, #top .oe-footerspalte li { margin: 0 0 var(--oe-sp-1) 0; font-size: 15px; line-height: 1.6; } #top .oe-footerspalte a { text-decoration: none; } #top .oe-footerspalte a:hover, #top .oe-footerspalte a:focus-visible { text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 767px) { #top .oe-footerspalte { padding-top: var(--oe-sp-4); } #top .oe-footerspalte:first-of-type { padding-top: var(--oe-sp-6); } } /* ------------------------------------------------------------ 19 SOCKEL-LINKS Rechtliche Links mit Trennzeichen, Umsetzungshinweis leiser. ------------------------------------------------------------ */ #top #socket .copyright { color: rgba(255, 255, 255, .82); } #top #socket .copyright a { color: #fff; } #top #socket .copyright a:not(:last-child)::after { content: '·'; display: inline-block; margin: 0 .2em 0 .55em; color: rgba(255, 255, 255, .45); text-decoration: none; } #top #socket .oe-umsetzung { opacity: .7; } /* ------------------------------------------------------------ 20 COOKIE-HINWEIS Leiste am unteren Rand. Zustimmen und Ablehnen sind gleich gross und gleich gut erreichbar: eine Ablehnung darf nicht schwerer fallen als eine Zustimmung. ------------------------------------------------------------ */ #top .avia-cookie-consent { background: #fff; color: #1d1d1b; border-top: var(--oe-akzent) solid transparent; border-image: var(--oe-verlauf-quer) 1; box-shadow: 0 -8px 28px rgba(0, 0, 0, .14); padding: var(--oe-sp-3) 0; } #top .avia-cookie-consent .container { display: flex; flex-wrap: wrap; align-items: center; gap: var(--oe-sp-2) var(--oe-sp-3); } #top .avia-cookie-consent .avia_cookie_text { flex: 1 1 340px; margin: 0; font-size: 15px; line-height: 1.5; color: #1d1d1b; } #top .avia-cookie-consent .avia-cookie-consent-button { flex: 0 0 auto; margin: 0; min-width: 190px; min-height: 44px; line-height: 40px; padding: 0 var(--oe-sp-3); font-size: 15px; font-weight: 700; text-align: center; text-decoration: none; border: 2px solid #1d1d1b; border-radius: 0; } #top .avia-cookie-consent .avia-cookie-consent-button-1 { background: #1d1d1b !important; color: #fff !important; } #top .avia-cookie-consent .avia-cookie-consent-button-2 { background: #fff !important; color: #1d1d1b !important; } #top .avia-cookie-consent .avia-cookie-consent-button-1:hover, #top .avia-cookie-consent .avia-cookie-consent-button-2:hover { background: var(--oe-magenta) !important; border-color: var(--oe-magenta); color: #fff !important; } #top .avia-cookie-consent .avia-cookie-consent-button-3 { background: transparent !important; color: #1d1d1b !important; border: 0; min-width: 0; min-height: 44px; line-height: 44px; padding: 0; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } #top .avia-cookie-consent .avia-cookie-consent-button-3:hover { color: var(--oe-magenta) !important; background: transparent !important; } @media (max-width: 767px) { #top .avia-cookie-consent .container { gap: var(--oe-sp-2); } #top .avia-cookie-consent .avia-cookie-consent-button-1, #top .avia-cookie-consent .avia-cookie-consent-button-2 { flex: 1 1 100%; min-width: 0; } } /* Die Sprachwahl von GTranslate klebt fix unten rechts und legt sich ueber die Buttons des Cookie-Hinweises. Sie auszublenden waere falsch: wer kein Deutsch liest, muss die Sprache vor der Einwilligung wechseln koennen. Also rueckt sie hoch, solange der Hinweis steht. */ /* GTranslate setzt bottom:0 als Inline-Stil, deshalb !important. */ body:has(.avia-cookie-consent:not(.cookiebar-hidden)) .gt_switcher_wrapper { bottom: 110px !important; } @media (max-width: 767px) { body:has(.avia-cookie-consent:not(.cookiebar-hidden)) .gt_switcher_wrapper { bottom: 250px !important; } } /* Der Einstellungsdialog bekommt dieselbe Buttonlogik wie die Leiste: zustimmen dunkel gefuellt, ablehnen gleich gross mit Rahmen. Enfold faerbt beide rot, das macht die Ablehnung optisch zur Nebensache. */ #top #av-consent-extra-info .avia-cookie-consent-button { min-width: 190px; min-height: 44px; line-height: 40px; padding: 0 var(--oe-sp-3); margin: 0 var(--oe-sp-2) 0 0; font-size: 15px; font-weight: 700; text-align: center; text-decoration: none; border: 2px solid #1d1d1b; border-radius: 0; } #top #av-consent-extra-info .avia-cookie-consent-button-4 { background: #1d1d1b !important; color: #fff !important; } #top #av-consent-extra-info .avia-cookie-consent-button-5 { background: #fff !important; color: #1d1d1b !important; } #top #av-consent-extra-info .avia-cookie-consent-button-4:hover, #top #av-consent-extra-info .avia-cookie-consent-button-5:hover { background: var(--oe-magenta) !important; border-color: var(--oe-magenta); color: #fff !important; } #top #av-consent-extra-info .tab { font-size: 15px; line-height: 1.4; min-height: 44px; } #top #av-consent-extra-info .tab_content p, #top #av-consent-extra-info .tab_content li { font-size: 15px; line-height: 1.6; } @media (max-width: 767px) { #top #av-consent-extra-info .avia-cookie-consent-button { display: block; width: 100%; min-width: 0; margin: 0 0 var(--oe-sp-2) 0; } } /* ------------------------------------------------------------ 21 VERLAUFSBÄNDER AUFLÖSEN — ganze Website ------------------------------------------------------------ */ /* Ausgangslage am 15.10.: 1.344 der 3.326 Sektionen liegen auf einem vollflaechigen Markenverlauf, darin 1.337 Ueberschriften in Weiss. Auf der Startseite wurden diese Baender bereits aufgeloest (Variante A, vom Auftraggeber bestaetigt). Hier geschieht dasselbe fuer alle uebrigen Seiten und Beitraege. Der Verlauf steckt nicht in einer benennbaren Klasse, sondern in einer je Sektion erzeugten Regel mit zufaelliger Kennung. Ansetzen laesst er sich trotzdem: Keine einzige Sektion der Website benutzt ein Hintergrundbild — geprueft ueber alle 3.326 Sektionen, Werte nur bg_color und bg_gradient. Ein Verlauf ist technisch ein Hintergrundbild. Wer also saemtliche Hintergrundbilder von Sektionen abschaltet, trifft genau die Verlaufsbaender und sonst nichts. */ /* background-image allein genuegt nicht: Die erzeugte Regel schreibt den Verlauf als Kurzform "background" und setzt dabei die Hintergrundfarbe auf durchsichtig. Faellt nur das Bild weg, scheint hinter dem Abschnitt die dunkle Flaeche der Footer-Seite durch. Deshalb die Farbe des Farbschemas main_color ausdruecklich wieder setzen — fuer alle 3.326 Sektionen derselbe Wert, weil die Website kein zweites Farbschema benutzt. */ #top .avia-section { background-image: none; background-color: var(--enfold-main-color-bg); } /* Die weisse Schrift darin wird zur normalen Textfarbe. Ohne das waeren 1.337 Ueberschriften weiss auf weiss. Das Gewicht muss hoch sein: Enfold setzt in heading.min.css "#top #wrap_all .custom-color-heading .av-special-heading-tag { color: inherit }". Die Ueberschrift erbt also vom Container, und der bekommt sein Weiss aus der je Sektion erzeugten Datei. Beide Stellen muessen uebersteuert werden. */ #top #wrap_all .av-special-heading.custom-color-heading, #top #wrap_all .av-special-heading.custom-color-heading > .av-special-heading-tag { color: var(--enfold-main-color-heading); } #top #wrap_all .av-special-heading.custom-color-heading .av-subheading, #top #wrap_all .av-special-heading.custom-color-heading .av-subheading * { color: var(--enfold-main-color-color); } /* Mittig gesetzte Ueberschriften nach links. Die Startseite arbeitet linksbuendig mit Verlaufsstrich, der Rest der Website stand auf "Modern, zentriert". Das war der sichtbarste Unterschied zwischen Startseite und Unterseiten. */ #top div.av-special-heading.modern-centered, #top div.av-special-heading.modern-centered > .av-special-heading-tag, #top div.av-special-heading.modern-centered .av-subheading { text-align: left; } /* ------------------------------------------------------------ 22 SEITENKOPF Die erste Ueberschrift einer Seite wird in functions.php, Abschnitt 8, auf H1 gehoben. Hier bekommt sie das Gewicht des Seitentitels. ------------------------------------------------------------ */ #top .av-special-heading-h1 > .av-special-heading-tag { font-size: 40px; line-height: 1.2; font-weight: 700; } #top .oe-ersatzkopf { margin-bottom: var(--oe-sp-4); } @media (max-width: 767px) { #top .av-special-heading-h1 > .av-special-heading-tag { font-size: 30px; } } /* Die aufgeloesten Baender bringen den grosszuegigen Innenabstand der Sektion mit. Als erster Block einer Seite ergibt das zu viel Luft unter dem Menue. */ #top .avia-section.avia-builder-el-first { padding-top: var(--oe-sp-8); } @media (max-width: 767px) { #top .avia-section.avia-builder-el-first { padding-top: var(--oe-sp-6); } } /* ------------------------------------------------------------ 23 "MEHR NEWS" IM BEITRAG 641 Beiträge enden mit einem Beitrags-Karussell. Es bekommt dieselbe Kartensprache wie "Aktuelles" auf der Startseite. ------------------------------------------------------------ */ /* Abgrenzung: Das Raster der Startseite traegt avia-content-grid-active, das Karussell im Beitrag avia-content-slider-active. Nur Letzteres ist gemeint, Abschnitt 11 bleibt unberuehrt. */ #top .avia-content-slider-active:not(.oe-teaser) .slide-entry { position: relative; background: #fff; padding-left: var(--oe-akzent); } #top .avia-content-slider-active:not(.oe-teaser) .slide-entry::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--oe-akzent); background: var(--oe-verlauf); } #top .avia-content-slider-active:not(.oe-teaser) .slide-image { margin: 0; display: block; overflow: hidden; aspect-ratio: var(--oe-bild-ratio); background: #f5f5f5; } #top .avia-content-slider-active:not(.oe-teaser) .slide-image img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; display: block; } #top .avia-content-slider-active:not(.oe-teaser) .image-overlay { display: none !important; } /* Das Datum wandert als Chip auf die Bildunterkante, wie auf der Startseite. Die Umsortierung bleibt im Inhaltsblock und ruehrt die Breiten des Karussells nicht an. */ #top .avia-content-slider-active:not(.oe-teaser) .slide-content { display: flex; flex-direction: column; padding: 0; margin: 0; } #top .avia-content-slider-active:not(.oe-teaser) .slide-meta { order: 1; align-self: flex-start; margin: calc(-1 * var(--oe-chip-hoehe)) 0 0 0; padding: 0; min-height: 0; border: 0; position: relative; z-index: 2; width: auto; } #top .avia-content-slider-active:not(.oe-teaser) .slide-meta-time, #top .avia-content-slider-active:not(.oe-teaser) .slide-meta time { display: block; font-size: 15px; height: var(--oe-chip-hoehe); line-height: var(--oe-chip-hoehe); padding: 0 var(--oe-sp-2); background: #1d1d1b; color: #fff; font-weight: 700; letter-spacing: .02em; border: 0; margin: 0; } #top .avia-content-slider-active:not(.oe-teaser) .slide-meta-del, #top .avia-content-slider-active:not(.oe-teaser) .slide-meta-comments, #top .avia-content-slider-active:not(.oe-teaser) .av-vertical-delimiter, #top .avia-content-slider-active:not(.oe-teaser) .entry-footer { display: none; } #top .avia-content-slider-active:not(.oe-teaser) .entry-content-header { order: 2; display: block; margin: 0; padding: 0; border: 0; } #top .avia-content-slider-active:not(.oe-teaser) .slide-entry-title { margin: var(--oe-sp-2) var(--oe-sp-2) 0 var(--oe-sp-2); font-size: 17px; line-height: 1.3; font-weight: 700; text-transform: none; } #top .avia-content-slider-active:not(.oe-teaser) .slide-entry-excerpt { order: 3; margin: var(--oe-sp-1) var(--oe-sp-2) var(--oe-sp-2) var(--oe-sp-2); font-size: 15px; line-height: 1.5; } #top .avia-content-slider-active:not(.oe-teaser) .slide-entry-excerpt a, #top .avia-content-slider-active:not(.oe-teaser) .read-more-link .more-link { color: var(--oe-cyan-dunkel); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } #top .avia-content-slider-active:not(.oe-teaser) .more-link-arrow { display: none; } /* ------------------------------------------------------------ 24 ZEILENLÄNGE ------------------------------------------------------------ */ /* Fließtext über die volle Containerbreite ergibt 124 Zeichen je Zeile. Lesbar sind 60 bis 80: Das Auge findet den Zeilenanfang sonst nicht zuverlässig wieder. Die Begrenzung wirkt nur dort, wo der Container breiter ist als das Maß — in Kacheln, Fußspalten und Teaserboxen bleibt alles unberührt. */ /* Das Maß ist eine feste Länge, keine ch-Angabe. ch rechnet mit der Schriftgröße des jeweiligen Elements: Der Fließtext kam so auf 605 px, die Tabelle mit ihren 13 px Grundschrift auf 492. Mit einer festen Länge liegen Text und Tabelle exakt übereinander. 640 px ergeben bei 17 px Schrift rund 70 Zeichen je Zeile. */ :root { --oe-mass: 640px; } #top .avia_textblock > p, #top .avia_textblock > ul, #top .avia_textblock > ol, #top .avia_textblock > blockquote { max-width: var(--oe-mass); } /* Tabellen und Bilder brauchen die volle Breite. */ #top .avia_textblock > table, #top .avia_textblock > figure { max-width: none; } /* ------------------------------------------------------------ 25 BILDKOPF Erzeugt in functions.php, Abschnitt 9, aus dem Beitragsbild der Seite. Seiten ohne eigenes Beitragsbild bekommen keinen. ------------------------------------------------------------ */ #top .oe-bildkopf { padding: 0; } #top .oe-bildkopf .container { padding-top: var(--oe-sp-4); padding-bottom: 0; } #top .oe-bildkopf-rahmen { display: block; overflow: hidden; aspect-ratio: 21 / 9; background: #f5f5f5; } #top .oe-bildkopf-rahmen img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; } @media (max-width: 767px) { #top .oe-bildkopf-rahmen { aspect-ratio: var(--oe-bild-ratio); } } /* Steht ein Bildkopf über der Seite, braucht der Abschnitt darunter keinen zusätzlichen Abstand nach oben. */ #top .oe-bildkopf + .avia-section.avia-builder-el-first, #top .oe-bildkopf + div > .avia-section.avia-builder-el-first { padding-top: var(--oe-sp-4); } /* ------------------------------------------------------------ 26 HINWEISKASTEN Für Aussagen, die nicht im Fließtext untergehen dürfen. ------------------------------------------------------------ */ #top .oe-hinweis { background: #f5f5f5; border-left: var(--oe-akzent) solid transparent; border-image: var(--oe-verlauf) 1; padding: var(--oe-sp-3); margin: 0; } #top .oe-hinweis > :first-child { margin-top: 0; } #top .oe-hinweis > :last-child { margin-bottom: 0; } #top .oe-hinweis h3 { font-size: 19px; line-height: 1.3; font-weight: 700; text-transform: none; margin: 0 0 var(--oe-sp-2) 0; } /* Die Liste traegt eigene Aufzaehlungszeichen, deshalb kein list-style. Die Zeilenlaenge bleibt aber am Mass: der Kasten ist ueber 1.100 px breit, eine lange Zeile darin waere sonst doppelt so lang wie jeder andere Text auf der Website. */ #top .oe-hinweis ul { margin: 0; padding: 0; list-style: none; max-width: var(--oe-mass); } /* Folgt auf eine Liste eine weitere Zwischenüberschrift, braucht sie Abstand nach oben. */ #top .oe-hinweis ul + h3, #top .oe-hinweis p + h3 { margin-top: var(--oe-sp-3); } #top .oe-hinweis li { position: relative; padding-left: var(--oe-sp-3); margin: 0 0 var(--oe-sp-1) 0; font-size: 17px; line-height: 1.5; } #top .oe-hinweis li::before { content: ''; position: absolute; left: 0; top: .55em; width: 10px; height: 2px; background: var(--oe-cyan-dunkel); } /* ------------------------------------------------------------ 27 KONTAKTBLOCK ------------------------------------------------------------ */ /* Steht der Block als einzige Spalte in seiner Reihe, zieht Enfold ihn auf die volle Breite. Eine Visitenkarte über 1.210 px ist keine. Spalten sind Tabellenzellen und ignorieren max-width, deshalb zuerst auf Block umstellen. Das Maß ist dasselbe wie für Fließtext. */ #top .flex_column.oe-kontakt { display: block; max-width: var(--oe-mass); background: #fff; box-shadow: 0 0 0 1px #e3e3e3; border-left: var(--oe-akzent) solid transparent; border-image: var(--oe-verlauf) 1; padding: var(--oe-sp-3) !important; } @media (max-width: 989px) { #top .flex_column.oe-kontakt { max-width: none; } } /* Die Rollenzeile gilt überall, nicht nur im Kontaktblock: Vorstand, Geschäftsstelle, Ansprechpersonen auf Projektseiten. */ #top .oe-rolle, #top .oe-kontakt .oe-rolle { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #666; display: block; margin-bottom: var(--oe-sp-1); } #top .oe-kontakt h3 { font-size: 24px; line-height: 1.2; font-weight: 700; text-transform: none; margin: 0 0 var(--oe-sp-2) 0; } #top .oe-kontakt p { font-size: 17px; line-height: 1.6; margin: 0 0 var(--oe-sp-1) 0; max-width: none; } /* ------------------------------------------------------------ 28 AUFZÄHLUNGEN IN KACHELN ------------------------------------------------------------ */ #top .oe-kachel ul { margin: var(--oe-sp-1) 0 0 0; padding: 0; list-style: none; max-width: none; } #top .oe-kachel li { position: relative; padding-left: var(--oe-sp-2); margin: 0 0 var(--oe-sp-1) 0; font-size: 15px; line-height: 1.5; } #top .oe-kachel li:last-child { margin-bottom: 0; } #top .oe-kachel li::before { content: ''; position: absolute; left: 0; top: .55em; width: 8px; height: 2px; background: var(--oe-cyan-dunkel); } /* Die Kürzel-Zeile steht als eigene Zeile unter dem Titel, nicht dahinter, sobald sie ein ganzer Begriff ist. */ #top .oe-kachel h3 .oe-kuerzel { display: block; margin-top: var(--oe-sp-1); letter-spacing: .06em; } /* ------------------------------------------------------------ 29 PERSONENKACHEL Vorstand und Ansprechpersonen. Baut auf der Kachel auf, setzt nur die Besonderheiten. ------------------------------------------------------------ */ #top .oe-person h3 { margin-bottom: var(--oe-sp-1); } #top .oe-person p { font-size: 15px; line-height: 1.5; margin: 0 0 var(--oe-sp-1) 0; } #top .oe-person p:last-child { margin-bottom: 0; } #top .oe-person p strong { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: #666; font-weight: 700; } /* ------------------------------------------------------------ 30 NACHBESSERUNGEN 15.10., spät ------------------------------------------------------------ */ /* 30.1 Lange Wörter sprengen Kacheln. Eine Mailadresse wie sebastian.koller@specialolympics.at ist für den Browser ein einziges Wort und lief über die Kante. */ #top .oe-kachel, #top .oe-kontakt, #top .oe-hinweis { overflow-wrap: break-word; word-break: break-word; } /* 30.2 Unvollständige Kachelreihen. Enfold legt Spalten als Tabellenzellen an. Eine Reihe mit nur zwei von drei Kacheln verteilt die freie Breite auf die beiden übrigen — aus Dritteln werden Hälften. Die Reihe wird deshalb auf Flexbox umgestellt, dann behält jede Kachel ihr Maß. */ #top .flex_column_table:has(> .oe-kachel) { display: flex; flex-wrap: wrap; gap: var(--oe-sp-4); width: 100%; } #top .flex_column_table:has(> .oe-kachel) > .flex_column { display: block; margin: 0 !important; float: none; } /* Zwischen den Spalten sitzen leere Platzhalter, die im Tabellenlayout den Abstand erzeugt haben. Im Flex-Layout zählen sie als eigene Elemente mit und drängen die dritte Kachel in die nächste Zeile. */ #top .flex_column_table:has(> .oe-kachel) > :not(.flex_column) { display: none; } #top .flex_column_table > .oe-kachel.av_one_half { width: calc((100% - var(--oe-sp-4)) / 2); } #top .flex_column_table > .oe-kachel.av_one_third { width: calc((100% - 2 * var(--oe-sp-4)) / 3); } #top .flex_column_table > .oe-kachel.av_one_fourth { width: calc((100% - 3 * var(--oe-sp-4)) / 4); } @media (max-width: 989px) { #top .flex_column_table > .oe-kachel.av_one_third, #top .flex_column_table > .oe-kachel.av_one_fourth { width: calc((100% - var(--oe-sp-4)) / 2); } } @media (max-width: 767px) { #top .flex_column_table:has(> .oe-kachel) { gap: var(--oe-sp-3); } #top .flex_column_table > .oe-kachel.av_one_half, #top .flex_column_table > .oe-kachel.av_one_third, #top .flex_column_table > .oe-kachel.av_one_fourth { width: 100%; } } /* 30.3 Abstand unter dem Seitentitel. Steht die Überschrift allein in ihrem Abschnitt, summierten sich Abschnittsrand, Überschriftenabstand und der Innenabstand des folgenden Inhaltsbereichs auf 133 px. */ #top .avia-section:has(.entry-content-wrapper > .av-special-heading:only-child) { padding-bottom: 0; } #top .avia-section:has(.entry-content-wrapper > .av-special-heading:only-child) + .av_default_container_wrap .template-page.content { padding-top: var(--oe-sp-2); } #top .avia-section:has(.entry-content-wrapper > .av-special-heading:only-child) .av-special-heading { margin-bottom: 0; padding-bottom: 0; } /* 30.4 Tabellen. Die Kadertabellen zogen drei kurze Spalten auf 1.210 px auseinander. Tabellen richten sich jetzt nach ihrem Inhalt. */ /* Kadertabellen stehen nicht im Textblock, sondern in einem eigenen Container mit der Klasse avia-table. */ /* Die Tabelle trägt die Klasse selbst, sie steht nicht darin. Und sie steht auf table-layout: fixed, was alle Spalten gleich breit macht — bei Vorname, Nachname und Verein je 403 px. */ #top .avia_textblock table { width: auto; max-width: 100%; table-layout: auto; border-collapse: collapse; margin: var(--oe-sp-2) 0 0 0; } /* Kadertabellen stehen unter dem Fließtext und sollen dieselbe Breite haben wie er. Feste Spaltenanteile sorgen dafür, dass Kader und Betreuerstab auf allen fünf Teamseiten identisch aussehen — ohne sie richtet sich jede Tabelle nach ihrem eigenen längsten Eintrag. */ #top table.avia-table { width: 100%; max-width: var(--oe-mass); table-layout: fixed; border-collapse: collapse; margin: var(--oe-sp-2) 0 0 0; } #top table.avia-table th:nth-child(1), #top table.avia-table td:nth-child(1) { width: 25%; } #top table.avia-table th:nth-child(2), #top table.avia-table td:nth-child(2) { width: 30%; } #top table.avia-table th:nth-child(3), #top table.avia-table td:nth-child(3) { width: 45%; } #top .avia_textblock th, #top .avia_textblock td, #top table.avia-table th, #top table.avia-table td { padding: var(--oe-sp-1) var(--oe-sp-4) var(--oe-sp-1) 0; text-align: left; vertical-align: top; font-size: 17px; line-height: 1.5; border: 0; background: none; white-space: normal; } #top .avia_textblock thead th, #top table.avia-table tr.avia-heading-row th { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #666; font-weight: 700; border-bottom: 2px solid #1d1d1b; padding-bottom: var(--oe-sp-1); } #top .avia_textblock tbody tr + tr td, #top table.avia-table tr + tr td { border-top: 1px solid #e3e3e3; } /* Die letzte Spalte braucht rechts keinen Abstand mehr. */ #top table.avia-table th:last-child, #top table.avia-table td:last-child, #top .avia_textblock th:last-child, #top .avia_textblock td:last-child { padding-right: 0; } /* 30.5 Handlungsaufforderung. Ein Satz im Fließtext ist kein Aufruf. */ #top .oe-cta { background: #1d1d1b; border-left: var(--oe-akzent) solid transparent; border-image: var(--oe-verlauf) 1; padding: var(--oe-sp-4) !important; } #top .oe-cta .avia-button { margin-top: var(--oe-sp-3); } #top .oe-cta h3 { font-size: 24px; line-height: 1.25; font-weight: 700; text-transform: none; color: #fff; margin: 0 0 var(--oe-sp-1) 0; } #top .oe-cta p { font-size: 17px; line-height: 1.6; color: #e3e3e3; margin: 0; max-width: var(--oe-mass); } #top .oe-cta a:not(.avia-button) { color: #fff; text-decoration: underline; text-underline-offset: 3px; } #top .oe-cta + .avia-button-wrap, #top .oe-cta-knopf { margin-top: var(--oe-sp-3); } /* ------------------------------------------------------------ 31 KADERTABELLEN ------------------------------------------------------------ */ /* Die Tabelle soll so breit sein wie der Text darüber, und die Spalten sollen über alle Teamseiten hinweg gleich liegen. Mit automatischer Spaltenbreite richtet sich jede Tabelle nach ihrem eigenen Inhalt — der Betreuerstab bekam dadurch andere Spalten als der Kader. Deshalb feste Anteile. */ #top table.avia-table.oe-kader { width: 100%; max-width: var(--oe-mass); table-layout: fixed; } #top table.oe-kader th:nth-child(1), #top table.oe-kader td:nth-child(1), #top table.oe-kader th:nth-child(2), #top table.oe-kader td:nth-child(2) { width: 28%; } #top table.oe-kader th:nth-child(3), #top table.oe-kader td:nth-child(3) { width: 44%; } @media (max-width: 767px) { #top table.oe-kader th:nth-child(1), #top table.oe-kader td:nth-child(1), #top table.oe-kader th:nth-child(2), #top table.oe-kader td:nth-child(2) { width: 30%; } #top table.oe-kader th:nth-child(3), #top table.oe-kader td:nth-child(3) { width: 40%; } } /* ------------------------------------------------------------ 32 FETTER TEXT ------------------------------------------------------------ */ /* Enfold färbt jedes im Inhalt mit der Primärfarbe, also Rot. Rot ist auf dieser Website die Linkfarbe. Fett gesetzte Wörter sahen dadurch aus wie Links, die keine sind — besonders auffällig bei den Fettzeilen, die den Fließtext gliedern. Fett bleibt fett, die Farbe kommt vom umgebenden Text. */ #top .avia_textblock strong, #top .avia_textblock b, #top .oe-kachel strong, #top .oe-hinweis strong, #top .oe-kontakt strong, #top .av-subheading strong { color: inherit; } /* ------------------------------------------------------------ 33 SUCHFELD AUF DER FEHLERSEITE ------------------------------------------------------------ */ /* Wer auf der Fehlerseite landet, hat ein Ziel und findet es nicht. Das Suchfeld ist deshalb das erste Angebot, nicht das letzte. Erzeugt vom Kurzbefehl [oe_suche] in functions.php. */ #top .oe-suche { display: flex; gap: var(--oe-sp-1); max-width: var(--oe-mass); margin: var(--oe-sp-3) 0 0 0; } /* WordPress setzt die Beschriftung nur per Klasse unsichtbar, das Theme bringt die Regel dafuer nicht mit. Sonst steht das Wort "Suchbegriff" sichtbar vor dem Feld. Fuer Screenreader bleibt es lesbar, deshalb kein display: none. */ #top .oe-suche .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; } #top .oe-suche input[type="search"] { flex: 1 1 auto; min-width: 0; margin: 0; padding: 12px var(--oe-sp-2); font-size: 17px; line-height: 1.4; color: #1d1d1b; background: #fff; border: 1px solid #c9c9c9; border-radius: 0; box-shadow: none; -webkit-appearance: none; appearance: none; } #top .oe-suche input[type="search"]:focus { outline: 2px solid var(--enfold-main-color-primary); outline-offset: 2px; border-color: var(--enfold-main-color-primary); } #top .oe-suche button { flex: 0 0 auto; margin: 0; padding: 12px var(--oe-sp-3); font-size: 15px; font-weight: 700; line-height: 1.4; color: #fff; background: var(--enfold-main-color-primary); border: 0; border-radius: 0; cursor: pointer; } #top .oe-suche button:hover, #top .oe-suche button:focus { background: #1d1d1b; } /* Am Telefon untereinander, sonst wird das Eingabefeld zu schmal. */ @media (max-width: 479px) { #top .oe-suche { flex-wrap: wrap; } #top .oe-suche input[type="search"], #top .oe-suche button { flex: 1 1 100%; } } /* ------------------------------------------------------------ 34 ABSTAND NACH EINER KACHELREIHE ------------------------------------------------------------ */ /* Folgt auf eine Spaltenreihe ein Textblock, stossen beide aneinander: die Reihe bringt keinen Abstand nach unten mit, der Textblock keinen nach oben. Aufgefallen auf der Shop-Seite, wo der Hinweiskasten direkt an den Kacheln klebte. */ /* Die Spaltenreihe schwebt (float), der folgende Abschnitt beginnt deshalb auf derselben Hoehe und nur sein Inhalt weicht aus. Ein margin am Abschnitt verpufft dadurch. Erst clear holt ihn unter die Reihe, der Abstand gehoert danach an den Textblock selbst. */ #top .flex_column_table + .av_textblock_section { clear: both; padding-top: var(--oe-sp-4); } /* ------------------------------------------------------------ 35 MEHRERE HINWEISKAESTEN HINTEREINANDER ------------------------------------------------------------ */ /* Der Hinweiskasten bringt bewusst keinen Aussenabstand mit, damit er direkt unter seiner Ueberschrift sitzt. Stehen zwei oder drei hintereinander, verschmelzen sie dadurch zu einem einzigen grauen Block. Aufgefallen auf der FAMP-Seite mit drei Kaesten. */ #top .av_textblock_section:has(> .oe-hinweis) + .av_textblock_section > .oe-hinweis { margin-top: var(--oe-sp-3); } /* ------------------------------------------------------------ 36 TERMINTABELLE ------------------------------------------------------------ */ /* Die allgemeinen Spaltenanteile 25/30/45 stammen von den Kadertabellen mit Vorname, Nachname, Verein. Eine Terminliste braucht andere: die Bezeichnung des Angebots ist die laengste Angabe, das Datum die kuerzeste. */ #top table.avia-table.oe-termine th:nth-child(1), #top table.avia-table.oe-termine td:nth-child(1) { width: 44%; } #top table.avia-table.oe-termine th:nth-child(2), #top table.avia-table.oe-termine td:nth-child(2) { width: 26%; } #top table.avia-table.oe-termine th:nth-child(3), #top table.avia-table.oe-termine td:nth-child(3) { width: 30%; } /* ------------------------------------------------------------ 37 TABELLENZEILEN HATTEN ZWEI TEXTFARBEN ------------------------------------------------------------ */ /* Enfold faerbt die Zeilen einer Tabelle abwechselnd #919191 und #666666. Das sieht nach einem Fehler aus, und #919191 erreicht auf Weiss nur einen Kontrast von 2,8:1 — WCAG AA verlangt 4,5:1. Betraf alle Tabellen, auch die sieben Kadertabellen. Jetzt durchgehend die Textfarbe des Fliesstexts. */ #top table.avia-table td, #top table.avia-table tbody tr td, #top .avia_textblock table td { color: var(--enfold-main-color-font, #666); } /* ------------------------------------------------------------ 38 ABLAUFTABELLE (ZWEI SPALTEN) ------------------------------------------------------------ */ /* Zeit links, Taetigkeit rechts. Ohne eigene Anteile wuerde die Zeitspalte die Haelfte der Breite belegen. */ #top table.avia-table.oe-ablauf th:nth-child(1), #top table.avia-table.oe-ablauf td:nth-child(1) { width: 25%; } #top table.avia-table.oe-ablauf th:nth-child(2), #top table.avia-table.oe-ablauf td:nth-child(2) { width: 75%; } /* ------------------------------------------------------------ 39 ABSTAND UNTER TABELLEN ------------------------------------------------------------ */ /* Die Tabellenregel setzt nur einen Abstand nach oben. Folgt eine Ueberschrift, klebt sie an der letzten Zeile. Aufgefallen auf der Eventseite, wo der Ablaufplan direkt in den naechsten Abschnitt uebergeht. */ #top table.avia-table, #top .avia_textblock table { margin-bottom: var(--oe-sp-4); } /* ------------------------------------------------------------ 40 TABELLE MIT VIER SPALTEN ------------------------------------------------------------ */ /* Die allgemeine Tabellenregel definiert nur drei Spaltenanteile, die zusammen 100 Prozent ergeben. Eine vierte Spalte bekaeme damit null Breite. Fuer vierspaltige Tabellen eigene Anteile. */ #top table.avia-table.oe-tabelle4 th:nth-child(1), #top table.avia-table.oe-tabelle4 td:nth-child(1) { width: 25%; } #top table.avia-table.oe-tabelle4 th:nth-child(2), #top table.avia-table.oe-tabelle4 td:nth-child(2) { width: 25%; } #top table.avia-table.oe-tabelle4 th:nth-child(3), #top table.avia-table.oe-tabelle4 td:nth-child(3) { width: 32%; } #top table.avia-table.oe-tabelle4 th:nth-child(4), #top table.avia-table.oe-tabelle4 td:nth-child(4) { width: 18%; } /* ------------------------------------------------------------ 41 MEISTERTAFEL ------------------------------------------------------------ */ /* Jahr, Meister, Vize. Die Jahresspalte braucht wenig Platz, die beiden Vereinsspalten gleich viel. Ohne eigene Anteile gaelten die 25/30/45 der Kadertabellen. */ #top table.avia-table.oe-meister th:nth-child(1), #top table.avia-table.oe-meister td:nth-child(1) { width: 16%; } #top table.avia-table.oe-meister th:nth-child(2), #top table.avia-table.oe-meister td:nth-child(2) { width: 42%; } #top table.avia-table.oe-meister th:nth-child(3), #top table.avia-table.oe-meister td:nth-child(3) { width: 42%; } /* ------------------------------------------------------------ 42 KONTAKTTABELLEN ------------------------------------------------------------ */ /* Die Kontaktseite traegt zwei Tabellen mit anderem Zuschnitt als die Kadertabellen. Die Bereichsspalte muss Zeilen wie "Sportliche Leitung IFL, W-IFL und Bundesliga" aufnehmen und braucht deshalb mehr als die 25 % der Vorgabe. Die Mailspalte steht hinten und hat keinen Abstand nach rechts, dort ist der Anteil also voll nutzbar. */ #top table.avia-table.oe-kontakt3 th:nth-child(1), #top table.avia-table.oe-kontakt3 td:nth-child(1) { width: 38%; } #top table.avia-table.oe-kontakt3 th:nth-child(2), #top table.avia-table.oe-kontakt3 td:nth-child(2) { width: 26%; } #top table.avia-table.oe-kontakt3 th:nth-child(3), #top table.avia-table.oe-kontakt3 td:nth-child(3) { width: 36%; } /* Vier Spalten: Team, Funktion, Name, E-Mail. Ohne eigene Anteile bliebe die vierte Spalte auf null, weil die drei Anteile der Kadertabellen bereits 100 % ergeben (Falle: table-layout ist fixed). */ #top table.avia-table.oe-kontakt4 th:nth-child(1), #top table.avia-table.oe-kontakt4 td:nth-child(1) { width: 18%; } #top table.avia-table.oe-kontakt4 th:nth-child(2), #top table.avia-table.oe-kontakt4 td:nth-child(2) { width: 17%; } #top table.avia-table.oe-kontakt4 th:nth-child(3), #top table.avia-table.oe-kontakt4 td:nth-child(3) { width: 29%; } #top table.avia-table.oe-kontakt4 th:nth-child(4), #top table.avia-table.oe-kontakt4 td:nth-child(4) { width: 36%; } /* Eine Mailadresse ist fuer den Browser ein einziges Wort. "sebastian.koller@specialolympics.at" ist breiter als jede Spalte und wuerde bei table-layout: fixed ueber die Kante laufen, statt umzubrechen. */ #top table.avia-table.oe-kontakt3 td, #top table.avia-table.oe-kontakt4 td { overflow-wrap: break-word; word-break: break-word; } /* ------------------------------------------------------------ 43 NEWSARCHIV ------------------------------------------------------------ */ /* Die Archivseite listet alle 646 Beitraege ueber das Plugin Content Views. Was es ausliefert, stammt aus Bootstrap und nicht aus dem Theme: gruene Weiterlesen-Knoepfe, blaue Seitenzahlen, 18-px-Titel mit Zeilenhoehe 1,1 und — der auffaelligste Punkt — jeder Auszug steckt in einem und war damit auf 65 Seiten rot und halbfett. */ /* 43.1 Das Raster von Content Views ist 1.240 px breit, der Container 1.210: Bootstrap zieht die Reihe mit negativen Aussenabstaenden 15 px nach links und rechts hinaus und holt den Inhalt mit 15 px Innenabstand zurueck. Die Trennlinie unten stand dadurch 15 px ueber den Text hinaus. */ #top .pt-cv-view, #top .pt-cv-page { width: auto; margin-left: 0; margin-right: 0; } #top .pt-cv-content-item { padding-left: 0; padding-right: 0; } /* 43.2 Bild links in fester Breite, Seitenverhaeltnis wie ueberall. Das Plugin liefert 710 x 375 px aus. */ #top .pt-cv-thumbnail { width: 280px !important; height: auto !important; aspect-ratio: var(--oe-bild-ratio); object-fit: cover; margin: 0 var(--oe-sp-3) var(--oe-sp-2) 0; background: #f5f5f5; } /* Die Textspalte ist eine Tabellenzelle mit fester Breite und liess rechts vom verkleinerten Bild eine Luecke. Als Block mit eigenem Formatierungskontext legt sie sich neben den Float und nutzt den freien Platz. */ #top .pt-cv-colwrap { display: block; width: auto; overflow: hidden; } /* 43.3 Jeder Eintrag wird eine Zeile mit Trennlinie darunter. */ #top .pt-cv-content-item { padding-bottom: var(--oe-sp-4); margin-bottom: var(--oe-sp-4); border-bottom: 1px solid #e3e3e3; } #top .pt-cv-page .pt-cv-content-item:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; } /* 43.4 Titel und Auszug in die Typoskala. Der Titel ist beim Plugin ein h4, das laesst sich von hier nicht aendern. */ #top .pt-cv-title { margin: 0 0 var(--oe-sp-1) 0; } #top .pt-cv-title a { font-size: 19px; line-height: 1.3; font-weight: 700; color: #1d1d1b; text-decoration: none; } #top .pt-cv-title a:hover, #top .pt-cv-title a:focus-visible { color: var(--oe-cyan-dunkel); } #top .pt-cv-content { font-size: 17px; line-height: 1.6; max-width: var(--oe-mass); } /* Das um den Auszug ist eine Huelle des Plugins, keine Hervorhebung. Enfold faerbt jedes mit der Primaerfarbe, deshalb stand der ganze Auszug in Rot. */ /* cv.css setzt ".pt-cv-view strong, .pt-cv-view strong *" auf font-weight 600 mit !important. Ohne Gegengewicht bleibt der Auszug halbfett, deshalb hier ausnahmsweise ebenfalls. */ #top .pt-cv-content > strong { font-weight: 400 !important; color: inherit; } /* 43.5 Aus dem gruenen Bootstrap-Knopf wird derselbe Textlink wie im Beitragskarussell (Abschnitt 23). */ #top a.pt-cv-readmore, #top a.pt-cv-readmore:hover, #top a.pt-cv-readmore:focus-visible { display: inline-block; background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; font-size: 17px; font-weight: 700 !important; color: var(--oe-cyan-dunkel); text-decoration: underline !important; text-underline-offset: 3px; } #top .pt-cv-rmwrap { display: block; margin-top: var(--oe-sp-2); } /* 43.6 Seitenzahlen. 65 Seiten, deshalb keine Spielerei: gleiche Kachelhoehe wie die Datumschips, Markenschwarz fuer die aktive Seite. Die Verweise tragen kein href, das Plugin blaettert per JavaScript — deshalb der Zeigefinger. */ #top ul.pt-cv-pagination { display: flex; flex-wrap: wrap; gap: var(--oe-sp-1); list-style: none; margin: var(--oe-sp-6) 0 0 0; padding: 0; } #top ul.pt-cv-pagination li { float: none; margin: 0; padding: 0; } #top ul.pt-cv-pagination li > a { display: block; min-width: var(--oe-chip-hoehe); height: var(--oe-chip-hoehe); line-height: var(--oe-chip-hoehe); padding: 0 var(--oe-sp-1); text-align: center; font-size: 15px; font-weight: 700; color: #1d1d1b; background: #fff; box-shadow: 0 0 0 1px #e3e3e3; border: 0; border-radius: 0; text-decoration: none; cursor: pointer; } #top ul.pt-cv-pagination li.active > a, #top ul.pt-cv-pagination li > a:hover, #top ul.pt-cv-pagination li > a:focus-visible { color: #fff; background: #1d1d1b; box-shadow: none; } /* 43.7 Auf dem Telefon steht das Bild ueber dem Text. Das Bild traegt die Bootstrap-Klasse pull-left, und die setzt float mit !important. Ohne Gegengewicht bleibt es gefloatet, und die Textspalte — die wegen 43.2 einen eigenen Formatierungskontext hat — schrumpft neben dem bildschirmbreiten Float auf null. Deshalb beides zuruecknehmen. */ @media (max-width: 767px) { #top .pt-cv-thumbnail { width: 100% !important; float: none !important; margin: 0 0 var(--oe-sp-2) 0; } #top .pt-cv-href-thumbnail { display: block; } #top .pt-cv-colwrap { overflow: visible; } } /* ------------------------------------------------------------ 44 NEWSLETTERARCHIV ------------------------------------------------------------ */ /* Die Liste der Ausgaben kommt von Mailchimp und wird per Skript in die Seite geschrieben. Dazu stand im Seiteninhalt ein eigenes