/**
* Verbesserungen auf dem 1:1-Klon.
*
* Bewusst additiv und knapp gehalten: das Erscheinungsbild der Seite bleibt,
* korrigiert werden nur nachweisbare Defekte. Jeder Block nennt Messwert und
* Grund.
*/
/* ---------------------------------------------------------------------------
* 1. Waagrechtes Scrollen auf dem Handy
*
* Gemessen im Original: das GESCHLOSSENE Mobile-Menue (nav.elementor-nav-menu
* --dropdown) liegt 98 bis 137px ausserhalb des Viewports und wird von keinem
* Vorfahren beschnitten. Ergebnis: die Seite laesst sich seitlich wegschieben,
* auf /datenschutz/ bei 768px um 137px, auf /kontakt/ bei 375px um 52px.
*
* clip statt hidden ist hier wichtig: hidden macht aus dem Body einen
* Scroll-Container und wuerde den fixierten Header und alle sticky-Elemente
* beschaedigen. clip beschneidet nur und laesst das Positionsverhalten intakt.
* ------------------------------------------------------------------------- */
html,
body {
overflow-x: clip;
}
@supports not (overflow: clip) {
html,
body {
overflow-x: hidden;
}
}
/* Zusaetzlich an der Ursache: das geschlossene Dropdown soll gar keine
Flaeche mehr aufziehen. max-height:0 hat Elementor schon gesetzt, die
waagrechte Ausdehnung aber nicht begrenzt. */
.elementor-nav-menu--dropdown:not(.elementor-nav-menu--dropdown-active) {
max-width: 100vw;
}
/* ---------------------------------------------------------------------------
* 2. Zeilenumbrueche in Ueberschriften und Text
*
* Ueberschriften brachen mit einzelnen Restwoertern auf der letzten Zeile um
* (Schusterjunge). balance verteilt die Zeilen gleichmaessig, pretty verhindert
* das einsame letzte Wort im Absatz. Beides greift nur dort, wo der Browser es
* unterstuetzt, und veraendert keine Abstaende.
* ------------------------------------------------------------------------- */
h1,
h2,
h3,
.elementor-heading-title {
text-wrap: balance;
}
p,
.elementor-widget-text-editor,
.elementor-widget-text-editor p {
text-wrap: pretty;
}
/* Hier stand zuerst overflow-wrap:break-word plus hyphens:auto fuer schmale
Displays. Das war falsch und wurde entfernt: die Vorlage setzt in den langen
Woertern schon weiche Trennzeichen (), zum Beispiel
"Landwirtschaftsbetrieb". break-word ignoriert diese Stellen und trennt
irgendwo ohne Trennstrich ("Landwirtschaft / sbetrieb"), hyphens:auto
zerlegte zusaetzlich den Markennamen zu "Senn-weid". Die vorhandenen
weichen Trennzeichen sind die bessere Loesung, also nicht anfassen. */
/* ---------------------------------------------------------------------------
* 3. Sprungmarken auf der Datenschutzseite
*
* Die Seite hat ein Inhaltsverzeichnis mit Ankern (#kontaktadressen etc.). Der
* Header ist fixiert und verdeckte das Sprungziel. scroll-margin-top schafft
* den Abstand, ohne am Layout zu ruehren.
* ------------------------------------------------------------------------- */
:target,
h1[id],
h2[id],
h3[id] {
scroll-margin-top: 7rem;
}
html {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ---------------------------------------------------------------------------
* 4. Tastatur-Bedienung
*
* Das Original zeigte beim Durchtabben keinen sichtbaren Fokus. Sichtbar nur
* fuer Tastatur-Nutzung (:focus-visible), Maus-Klicks bleiben unveraendert.
* Farbe ist das Weiss/Gruen der Seite, kein neues Element im Design.
* ------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.elementor-button:focus-visible,
.elementor-menu-toggle:focus-visible {
outline: 2px solid currentColor;
outline-offset: 3px;
}
/* Im Formular ist der Rahmen sonst kaum zu sehen: dort mit dem Feldrahmen
arbeiten statt mit einem zweiten Ring. */
.elementor-field-textual:focus-visible {
outline-offset: 1px;
}
/* ---------------------------------------------------------------------------
* 5. Lesbarkeit im Kontaktbereich
*
* Der schwerste Fehler der Vorlage. Die Widgets des Kontaktbereichs wurden
* offenbar aus dem Hero kopiert, wo weisse Schrift auf dem dunklen Foto richtig
* ist. Im Kontaktbereich liegt derselbe Text aber auf dem hellen Seitengrund
* #f2f2f2. Gemessene Kontraste:
*
* Ueberschrift "Kontaktieren Sie uns" #F2F2F2 auf #F2F2F2 = 1.00:1
* Augenbrauen-Zeile "Das sind wir" #F2F2F2 auf #F2F2F2 = 1.00:1
* Einleitungstext #BDDAD2 auf #F2F2F2 = 1.33:1
* Formularfelder und Platzhalter #C8E1DB auf weiss = 1.23:1
*
* Erforderlich sind 4.5:1. Die Ueberschrift war also buchstaeblich unsichtbar,
* auf der Startseite und auf /ueber-uns/ fehlte die Bereichsueberschrift
* dadurch komplett.
*
* Korrigiert wird mit den Farben, die die Seite selbst schon definiert, es
* kommt keine neue Farbe hinzu:
* --e-global-color-secondary #313131 = 11.62:1 (Ueberschriften)
* --e-global-color-text #41695E = 5.51:1 (Flies- und Feldtext)
*
* Die data-id-Selektoren treffen genau die betroffenen Widgets. Eine breitere
* Regel wuerde auch die weisse Hero-Schrift umfaerben, wo sie richtig ist.
* ------------------------------------------------------------------------- */
/* Zum !important: Elementor erzeugt seine Regeln mit Selektoren wie
* ".elementor-385 .elementor-element.elementor-element-1aad50a
* .elementor-heading-title" (Spezifitaet 0,4,0) und
* ".elementor-kit-8 input:not([type=button]):not([type=submit])" (0,3,1).
* Aus einer zusaetzlichen Datei laesst sich das sonst nur mit kuenstlich
* aufgeblaehten Selektoren uebertreffen, die bei der naechsten Elementor-
* Aenderung brechen. Diese Datei ist eine Korrekturschicht ueber generiertem
* Fremd-CSS, hier ist !important das passende und ehrlichere Mittel. */
/* Gemessen wurde am gerenderten Bild, nicht an der Hintergrund-Eigenschaft:
* sobald das Foto geladen ist, stimmen alle Kontraste (6.5:1 bis 14.8:1). Der
* Fehler liegt in der Zeit DAVOR.
*
* Elementor laedt diese Hintergrundfotos erst beim Scrollen nach
* (lazy_load_background_images). Die Bereiche haben keine Hintergrundfarbe,
* nur das Bild. Solange es nicht da ist, steht helle Schrift (#F2F2F2,
* #BDDAD2) auf dem hellen Seitengrund #f2f2f2 und ist unlesbar bis unsichtbar.
* Nachgewiesen mit blockierten Bildanfragen: Ueberschrift "Kontaktieren Sie
* uns" verschwindet vollstaendig, nur der goldene Strich bleibt sichtbar. Auf
* langsamer Mobilverbindung sind das Sekunden, bei fehlgeschlagenem Bild
* dauerhaft.
*
* Die betroffenen Bereiche wurden maschinell ermittelt: heller Text, dessen
* naechster hintergrundmalender Vorfahre nur ein Bild und keine Farbe hat.
* Das sind 10 Bereiche, einer pro Hero plus die Kontaktbloecke. Der Bereich
* a45311e wurde ausgeschlossen, dort schuetzt das gruene Panel den Text.
*
* Die Fallback-Farbe entspricht den dunklen Tonwerten der Fotos
* (gemessen rgb(40,28,22) bis rgb(68,63,60)). Weiss darauf: 10.54:1. Sobald
* das Foto geladen ist, verdeckt es die Farbe vollstaendig, das Endergebnis
* sieht also unveraendert aus. */
.elementor-element-c3acf75,
.elementor-element-2844689,
.elementor-element-f009d61,
.elementor-element-12d541b,
.elementor-element-6d0daef,
.elementor-element-9b6ebb8,
.elementor-element-f8baaec,
.elementor-element-6bc43f2,
.elementor-element-1eae93d,
.elementor-element-005bd46 {
background-color: #3b3733;
}
/* ---------------------------------------------------------------------------
* 5c. Formularfelder lesbar machen
*
* Die Felder liegen auf einem Foto mit sehr grossem Helligkeitsumfang,
* gemessen von rgb(19,12,10) bis rgb(129,129,129). Die zarte Minzfarbe
* #C8E1DB der Vorlage erreichte darauf nur 2.83:1, gefordert sind 4.5:1.
*
* Wichtig: mit der Textfarbe allein ist das nicht zu lösen. Selbst reines
* Weiss kommt über dem Mittelgrau nur auf 3.95:1. Der Grund hinter dem Text
* muss dunkler werden. Deshalb bekommen die Felder eine zurückhaltende dunkle
* Füllung. Das ist zugleich die bessere Bedienung: vorher war ausser dem
* dünnen Strich kaum zu erkennen, wo man tippt.
*
* Rechnung für den ungünstigsten Fall: rgb(129,129,129) mit 36 Prozent
* Schwarz überlegt ergibt rgb(83,83,83), darauf #F2F2F2 = 6.7:1.
* ------------------------------------------------------------------------- */
.elementor-form .elementor-field-textual,
.elementor-form .elementor-field-textual:focus {
background-color: rgba(0, 0, 0, 0.36) !important;
color: #f2f2f2 !important;
border-color: rgba(242, 242, 242, 0.55) !important;
border-radius: 3px 3px 0 0;
transition: background-color 200ms ease, border-color 200ms ease;
/* Leichtes Milchglas. Ohne das wirken die Felder ungleichmaessig, weil das
Foto dahinter von dunkelbraun bis mittelgrau reicht. Der Weichzeichner
nimmt diese Unruhe heraus, die Felder lesen sich als eine Reihe. Wo der
Browser backdrop-filter nicht kennt, bleibt die Fuellung oben als
ausreichender Rueckhalt. */
backdrop-filter: blur(6px) saturate(120%);
-webkit-backdrop-filter: blur(6px) saturate(120%);
}
.elementor-form .elementor-field-textual::placeholder {
color: #f2f2f2 !important;
opacity: 0.88; /* Platzhalter bleibt unterscheidbar von echter Eingabe */
}
.elementor-form .elementor-field-textual:hover {
background-color: rgba(0, 0, 0, 0.44) !important;
}
.elementor-form .elementor-field-textual:focus {
background-color: rgba(0, 0, 0, 0.5) !important;
border-color: #f2f2f2 !important;
}
/* Das Auswahlfeld braucht eine Sonderbehandlung.
*
* Der Aufklapp-Pfeil ist ein absolut positioniertes Geschwister-Element im
* Wrapper. Legt man den Weichzeichner auf das select selbst, entsteht dort ein
* neuer Stapelkontext und das select malt ueber den Pfeil: er verschwand.
* Deshalb tragen Fuellung und Weichzeichner hier der WRAPPER, das select
* selbst bleibt durchsichtig. Der Pfeil liegt dann sichtbar darueber.
*/
.elementor-form .elementor-select-wrapper {
background-color: rgba(0, 0, 0, 0.36);
border-radius: 3px 3px 0 0;
backdrop-filter: blur(6px) saturate(120%);
-webkit-backdrop-filter: blur(6px) saturate(120%);
}
.elementor-form .elementor-select-wrapper select.elementor-field-textual,
.elementor-form .elementor-select-wrapper select.elementor-field-textual:focus {
background-color: transparent !important;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.elementor-form .elementor-select-wrapper .select-caret-down-wrapper {
color: #f2f2f2;
z-index: 1;
}
/* Die aufgeklappte Optionsliste braucht ihre eigenen Farben.
*
* Sie wird vom Betriebssystem gezeichnet, uebernimmt aber die color-Angabe des
* select. Weiss auf dem systemweissen Untergrund der Liste heisst: unlesbar.
* Deshalb hier ausdruecklich dunkle Schrift auf hellem Grund, unabhaengig von
* der Farbe des geschlossenen Feldes.
*/
.elementor-form select.elementor-field-textual option {
color: #313131;
background-color: #ffffff;
}
/* Auch im dunklen Systemschema lesbar halten. */
@media (prefers-color-scheme: dark) {
.elementor-form select.elementor-field-textual option {
color: #f2f2f2;
background-color: #2b2b2b;
}
}
/* Der Absende-Knopf ist bereits kontraststark (weiss auf Gruen), bleibt. */
/* ---------------------------------------------------------------------------
* 5b. Nur fuer Screenreader
*
* Die Vorlage teilt die Hero-Ueberschrift in zwei Widgets, damit die zweite
* Zeile fett steht. Der h1 enthielt dadurch nur die halbe Ueberschrift. Der
* fehlende Teil steht jetzt mit dieser Klasse im h1: fuer das Auge nicht
* vorhanden, fuer Suchmaschinen und Screenreader Teil der Ueberschrift.
* Kein clip/display:none, sonst wuerde der Text auch vorgelesen entfallen.
* ------------------------------------------------------------------------- */
.sennweid-sr {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ---------------------------------------------------------------------------
* 6. Karussell-Navigation
*
* Das erste Karussell der Startseite zeigte 29 Punkte auf 1280px Breite, das
* zweite 12. Als Navigation ist das unbrauchbar und optisch unruhig. Beide
* Karussells haben Pfeile links und rechts, die Bedienung bleibt also
* vollstaendig erhalten. Die Punkte werden nur ausgeblendet, nicht entfernt,
* damit Swiper weiter korrekt rechnet.
* ------------------------------------------------------------------------- */
.elementor-widget-image-carousel .swiper-pagination {
visibility: hidden;
height: 0;
margin: 0;
}
/* ---------------------------------------------------------------------------
* 7. Icon-Liste im gruenen Panel
*
* Die harten
sind im HTML entfernt. Damit der Text die Spalte wirklich
* nutzen kann, wird der Abstand zwischen Symbol und Text etwas verkleinert:
* gemessen standen dem Text nur 195 von 261px zur Verfuegung.
* ------------------------------------------------------------------------- */
.elementor-widget-icon-list .elementor-icon-list-text {
padding-inline-start: 8px;
}
.elementor-widget-icon-list .elementor-icon-list-item {
align-items: flex-start;
}
/* ---------------------------------------------------------------------------
* 7b. Bedienflaechen auf Fingergroesse
*
* Gemessen ueber 8 Seiten und 15 Bildschirmbreiten:
*
* - Karussell-Pfeile: 25x25px. Fuer den Finger zu klein, empfohlen sind 44x44.
* - Menue-Knopf auf dem Handy: 33x33px, ebenfalls zu klein.
* - Karussell-Bilder: der verlinkende Anker war nur 364x29px gross, weil er
* inline liegt und das Bild aus seinem Kasten faellt. Wer mitten auf ein
* Karussell-Bild tippte, oeffnete die Grossansicht also nicht. Das ist der
* wichtigste der drei Punkte, weil es nicht nur unbequem, sondern kaputt war.
*
* Die sichtbare Groesse der Pfeile und des Menue-Knopfs bleibt unveraendert,
* vergroessert wird nur die anfassbare Flaeche.
* ------------------------------------------------------------------------- */
.elementor-swiper-button {
display: flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
}
.elementor-menu-toggle {
min-width: 44px;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Der Anker um ein Karussell-Bild muss das Bild auch umschliessen. */
.elementor-image-carousel .swiper-slide > a,
.swiper-slide > a {
display: block;
}
/* ---------------------------------------------------------------------------
* 7c. Abstand zwischen Hero und Inhalt harmonisieren
*
* Gemessen als Luft zwischen Hero-Unterkante und erstem Text, ueber sieben
* Bildschirmbreiten:
*
* Startseite 237 bis 245 px
* Kontakt 207 bis 488 px
* Pferdepension 160 bis 210 px
* Landwirtschaft 160 bis 210 px
* Ueber uns 150 bis 200 px
* Impressum 60 px
* Datenschutz 10 px <- klebt an der Hero-Kante
*
* Die Datenschutzseite hatte auf JEDER Breite nur 10px, der Inhaltsbereich
* stand mit padding-top:0 direkt an der Bildkante. Das Impressum lag mit 60px
* ebenfalls deutlich unter dem Rest.
*
* Beide bekommen einen mitwachsenden Abstand auf der Skala der Seite
* (Fibonacci-nah: 72 / 89 / 128). Reine Textseiten brauchen nicht die 245px der
* Startseite, aber sie muessen zur Familie gehoeren.
* ------------------------------------------------------------------------- */
.elementor-page-128 .elementor-element-3d11432 {
padding-top: clamp(4.5rem, 7vw, 8rem);
}
.elementor-page-395 .elementor-element-5ff71e7 {
padding-top: clamp(1.5rem, 3vw, 3.5rem);
}
/* ---------------------------------------------------------------------------
* 8. Bilder
*
* Verhindert das Zerren von Bildern, die ohne Hoehenangabe im Markup stehen,
* und reserviert vor dem Laden den Platz (weniger Springen beim Aufbau).
* ------------------------------------------------------------------------- */
img,
video {
max-width: 100%;
height: auto;
}
/* Die Karussell-Bilder brauchen die Ausnahme, sie werden von Swiper
dimensioniert. */
.swiper img,
.swiper-slide img,
.elementor-image-carousel img {
height: revert-layer;
}
/* ---------------------------------------------------------------------------
* 9. Hero-Inhalt unter dem fixierten Header
*
* Der Header liegt fixiert ueber der Seite: 101px hoch unter 768px Breite,
* 190px ab 768px. Jede Hero-Sektion wird per margin-top: -100px darunter
* gezogen, damit das Foto hinter dem Header durchlaeuft. Das ist gewollt.
*
* Bei den flachen Baendern von Impressum, Datenschutz und Danke reicht die
* Hoehe dafuer nicht. Gemessen bei 375px: die H1 "Impressum" ueberschneidet
* das Logo um 145 x 44 px, auf /danke/ steht sie mit top -110px sogar ganz
* ueber dem Bildrand und ist unsichtbar. Die alte Seite hat denselben
* Fehler, teils groesser, er ist also geerbt.
*
* Das Padding sitzt bewusst auf dem inneren Container und nicht auf der
* Sektion: so rueckt nur der Text, das Hintergrundfoto laeuft weiter hinter
* dem Header durch und der gewollte Effekt bleibt erhalten.
* ------------------------------------------------------------------------- */
:root {
--sennweid-header: 101px;
}
@media (min-width: 768px) {
:root {
--sennweid-header: 190px;
}
}
/* Das Padding sitzt auf der SEKTION, nicht auf dem inneren Container.
Gemessener Unterschied: der Hero zentriert seinen Inhalt senkrecht. Padding
auf dem Innencontainer wird von dieser Zentrierung halbiert und wirkt nur
zur Haelfte. Padding auf der Sektion verkleinert die Zentrierbox von oben,
der Inhalt rueckt um den vollen Betrag. Der Hintergrund deckt die
Padding-Box mit ab, das Foto laeuft also weiter hinter dem Header durch. */
/* Zwei Strukturen, weil die Seiten aus zwei Elementor-Generationen stammen:
die neueren nutzen Container (.e-con), /danke/ noch die alte .
Gemessener Bedarf: 21px Luft reichten nicht, die H1 blieb 7 bis 9px im
Logo. Mit 42px steht sie frei. */
.page-content > div > .e-con:first-child,
.page-content > div > section.elementor-element:first-child {
padding-top: calc(var(--sennweid-header) + 42px);
}
/* ---------------------------------------------------------------------------
* 9b. Kurze Hero-Baender auf Mobil
*
* Impressum (395), Datenschutz (128) und Danke (156) haben statt eines
* grossen Hero-Fotos nur ein flaches Band. Der Inhalt darin ist unten
* ausgerichtet, deshalb wirkt ein Padding oben nicht: solange die Hoehe
* ausreicht, klebt der Text am unteren Rand.
*
* Gemessen bei 375px vor dem Fix: das Band reichte von -196 bis 124, also
* 124px sichtbar, davon 101px Header. Die zweizeilige Ueberschrift
* "Datenschutzerklaerung" begann bei 13px und lag damit voll im Logo.
*
* Der Hebel ist die Bandhoehe. Mit 480px bleiben rund 284px sichtbar, der
* Text steht frei unter dem Logo und das Band wirkt wie auf den anderen
* Seiten. Ab 768px greift die Regel nicht, dort loest das Padding aus 9.
* ------------------------------------------------------------------------- */
@media (max-width: 767px) {
.elementor-page-395 .page-content > div > .e-con:first-child,
.elementor-page-128 .page-content > div > .e-con:first-child,
.elementor-page-156 .page-content > div > section.elementor-element:first-child {
min-height: 480px;
}
/* Danke stammt aus der aelteren Elementor-Generation: statt
Container, display block statt flex, und die Seite wird nur um 139px
hochgezogen statt um 196px wie die beiden anderen. Dieselbe Zahl wirkt
dort deshalb anders. Gemessen bei 375px: mit dem Standard-Padding begann
der Text bei y=4, das Logo endet bei y=69. Mit 144px zusaetzlich beginnt
er bei 106 und steht frei. */
.elementor-page-156 .page-content > div > section.elementor-element:first-child {
padding-top: calc(var(--sennweid-header) + 144px);
}
}
/* ---------------------------------------------------------------------------
* 9c. Bildband fuer /danke/
*
* Gemessen: die H1 auf /danke/ hatte rgb(242,242,242) auf rgb(242,242,242).
* Kontrast 1:1, also unsichtbar. Die globale Regel .elementor-kit-8 h1 setzt
* diese Farbe, weil jede andere Seite ihre H1 auf einem dunklen Hero-Foto
* stehen hat. /danke/ war die einzige Seite ohne Bildband. Aus demselben
* Grund war dort auch das weisse Logo kaum zu sehen, das schon im Original.
*
* Statt die Ueberschrift dunkel zu faerben bekommt die Seite dasselbe Band
* wie Kontakt, Impressum und Datenschutz. Gleiches Bild, gleicher Verlauf.
* ------------------------------------------------------------------------- */
.elementor-page-156 .page-content > div > section.elementor-element:first-child {
position: relative;
background-image: url("/wp-content/uploads/2024/07/UeberUnsHero.webp");
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.elementor-page-156 .page-content > div > section.elementor-element:first-child::before {
content: '';
position: absolute;
inset: 0;
background-image: linear-gradient(180deg, #0000004a 19%, #000000ed 100%);
pointer-events: none;
}
/* Der Inhalt muss ueber den Verlauf, sonst liegt er darunter. */
.elementor-page-156 .page-content > div > section.elementor-element:first-child > * {
position: relative;
z-index: 1;
}
/* Flieesstext und Telefonlink hell, sie stehen jetzt auf dem dunklen Teil
des Verlaufs. Das Grau ist dasselbe, das die Ueberschriften nutzen. */
.elementor-page-156 .page-content > div > section.elementor-element:first-child p,
.elementor-page-156 .page-content > div > section.elementor-element:first-child a {
color: #f2f2f2;
}
/* ---------------------------------------------------------------------------
* 10. Mobile Navigation
*
* Ersetzt Elementors Dropdown. Das klappte unter dem Knopf auf, legte sich
* dabei ueber das Logo, zeigte nur vier der sechs Seiten, sperrte den
* Hintergrund nicht und liess den Burger einen Burger bleiben. Zwei Eintraege
* standen auf dunklem, zwei auf hellem Grund, ohne erkennbares Muster.
*
* Farben und Schriften kommen aus dem Kit der Seite:
* #41695E dunkles Gruen, wie der Fussbereich
* #EED284 Gold, wie die Ueberschriften "Aktuelles" und "Quicklinks"
* #F2F2F2 das helle Grau der Ueberschriften
* Spectral fuer die Eintraege, Source Sans 3 fuer das Kleingedruckte
*
* Das Panel liegt auf z-index 90, der fixierte Header auf 99. Logo und Knopf
* bleiben dadurch sichtbar, der Knopf wird zum Schliessen benutzt.
* ------------------------------------------------------------------------- */
/* Elementors Dropdown wird nicht mehr gebraucht. Es bleibt im Markup, damit
die Eintraege weiterhin von dort gelesen werden koennen. */
.elementor-nav-menu--dropdown.elementor-nav-menu__container {
display: none !important;
}
.sw-navi {
position: fixed;
inset: 0;
z-index: 90;
}
.sw-navi[hidden] {
display: none;
}
.sw-navi__grund {
position: absolute;
inset: 0;
background: rgba(20, 32, 28, 0.55);
opacity: 0;
transition: opacity 0.28s ease;
}
.sw-navi__panel {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 34px;
padding: calc(var(--sennweid-header, 101px) + 21px) 34px calc(34px + env(safe-area-inset-bottom, 0px));
overflow-y: auto;
overscroll-behavior: contain;
background: linear-gradient(168deg, #41695e 0%, #2c473f 100%);
transform: translateY(-14px);
opacity: 0;
transition:
transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
opacity 0.24s ease;
}
.sw-navi.ist-offen .sw-navi__grund,
.sw-navi.ist-offen .sw-navi__panel {
opacity: 1;
transform: none;
}
.sw-navi__liste {
margin: 0;
padding: 0;
list-style: none;
}
.sw-navi__liste li + li {
border-top: 1px solid rgba(242, 242, 242, 0.14);
}
.sw-navi__panel a.sw-navi__link {
display: flex;
align-items: center;
min-height: 60px;
padding: 13px 0;
color: #f2f2f2;
font-family: Spectral, Georgia, serif;
font-size: 27px;
line-height: 1.25;
letter-spacing: 0.01em;
text-decoration: none;
transition: color 0.18s ease;
}
.sw-navi__panel a.sw-navi__link:hover,
.sw-navi__panel a.sw-navi__link:focus-visible {
color: #eed284;
}
/* Die aktuelle Seite bekommt den Goldton und einen Strich, damit sie sich
nicht allein ueber die Farbe erklaert. */
.sw-navi__panel a.sw-navi__link.ist-hier {
color: #eed284;
}
/* Der Marker war zuerst ein Strich vor dem Wort. Der las sich wie ein
Gedankenstrich, und die Seite hat fuer Akzente laengst ein eigenes Zeichen:
den goldenen Unterstrich unter den Sektionslabels. Den nutze ich hier auch,
damit die Navigation dieselbe Sprache spricht. Der Rahmen sitzt am inneren
span, nicht am Link, sonst zoege er sich ueber die ganze Zeilenbreite. */
.sw-navi__panel a.sw-navi__link.ist-hier {
position: relative;
}
.sw-navi__panel a.sw-navi__link.ist-hier::after {
content: '';
position: absolute;
left: 0;
bottom: 13px;
width: 34px;
height: 2px;
background: #eed284;
}
.sw-navi__fuss {
display: flex;
flex-direction: column;
gap: 8px;
padding-top: 21px;
border-top: 1px solid rgba(242, 242, 242, 0.14);
font-family: 'Source Sans 3', system-ui, sans-serif;
}
.sw-navi__marke {
margin: 0 0 5px;
color: #eed284;
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.sw-navi__panel a.sw-navi__kontakt {
display: flex;
align-items: center;
min-height: 44px;
color: #f2f2f2;
font-size: 17px;
text-decoration: none;
}
.sw-navi__panel a.sw-navi__kontakt:hover,
.sw-navi__panel a.sw-navi__kontakt:focus-visible {
text-decoration: underline;
}
.sw-navi__recht {
margin: 8px 0 0;
color: rgba(242, 242, 242, 0.62);
font-size: 14px;
}
.sw-navi__panel .sw-navi__recht a {
display: inline-block;
padding: 10px 0;
color: inherit;
text-decoration: none;
}
.sw-navi__panel .sw-navi__recht a:hover,
.sw-navi__panel .sw-navi__recht a:focus-visible {
color: #f2f2f2;
text-decoration: underline;
}
.sw-navi :focus-visible {
outline: 2px solid #eed284;
outline-offset: 3px;
border-radius: 2px;
}
/* Ab 600px wird aus der Vollflaeche ein seitliches Blatt. Erst dadurch gibt
es eine Flaeche daneben, auf die man zum Schliessen tippen kann. Auf dem
Telefon waere das falsch: dort ist die Vollflaeche das erwartete Muster und
ein schmales Blatt liesse nur einen nutzlosen Rand uebrig. */
@media (min-width: 600px) {
.sw-navi__panel {
left: auto;
width: min(420px, 84vw);
box-shadow: -21px 0 55px rgba(20, 32, 28, 0.34);
transform: translateX(21px);
}
}
/* Ab dieser Breite uebernimmt wieder die normale Navigation im Header. */
@media (min-width: 1025px) {
.sw-navi {
display: none;
}
}
/* Auf sehr flachen Fenstern, etwa Querformat auf dem Telefon, wird der
Abstand knapp. Dann kleiner setzen statt scrollen lassen. */
@media (max-height: 560px) {
.sw-navi__panel {
gap: 21px;
padding-top: calc(var(--sennweid-header, 101px) + 8px);
}
.sw-navi__panel a.sw-navi__link {
min-height: 48px;
padding: 8px 0;
font-size: 21px;
}
}
@media (prefers-reduced-motion: reduce) {
.sw-navi__grund,
.sw-navi__panel {
transition: none;
transform: none;
}
}
/* ===========================================================================
* 11. Was auf allen Seiten gilt
*
* Diese Bloecke standen zuerst in sennweid-galerie.css. Das liegt aber nur auf
* drei von zehn Seiten. Die Regeln gelten ueberall, deshalb stehen sie hier.
* ========================================================================= */
/* ---------------------------------------------------------------------------
* Links im Fussbereich lesbar machen
*
* Gemessen an den gerenderten Pixeln: die Telefonnummern, die E-Mail und der
* neue Besichtigungs-Link standen in rgb(88,123,114), dem Markengruen, auf dem
* dunkelgruenen Fussbereich. Kontrast 2.56:1 gegen den dunkelsten und 4.18:1
* gegen den hellsten Punkt, beides unter der Anforderung von 4.5:1. Die
* Quicklinks daneben waren mit rgb(242,242,242) schon richtig, nur diese nicht.
*
* Ursache ist dieselbe wie bei der Navigation und der Galerie-Karte:
* .elementor-kit-8 a setzt die Markenfarbe und hat dieselbe Spezifitaet wie
* eine reine Klassenregel. footer.elementor-location-footer a traegt Element
* plus Klasse plus Element und gewinnt sicher.
*
* Betrifft die wichtigsten Angaben ueberhaupt: wie man den Hof erreicht.
* ------------------------------------------------------------------------- */
footer.elementor-location-footer a,
footer.elementor-location-footer a:visited {
color: #f2f2f2;
}
footer.elementor-location-footer a:hover,
footer.elementor-location-footer a:focus-visible {
color: #eed284;
}
/* Der Besichtigungs-Link steht mitten im Satz und braucht deshalb ein Zeichen,
dass er einer ist. Der goldene Unterstrich ist dafuer das Mittel, das die
Seite ohnehin verwendet. */
footer.elementor-location-footer a[href='/kontakt/'] {
padding-bottom: 2px;
border-bottom: 2px solid #eed284;
text-decoration: none;
}
footer.elementor-location-footer a[href='/kontakt/']:hover,
footer.elementor-location-footer a[href='/kontakt/']:focus-visible {
border-bottom-color: #f2f2f2;
}
Querverweis unter den Bildstrecken von Pferdepension und Landwirtschaft */
.sw-mehr-impressionen {
width: min(1140px, 100% - 2 * clamp(15px, 5vw, 70px));
margin: 0 auto 55px;
padding-top: 21px;
border-top: 1px solid rgba(49, 49, 49, 0.14);
font-family: 'Source Sans 3', system-ui, sans-serif;
}
.sw-mehr-impressionen a {
display: inline-block;
padding: 10px 0;
border-bottom: 2px solid #eed284;
color: #41695e;
font-size: 17px;
text-decoration: none;
}
.sw-mehr-impressionen a:hover,
.sw-mehr-impressionen a:focus-visible {
border-bottom-color: #41695e;
}
/* Herunterladen-Knopf in der Lightbox, neben dem Zaehler */
.sw-lb__kopf {
gap: 8px;
}
a.sw-lb__knopf {
display: grid;
place-items: center;
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(242, 242, 242, 0.12);
color: #f2f2f2;
text-decoration: none;
transition: background-color 0.16s ease;
}
a.sw-lb__knopf:hover,
a.sw-lb__knopf:focus-visible {
background: rgba(242, 242, 242, 0.24);
}
a.sw-lb__knopf:focus-visible {
outline: 2px solid #eed284;
outline-offset: 3px;
}
.sw-lb__zaehler {
margin-right: auto;
}
/* ---------------------------------------------------------------------------
* Querverweis unter den Bildstrecken von Pferdepension und Landwirtschaft
*
* Vorher ein Satz im Fliesstext. Der Kunde hat zu Recht angemerkt, dass das
* ein Knopf sein sollte: ein Satz mitten im Weiss liest sich nicht als
* Angebot. Und weil die Regeln zuerst im Galerie-Stylesheet standen, das auf
* diesen beiden Seiten gar nicht geladen wird, stand er ausserdem ganz links
* am Fensterrand statt in der Satzbreite.
*
* Machart wie der Absendeknopf des Formulars: gefuellt, rund, heller Text.
* ------------------------------------------------------------------------- */
.sw-mehr-impressionen {
width: min(1140px, 100% - 2 * clamp(15px, 5vw, 70px));
margin: 0 auto 89px;
padding-top: 34px;
border-top: 1px solid rgba(49, 49, 49, 0.14);
font-family: 'Source Sans 3', system-ui, sans-serif;
text-align: center;
}
.sw-mehr-impressionen p {
margin: 0;
}
a.sw-impressionen-knopf,
a.sw-impressionen-knopf:visited {
display: inline-block;
min-height: 48px;
padding: 14px 34px;
border: 0;
border-radius: 999px;
background: #41695e;
color: #f2f2f2;
font-size: 17px;
line-height: 1.2;
text-decoration: none;
transition:
background-color 0.18s ease,
color 0.18s ease;
}
a.sw-impressionen-knopf:hover,
a.sw-impressionen-knopf:focus-visible {
background: #2c473f;
color: #ffffff;
}
a.sw-impressionen-knopf:focus-visible {
outline: 2px solid #eed284;
outline-offset: 3px;
}
/* ---------------------------------------------------------------------------
* Hero-"Aktuelles"-Rahmen der Startseite: verbergen, wenn kein Hinweis drin
*
* Der Rahmen [data-id='654faab'] existiert nur, um einen zeitlich begrenzten
* Hinweis zu zeigen (zuletzt das Stallfest, seit 13.09. abgelaufen). Ohne
* Inhalt blieb ein leerer Kasten mit Umrandung stehen, genau der, den der
* Kunde damals eingekreist hatte. Diese Regel verbirgt ihn, sobald der aktive
* Hinweis fehlt, und deckt beide Faelle ab: beim Bauen nie erzeugt (Stichtag
* vorbei) und zur Laufzeit vom Aufraeumskript entfernt.
*
* Vorteil gegenueber dem Aufraeumskript allein: greift schon beim ersten
* Zeichnen, also ohne Flackern. Steht in verbesserungen.css, weil das auf
* jeder Seite geladen wird, auch wenn galerie.css auf der abgelaufenen
* Startseite fehlt. :has() ist seit Ende 2023 Baseline.
* ------------------------------------------------------------------------- */
.elementor-page-385 [data-id='654faab']:not(:has([data-sennweid-aktuelles])) {
display: none;
}
/* ---------------------------------------------------------------------------
* Scroll-Lasche im Hero: auf dem Desktop ausblenden
*
* Der helle Kreis mit dem Pfeil (Container cc2d452) wird per margin-top:-85px
* in den Hero gezogen. Ab dem Desktop-Layout (1025px) rueckt die Unterzeile
* "...auf unserem Hof" so weit nach unten, dass der 150x159px grosse Kreis sie
* ueberdeckt: gemessen 6px bei 1100px, 29px bei 1280px, bis 58px bei 1600px.
* Ihn tiefer zu setzen wuerde ihn aus dem Hero schieben (heller Kreis auf
* hellem Grund). Auf dem Desktop ist ein Scroll-Hinweis ohnehin entbehrlich,
* darum dort ausblenden. Unter 1025px, wo er nicht kollidiert und eher hilft,
* bleibt er unveraendert. */
@media (min-width: 1025px) {
.elementor-page-385 .elementor-element.elementor-element-cc2d452 {
display: none !important;
}
}