/* ============================================================================ custom.css Gooseflesh Live, Ergaenzungen zum Theme passion+byte, Mario Sypel, 28.08.2026 /wp-content/themes/gooseflesh-theme/custom.css Eingebunden in functions.php, direkt nach gooseflesh.css gooseflesh.css wird von WP-SCSS aus SCSS-Quellen erzeugt und bei jedem Kompilieren ueberschrieben. Diese Datei liegt ausserhalb des Kompilierwegs. Aufhaenger fuer Abschnitt 2 ist der unsichtbare Marker-Block ganz oben im Seiteninhalt. Dadurch wirkt der Abschnitt unabhaengig davon, welche PHP-Datei WordPress fuer die Seite benutzt. 1 Korrektur an bestehenden Seiten 2 Veranstalterseite 3 Bausteine fuer den Seiteninhalt 4 Videoloop im Kopfbereich, Startseite und Veranstalterseite ============================================================================ */ /* ============================================================================ 1 KORREKTUR AN BESTEHENDEN SEITEN ============================================================================ */ /* Kontaktformular. Die Spam-Falle von CF7 Apps war sichtbar und ragte 315 px ueber den rechten Seitenrand hinaus. Sichtbar ist sie doppelt schaedlich: sie zerstoert das Layout und verwirft Anfragen echter Besucher stillschweigend als Spam. Behoben am 27.08.2026. */ .wpcf7 .cf7apps-honeypot-wrap, .wpcf7 .cf7apps-honeypot-wrap input { display: none !important; } /* ============================================================================ 2 VERANSTALTERSEITE Das Theme macht ueber .page:not(.home) aus jeder Unterseite eine Textseite wie das Impressum: goldener Grund, weisse Schrift, weisse Menue-Symbole, Ueberschriften in 36 px. Hier wird das zurueckgenommen und exakt auf die Werte der Startseite gestellt. Ausserdem gibt index.php zwei Dinge aus, die front-page.php nicht hat: den Seitentitel als Ueberschrift und das Beitragsbild ein zweites Mal. Beides wird ausgeblendet. Und index.php legt den Inhalt in ein zusaetzliches div.alignwide, das alles bei 1280 px kappt. Die Breitenlogik des Themes wird deshalb eine Ebene tiefer noch einmal nachgebildet. ============================================================================ */ /* -- Grundfarben ---------------------------------------------------------- */ body.page:has(.gf-veranstalter) { background-image: none; background-color: #fff; color: #3c3c3c; } body.page:has(.gf-veranstalter) a { color: #b3a282; text-decoration: none; } body.page:has(.gf-veranstalter) a:hover { opacity: .65; } /* -- Ueberschriften, Werte der Startseite --------------------------------- */ body.page:has(.gf-veranstalter) h1, body.page:has(.gf-veranstalter) h2 { color: #b3a282; margin-top: 25px; margin-bottom: 25px; text-transform: uppercase; letter-spacing: .05em; } body.page:has(.gf-veranstalter) h2 { font-size: 24px; } @media (min-width: 769px) { body.page:has(.gf-veranstalter) h2 { font-size: 32px; } } @media (min-width: 1024px) { body.page:has(.gf-veranstalter) h2 { font-size: 40px; } } @media (min-width: 1367px) { body.page:has(.gf-veranstalter) h2 { font-size: 48px; } } /* In den goldenen Baendern bleibt alles weiss, wie auf der Startseite */ body.page:has(.gf-veranstalter) .index__background h2 { color: #fff; } body.page:has(.gf-veranstalter) .index__background a { color: #fff; } /* -- Zitatbaender ---------------------------------------------------------- */ /* Die grossen Zitatgroessen des Themes haengen an body.home und wuerden auf einer Unterseite bei 24 px stehen bleiben. */ @media (min-width: 769px) { body.page:has(.gf-veranstalter) blockquote p { font-size: 28px; } } @media (min-width: 1024px) { body.page:has(.gf-veranstalter) blockquote p { font-size: 34px; } } @media (min-width: 1367px) { body.page:has(.gf-veranstalter) blockquote p { font-size: 38px; } } /* -- Kopfbereich ----------------------------------------------------------- */ /* WordPress laedt das CSS eines Blocktyps nur, wenn dieser Blocktyp im Seiteninhalt vorkommt. Der Kopfbereich wird aber nicht als Block eingesetzt, sondern von der PHP-Vorlage ausgegeben. Auf der Startseite faellt das nicht auf, weil dort weiter unten ein echter Cover-Block steht und das CSS deshalb mitgeliefert wird. Hier gibt es keinen, also fehlen zwei Eigenschaften, die das Theme voraussetzt. position: relative ist der Bezugspunkt fuer die Schraege. Ohne ihn rutscht sie an das Ende der Seite statt an die Unterkante des Bildes. background-position sorgt fuer den mittigen Bildausschnitt. */ body.page:has(.gf-veranstalter) .index__header-image { position: relative; background-position: 50%; } /* -- Logo ------------------------------------------------------------------ */ /* Der Logo-Wrapper ist absolut positioniert, aber ohne Angabe fuer links. Auf der Startseite zentriert ihn der Cover-Block von sich aus, hier nicht, deshalb sitzt er am linken Rand. Wird explizit nachgeholt. */ body.page:has(.gf-veranstalter) .index__logo-wrapper { left: 50%; transform: translateX(-50%); } /* -- Menuesymbole, dunkle Fassung wie auf der Startseite ------------------ */ body.page:has(.gf-veranstalter) .menu__switch { background-image: url(material/gooseflesh-icon-menu.svg); } body.page:has(.gf-veranstalter) .menu__switch:after { background-image: url(material/gooseflesh-icon-menu-active.svg); } /* Das X oben rechts gibt es auf der Startseite nicht, hier auch nicht */ body.page:has(.gf-veranstalter) .menu__close { display: none !important; } /* -- Doppelte Ausgaben aus index.php -------------------------------------- */ body.page:has(.gf-veranstalter) .align-content > h1.alignwide { display: none; } body.page:has(.gf-veranstalter) .align-content > .wp-block-cover-image.alignwide { display: none; } /* -- Breiten -------------------------------------------------------------- */ /* Der Attribut-Selektor trifft ausschliesslich den Wrapper aus index.php, also ein div, dessen class-Attribut exakt "alignwide" lautet. Echte Gutenberg-Bloecke tragen immer weitere Klassen und bleiben unberuehrt. Laeuft die Seite ueber eine Vorlage ohne diesen Wrapper, greifen die vier Regeln ins Leere und richten keinen Schaden an. */ body.page:has(.gf-veranstalter) .align-content > [class="alignwide"] { max-width: 100%; margin-left: 0; margin-right: 0; } body.page:has(.gf-veranstalter) .align-content > [class="alignwide"] > * { margin-left: auto; margin-right: auto; max-width: 1024px; } body.page:has(.gf-veranstalter) .align-content > [class="alignwide"] > .alignwide { max-width: 1280px; margin-left: auto; margin-right: auto; } body.page:has(.gf-veranstalter) .align-content > [class="alignwide"] > .alignfull { max-width: 100%; margin-left: 0; margin-right: 0; } /* ============================================================================ 3 BAUSTEINE FUER DEN SEITENINHALT ============================================================================ */ /* Aufzaehlung mit Raute statt Punkt */ .gf-eck { list-style: none; padding-left: 0; margin-left: 0; } .gf-eck li { position: relative; padding-left: 1.4em; margin-bottom: .4em; } .gf-eck li:before { content: "\25C6"; position: absolute; left: 0; top: 0; color: #b3a282; font-size: .7em; line-height: 1.9; } /* Faktenkasten */ .gf-fakten { background: #fff; padding: 24px 16px; } @media (min-width: 769px) { .gf-fakten { border: 8px solid #b3a282; padding: 40px 24px; } } .gf-fakten .wp-block-column { display: flex; flex-direction: column; align-items: center; text-align: center; } /* Die grosse Zahl im Faktenkasten */ .gf-zahl { font-family: "museo-slab", "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-weight: 700; color: #b3a282; letter-spacing: .02em; line-height: 1; font-size: 36px; margin-bottom: .3em; white-space: nowrap; } @media (min-width: 1024px) { .gf-zahl { font-size: 48px; } } @media (min-width: 1367px) { .gf-zahl { font-size: 64px; } } /* ============================================================================ 4 VIDEOLOOP IM KOPFBEREICH, STARTSEITE UND VERANSTALTERSEITE Das Video wird von custom.js in den Kopfbereich gelegt, hinter das Logo und unter die Schraege. Solange es nicht laeuft, bleibt es unsichtbar und man sieht das Beitragsbild. Sobald es laeuft, blendet es auf. ============================================================================ */ /* Bezugspunkt fuer Video und Schraege. Auf Seiten mit einem Cover-Block im Inhalt setzt WordPress das selbst, verlassen kann man sich nicht darauf. */ .index__header-image { position: relative; overflow: hidden; } /* Auf dem Telefon fuellt der Kopfbereich den ganzen sichtbaren Bereich, wie ein Reel. Das Theme steht dort auf 60vh, das reicht nicht. svh ist die Viewporthoehe mit eingeblendeten Browserleisten. Dadurch springt nichts, wenn beim Scrollen die Adressleiste ein- und ausfaehrt. Die vh-Zeile davor ist die Rueckfallebene fuer aeltere Browser. */ @media (max-width: 768px) { .index__header-image { height: 100vh; height: 100svh; } } .index__header-image .gf-loop { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; z-index: 0; opacity: 0; transition: opacity .8s ease; pointer-events: none; } .index__header-image.gf-loop-aktiv .gf-loop { opacity: 1; } /* Die Schraege gehoert ueber das Video */ .index__header-image:after { z-index: 1; }