/* Theme Name: Southvision Theme Child Description: Child-Theme fuer das Southvision Theme Author: Southvision Template: southvision Version: 1.0.3 */ /* ========================================================================== WICHTIG - BITTE EINMAL LESEN -------------------------------------------------------------------------- Diese Datei wird per wp_footer geladen, also NACH dem Options-CSS des Themes. Deshalb genuegt hier eine normale Regel - kein !important noetig. Damit eine Aenderung im Browser sichtbar wird, muss die Versionsnummer oben im Datei-Header hochgezaehlt werden (1.0.2 -> 1.0.3 -> ...). Der Enqueue haengt die Version an die URL; ohne Aenderung liefert der Browser die alte Datei aus dem Cache. ========================================================================== */ /* ========================================================================== JSC-01 | Schriftfamilien -------------------------------------------------------------------------- Herkunft : Schoch & Friends, 2026-08-13 Grund : Die freigegebene Designvorlage nutzt eine Serif fuer Ueber- schriften und eine System-Sans fuer Fliesstext. Beides sind KEINE Webfonts, es werden also keine Font-Dateien geladen. Technik : Das Theme setzt seine Schriften in dynamic.css als Variablen. Ein Ueberschreiben dieser beiden Variablen wirkt ueberall - in Ueberschriften, Buttons und Fliesstext gleichzeitig. Rueckbau : Diesen Block loeschen -> Montserrat / Source Sans 3 sind zurueck. ========================================================================== */ :root { --headlineFont: Georgia, 'Times New Roman', Times, serif; --bodyFont: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; } /* ========================================================================== JSC-02 | Typografie-Baukasten (Vorlage zum Ueberschreiben) -------------------------------------------------------------------------- Alle Bloecke unten sind AUSKOMMENTIERT und zeigen exakt die Werte, die das Theme aktuell setzt (gemessen am 2026-08-13 in dynamic.css). SO BENUTZT DU DAS: 1. Den gewuenschten Block auskommentieren - also die Zeichen am Anfang und Ende des Blocks entfernen. 2. Werte anpassen. 3. Versionsnummer im Datei-Header oben hochzaehlen. WARUM AUSKOMMENTIERT UND NICHT AKTIV? Solange ein Block auskommentiert ist, gilt der Theme-Wert. Aktivierst du ihn, frierst du diesen Wert ein: Aendert Marco spaeter die Theme-Typo- grafie, kommt die Aenderung an dieser Stelle nicht mehr an. Deshalb bitte nur aktivieren, was du wirklich anders willst - nicht alles auf Vorrat. ACHTUNG BEI DER MOBIL-ANSICHT: Das Theme setzt eigene Groessen fuer Bildschirme bis 767px. Aktivierst du unten nur den Desktop-Block, wirkt dein Wert AUCH auf dem Handy, weil er spaeter in der Datei steht. Willst du beides getrennt steuern, aktiviere immer auch den passenden Mobil-Block weiter unten. Die Schriftfamilien stehen bewusst als var(--headlineFont) / var(--bodyFont) drin - so bleibt JSC-01 die einzige Stelle fuer Familienwechsel. Willst du NUR fuer die H1 eine andere Schrift, ersetze dort die Variable durch einen konkreten Namen. ========================================================================== */ /* ---------- Ueberschriften: Desktop ---------- */ h1, .h1 { font-size: 9rem; font-weight: 500; line-height: 1.1; letter-spacing: -.5px; font-family: var(--headlineFont); } h2, .h2 { font-size: 4.6rem; font-weight: 500; line-height: 1.2; letter-spacing: -.3px; font-family: var(--headlineFont); } h3, .h3 { font-size: 3.2rem; font-weight: 400; line-height: 1.3; letter-spacing: -.2px; font-family: var(--headlineFont); } h4, .h4 { font-size: 1.8rem; font-weight: 600; line-height: 1.4; letter-spacing: 0; font-family: var(--bodyFont); } /* ---------- Fliesstext und Hilfsklassen: Desktop ---------- */ /* body { font-family: var(--bodyFont); font-weight: 400; font-size: 1.8rem; line-height: 1.6; letter-spacing: 0; } */ /* .subline = die Vorzeile ueber Ueberschriften, z. B. "01 - ORIENTIERUNG" */ /* .subline { font-size: 2.4rem; font-weight: 400; line-height: 1.4; letter-spacing: 0; } */ /* .small = Kleintext, z. B. Bildnachweise */ .small { font-size: 1.2rem; font-weight: 500; line-height: 1.6; letter-spacing: 0; color: #C5422D; } /* .ctaBtn = alle Buttons */ /* .ctaBtn { font-size: 1.8rem; font-weight: 600; line-height: 1.2; letter-spacing: .5px; font-family: var(--headlineFont); } */ /* ---------- Mobil bis 767px ---------- */ /* Das Theme setzt hier NUR font-size um. Alles andere erbt von oben. */ /* @media (max-width: 767px) { h1, .h1 { font-size: 38px; } h2, .h2 { font-size: 32px; } h3, .h3 { font-size: 24px; } h4, .h4 { font-size: 20px; } body { font-size: 16px; } .subline { font-size: 20px; } .small { font-size: 15px; } .ctaBtn { font-size: 16px; } } */ /* ========================================================================== JSC-03 | Abstaende zwischen Ueberschrift und Text -------------------------------------------------------------------------- Gemessen am 2026-08-13. WARUM DU DAS IM CSS NICHT GEFUNDEN HAST: Das Theme setzt fuer Ueberschriften nur EINE Abstandsregel, naemlich in southvision/style.css: h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 { margin-top: 0; } Das ist alles. Einen margin-bottom gibt es NIRGENDS im Theme. Der Abstand nach unten kommt vom Browser-Standard - und der rechnet in "em", also in Vielfachen der jeweiligen Schriftgroesse: h1 0.67em h2 0.83em h3 1em h4 1.33em Praktische Folge: Je groesser die Ueberschrift, desto groesser automatisch der Abstand darunter. Deshalb wirkt der Abstand bei H1 gross und bei H4 klein, ohne dass irgendwo eine Zahl steht. Und: Aenderst du die Schrift- groesse in JSC-02, wandert der Abstand stillschweigend mit. Absaetze und Listen sind dagegen im Theme geregelt: p { margin-top: 0; margin-bottom: 1rem; } ul.styledList li { margin-bottom: 0.8rem; } EM ODER REM - kurz erklaert: em = relativ zur Schriftgroesse des Elements. Der Abstand skaliert mit. rem = relativ zur Basisschrift. Der Abstand bleibt ueberall gleich. ACHTUNG bei rem auf dieser Website: Die Basisschrift ist NICHT fix. Das Theme skaliert sie ueber die Bildschirmbreite (southvision/style.css): Standard 10px ab 2400px 12.5px 768-991px 9px ab 2880px 15px bis 767px 8px ab 3360px 17.5px ab 3840px 20px Ein Wert von 2rem sind also am Desktop 20px, auf dem Handy 16px und auf einem 4K-Schirm 40px. Das ist gewollt und der Grund, warum das ganze Theme in rem rechnet - aber man sollte es wissen, bevor man sich wundert. SO BENUTZT DU DAS: Block auskommentieren, Wert setzen, Versionsnummer im Datei-Header oben hochzaehlen. ========================================================================== */ /* ---------- Abstand UNTER Ueberschriften ---------- */ /* Die Werte unten entsprechen exakt dem heutigen Browser-Standard. Aendere sie, oder setze feste Werte in rem. */ h1, .h1 { margin-bottom: 2rem; } h2, .h2 { margin-bottom: 2rem; } h3, .h3 { margin-bottom: 2rem; } h4, .h4 { margin-bottom: 2rem; } /* ---------- Abstand UEBER Ueberschriften ---------- */ /* Das Theme setzt hier ueberall 0. Wenn eine Ueberschrift mehr Luft nach oben braucht - typisch bei H2 und H3 mitten im Fliesstext - hier setzen. */ /* h2, .h2 { margin-top: 4rem; } h3, .h3 { margin-top: 3rem; } */ /* ---------- Absaetze und Listen ---------- */ /* Theme-Werte: p unten 1rem, Listenpunkte unten 0.8rem. */ /* p { margin-bottom: 1rem; } ul.styledList li { margin-bottom: 0.8rem; } */ /* ---------- Nur an einer Stelle etwas anderes? ---------- */ /* Jeder Block kann im Editor eine eigene HTML-Anker-ID bekommen (Blockeinstellungen, ganz unten). Damit laesst sich eine Regel gezielt auf eine einzelne Sektion begrenzen, ohne die ganze Website zu aendern: */ /* #mein-anker h2 { margin-bottom: 2rem; } */ /* ========================================================================== JSC-04 | Projekteigene Ergaenzungen -------------------------------------------------------------------------- Platz fuer alles Weitere. Bitte jeden neuen Baustein mit eigener Nummer, Datum und Rueckbau-Hinweis versehen. ========================================================================== */ .buttonStyle1 .ctaBtn, header.buttonStyle1 .ctaBtn { padding: 2rem 2.6rem; border-radius: 0px; text-align: center; display: inline-block; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; border: 2px solid transparent; }