zwischen die Spalten, daher auch "+ p:empty +") */ .responsive #top #wrap_all .flex_column:has(> .scc-titel:last-child) { margin-bottom: 0; } #top #wrap_all .flex_column:has(> .scc-titel:last-child) + .flex_column, #top #wrap_all .flex_column:has(> .scc-titel:last-child) + p:empty + .flex_column { margin-top: 0; padding-top: 0; } #top #wrap_all .flex_column:has(> .scc-titel:last-child) + .flex_column > :first-child, #top #wrap_all .flex_column:has(> .scc-titel:last-child) + p:empty + .flex_column > :first-child, #top #wrap_all .flex_column:has(> .scc-titel:last-child) + .flex_column > :first-child .avia_textblock > :first-child, #top #wrap_all .flex_column:has(> .scc-titel:last-child) + p:empty + .flex_column > :first-child .avia_textblock > :first-child, #top #wrap_all .scc-titel + *, #top #wrap_all .scc-titel + .av_textblock_section .avia_textblock > :first-child, #top #wrap_all .scc-titel + .av_textblock_section .avia_textblock > :first-child > :first-child { margin-top: 0; padding-top: 0; } /* z. B.
*/ /* leerer Textblock direkt nach dem Titel zaehlt nicht: die folgende Spalte beginnt ohne Enfold-Abstand */ #top #wrap_all .scc-titel + .av_textblock_section:has(> .avia_textblock:empty) + .flex_column { margin-top: 0; } /* ... und zwar fuer alle Spalten derselben Zeile (Folgespalten ohne .first), sonst stehen sie versetzt */ #top #wrap_all .scc-titel + .flex_column + .flex_column:not(.first), #top #wrap_all .scc-titel + .flex_column + .flex_column:not(.first) + .flex_column:not(.first), #top #wrap_all .scc-titel + .flex_column + .flex_column:not(.first) + .flex_column:not(.first) + .flex_column:not(.first), #top #wrap_all .scc-titel + .av_textblock_section:has(> .avia_textblock:empty) + .flex_column + .flex_column:not(.first), #top #wrap_all .scc-titel + .av_textblock_section:has(> .avia_textblock:empty) + .flex_column + .flex_column:not(.first) + .flex_column:not(.first), #top #wrap_all .flex_column:has(> .scc-titel:last-child) + .flex_column + .flex_column:not(.first), #top #wrap_all .flex_column:has(> .scc-titel:last-child) + .flex_column + .flex_column:not(.first) + .flex_column:not(.first) { margin-top: 0; } #top.single-post #wrap_all .entry-content-header .post-meta-infos { margin-top: 0; top: 0; } /* Enfold schiebt die Datumszeile sonst 8 px nach oben */ @media only screen and (max-width: 767px) { #top #wrap_all .av-special-heading.scc-titel .av-special-heading-tag, #top.single-post #wrap_all .entry-content-header .post-title.entry-title, #top #wrap_all .entry-content h2.scc-titel { font-size: 32px; padding-bottom: 22px; } #top #wrap_all .av-special-heading.scc-titel .av-special-heading-tag::after, #top.single-post #wrap_all .entry-content-header .post-title.entry-title::after, #top #wrap_all .entry-content h2.scc-titel::after { width: 48px; margin-top: 22px; } } /* --- Etappe 4: Sponsoren-Kacheln --------------------------------------------- Logos als freigestellte PNG (Medien 7818-7826), Kachel kommt aus CSS: Grau #f8f8f8, Radius 4 px, feste Groesse, Logo zentriert mit fester Maximalgroesse (70 % Breite, 60 % Hoehe). Zwei Kachelhoehen: Hauptsponsoren 2:1, weitere 5:2. Kein Enfold-Overlay (Links mit .noHover). */ #top .scc-sponsoren { display: grid; grid-template-columns: 1fr; gap: 12px; padding-left: 16px; } #top .scc-sponsoren .scc-sponsor { display: block; position: relative; box-sizing: border-box; aspect-ratio: 5 / 2; margin: 0; padding: 0; border: 0; border-radius: 4px; background: #f8f8f8; transition: opacity .2s ease; } #top .scc-sponsoren--haupt .scc-sponsor { aspect-ratio: 2 / 1; } /* Imagify packt das Bild in
(WebP) und haengt die Klasse dort an -> picture neutralisieren, img direkt gestalten. Absolut positioniert: Prozentwerte beziehen sich sicher auf die Kachel (aspect-ratio-Hoehe). */ #top .scc-sponsoren .scc-sponsor picture { display: contents; } #top .scc-sponsoren .scc-sponsor img { position: absolute; inset: 0; display: block; width: auto; height: auto; max-width: 70%; max-height: 60%; margin: auto; object-fit: contain; } #top .scc-sponsoren .scc-sponsor:hover, #top .scc-sponsoren .scc-sponsor:focus-visible { opacity: .8; } #top .scc-sponsoren .scc-sponsor:focus-visible { outline: 2px solid #9a1e24; outline-offset: 2px; } #top .scc-sponsoren .image-overlay { display: none; } /* Mobil (bis 767 px): Sponsoren NUR auf der Startseite zeigen (Enfold blendet die Seitenleiste sonst aus). Die Startseiten-Seitenleiste (sidebar-home) enthaelt nur die Sponsoren-Widgets -> eine Datenquelle. */ @media only screen and (max-width: 767px) { .responsive #top.home #main .sidebar { display: block; width: 100%; margin: 0; padding: 40px 0 48px; border: 0; } /* unten Luft zum Footer */ .responsive #top.home #main .sidebar .inner_sidebar { margin: 0; padding: 0; } #top.home .sidebar .widgettitle { padding-left: 0; } #top.home .scc-sponsoren { padding-left: 0; } #top.home .sidebar .widget_media_image img { width: 100%; margin-left: 0; } #top .scc-sponsoren--weitere { grid-template-columns: 1fr 1fr; } } /* --- Etappe 6: Buttons, eine gemeinsame Regel ----------------------------------- Rot #bd262d, weiss 16 px semibold, min. 48 px hoch, Radius 4 px, Hover #9a1e24 (0.2 s), sichtbarer Tastatur-Fokus. :not(#scc) hebt die Spezifitaet ueber Enfolds Element-Regeln (#top #wrap_all .avia-button.av-xyz), ohne !important. Sonderfaelle (gleiche Farben/Radius/Hover, eigene Groesse): "nach oben" 50 x 50 (Icon-Button), Paginierung 44 x 44 (Tippflaeche), Cookie-Hinweis mit weissem Rand (steht auf rotem Balken). */ #top #wrap_all .avia-button:not(#scc), #top #wrap_all .avia-buttonrow-wrap .avia-button:not(#scc), #top #wrap_all .av-masonry-load-more:not(#scc), #top #wrap_all #searchsubmit:not(#scc), #top #wrap_all input[type="submit"]:not(#scc), #top #wrap_all .scc-button:not(#scc) { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 48px; margin-top: 0; padding: 12px 24px; border: 0; border-radius: 4px; background: #bd262d; color: #ffffff; opacity: 1; transform: none; font-size: 16px; line-height: 1.3; font-weight: 600; letter-spacing: 0; text-transform: none; text-decoration: none; cursor: pointer; transition: background-color .2s ease; } /* Enfold-Grossbutton: eigener Hintergrund-Span (traegt selbst die Klasse avia-button) wuerde den Hover verdecken */ #top #wrap_all .avia-button .avia_button_background.avia_button_background:not(#scc) { display: none; } #top #wrap_all .avia-button:not(#scc) .avia_iconbox_title, #top #wrap_all .avia-button:not(#scc) span { color: inherit; font: inherit; } #top #wrap_all .avia-button.avia-button-fullwidth:not(#scc), #top #wrap_all .av-masonry-load-more:not(#scc) { display: flex; width: 100%; } #top #wrap_all .avia-button:not(#scc):hover, #top #wrap_all .av-masonry-load-more:not(#scc):hover, #top #wrap_all #searchsubmit:not(#scc):hover, #top #wrap_all input[type="submit"]:not(#scc):hover, #top #wrap_all .scc-button:not(#scc):hover { background: #9a1e24; color: #ffffff; opacity: 1; transform: none; } #top #wrap_all .avia-button:not(#scc):focus-visible, #top #wrap_all .av-masonry-load-more:not(#scc):focus-visible, #top #wrap_all #searchsubmit:not(#scc):focus-visible, #top #wrap_all input[type="submit"]:not(#scc):focus-visible, #top #wrap_all .scc-button:not(#scc):focus-visible { outline: 2px solid #9a1e24; outline-offset: 2px; } /* Enfold: "Mehr laden" ist ein um einen Span */ #top #wrap_all .av-masonry-load-more:not(#scc) * { color: inherit; } /* "nach oben" (Icon-Button, 50 x 50) */ #top #scroll-top-link:not(#scc) { border-radius: 4px; border-color: #bd262d; background: #bd262d; color: #ffffff; opacity: 1; transition: background-color .2s ease, border-color .2s ease; cursor: pointer; } #top #scroll-top-link:not(#scc):hover { border-color: #9a1e24; background: #9a1e24; color: #ffffff; opacity: 1; } #top #scroll-top-link:not(#scc) svg, #top #scroll-top-link:not(#scc) svg path, #top #scroll-top-link:not(#scc):hover svg, #top #scroll-top-link:not(#scc):hover svg path { fill: #ffffff; } /* Enfold faerbt das Icon beim Hover sonst rot */ #top #scroll-top-link:not(#scc):focus-visible { outline: 2px solid #9a1e24; outline-offset: 2px; } /* Paginierung (44 x 44 Tippflaeche, aktive Seite dunkel) */ #top #wrap_all .pagination:not(#scc) a, #top #wrap_all .pagination:not(#scc) .current, #top #wrap_all .pagination:not(#scc) .inactive { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 44px; height: 44px; margin: 0 4px 4px 0; padding: 0 10px; border: 0; border-radius: 4px; box-shadow: none; background: #bd262d; color: #ffffff; font-size: 16px; line-height: 1; font-weight: 600; text-decoration: none; transition: background-color .2s ease; } #top #wrap_all .pagination:not(#scc) a:hover { background: #9a1e24; color: #ffffff; cursor: pointer; } #top #wrap_all .pagination:not(#scc) .current { background: #9a1e24; cursor: default; } #top #wrap_all .pagination:not(#scc) a:focus-visible { outline: 2px solid #9a1e24; outline-offset: 2px; } /* Cookie-Hinweis: Quick CSS setzt dort !important (Farbe, Rand, 12 px) -> nur hier !important noetig */ #top .avia-cookie-consent .avia-cookie-consent-button:not(#scc) { min-height: 48px !important; padding: 12px 24px !important; border-radius: 4px !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1.3 !important; background-color: #bd262d !important; color: #ffffff !important; opacity: 1 !important; transition: background-color .2s ease !important; } #top .avia-cookie-consent .avia-cookie-consent-button:not(#scc):hover { background-color: #9a1e24 !important; opacity: 1 !important; } #top .avia-cookie-consent .avia-cookie-consent-button:not(#scc):focus-visible { outline: 2px solid #ffffff !important; outline-offset: 2px; } /* --- Etappe 7: Kontaktseite als Wegweiser (Seite 65) ------------------------------ Drei gleich grosse Kacheln (Stil wie Sponsoren: #f8f8f8, Radius 4 px), Button unten buendig (Etappe-6-Stil .scc-button). Mobil (bis 767 px) untereinander; bei knapper Breite automatisch umbrechen (min. 240 px je Kachel). */ #top #wrap_all .scc-wege-intro { margin: 0 0 24px; } /* Abstand zum Bild als Innenabstand: die Bildspalte davor ist gefloatet, ein Aussenabstand wuerde verschluckt */ #top #wrap_all .av_textblock_section:has(.scc-wege-intro) { clear: both; padding-top: 28px; } #top .scc-wege { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); grid-auto-rows: 1fr; gap: 24px; margin: 0 0 48px; } #top .scc-weg { display: flex; flex-direction: column; box-sizing: border-box; margin: 0; padding: 24px; border-radius: 4px; background: #f8f8f8; } #top #wrap_all .scc-weg h3 { margin: 0 0 8px; padding: 0; font-size: 20px; line-height: 1.3; font-weight: 600; color: #222222; text-transform: none; } #top .scc-weg p { flex: 0 0 auto; margin: 0 0 20px; } /* WordPress packt den Button in ein eigenes : dieses sitzt unten (Titel, Text und Button je Kachel auf gleicher Hoehe) */ #top .scc-weg p:has(> .scc-button) { margin: auto 0 0; } /* E-Mail-Adresse sichtbar: normale Textgroesse, Linkfarbe, nicht fett. Umbruch nur nach dem @ (Entscheid Shane): zwei nicht umbrechbare Teile, dazwischen
als einzige Trennstelle */ #top .scc-weg .scc-mail { margin: -8px 0 20px; } #top .scc-weg .scc-mail-adresse { font-size: inherit; font-weight: 400; color: #bd262d; } #top .scc-weg .scc-mail-adresse .scc-nb { white-space: nowrap; } /* Gemeinde-Logo linksbuendig wie Adressblock und Link (Link und Logo sonst unveraendert) */ #top.page-id-65 #main .avia-image-container.avia-align-center { text-align: left; } #top.page-id-65 #main .avia-image-container.avia-align-center .avia-image-container-inner { margin-left: 0; margin-right: auto; } #top #wrap_all .scc-weg .scc-button:not(#scc) { align-self: flex-start; } @media only screen and (max-width: 767px) { #top .scc-wege { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 16px; } /* untereinander: Hoehe folgt dem Inhalt */ /* Enfold gibt der Bildspalte mobil 20 px Abstand unten: 2 + 20 = 22 px (mobile Abstandsstufe) */ #top #wrap_all .av_textblock_section:has(.scc-wege-intro) { padding-top: 2px; } }