.elementor-kit-514{--e-global-color-primary:#B66E4D;--e-global-color-secondary:#5B524A;--e-global-color-text:#3C332D;--e-global-color-accent:#B66E4D;--e-global-color-85e83f3:#F5F0E8;--e-global-color-c20abd9:#FFFFFF;--e-global-color-7797662:#D8CCBE;--e-global-color-awkontrast:#8F4F33;--e-global-typography-primary-font-family:"Inter";--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"Inter";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-514 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1340px;}.e-con{--container-max-width:1340px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ========================================================================== ALMERWIRT – zentrale Anpassungen -------------------------------------------------------------------------- Quelle der Wahrheit ist diese Datei. Sie wird nach Elementor → Website-Einstellungen → Benutzerdefiniertes CSS gespielt (Script: tools/css-in-kit.sh). Farben und Schriften kommen aus den GLOBALEN Elementor-Vorgaben. Hier steht nur, was Elementor global nicht abbilden kann: Fokus, Skip-Link, Link-Unterstreichung, Bewegungsreduktion, Tabellen. ========================================================================== */ :root { /* Spiegelt die globalen Elementor-Farben – damit sie auch in eigenem CSS verfuegbar sind. Beim Aendern IMMER auch die Global Colors anpassen. */ --aw-primary: #b66e4d; /* Flaechen und Deko – Kontrast 3,9:1 auf Weiss */ --aw-primary-kontrast: #8f4f33; /* Text, Links, Buttons – 6,3:1 auf Weiss */ --aw-secondary: #5b524a; --aw-text: #3c332d; --aw-elfenbein: #f5f0e8; --aw-sand: #d8ccbe; --aw-radius: 10px; --aw-fokus-breite: 3px; --aw-fokus-abstand: 2px; /* Innenabstand aller Formularfelder. Steht hier, damit Texteingaben und Auswahlfelder garantiert denselben Wert benutzen. */ --aw-feld-innen: 0.8em 1.05em; /* * Hoehe des fixierten Headers. Der Header liegt ueber dem Inhalt und * reserviert selbst keinen Platz – Seiten, die nicht mit einem randlosen * Bild beginnen, holen sich den Abstand von hier. EINE Stelle zum Aendern. * * Die Werte sind gemessen, nicht geschaetzt (Startseite, echter Browser): * 360–767 px -> 122 px (Info-Leiste 54 + Hauptleiste 68) * 768 px -> 134 px * ab 1024 px -> 117 px * Hier steht jeweils etwas mehr, damit nichts anstoesst. * * Vorher standen hier 116/104/96 – auf dem Handy also 26 px zu wenig. * Deshalb klebte der Titel im Seitenkopf direkt unter dem Header. */ --aw-header-hoehe: 120px; } @media (max-width: 1024px) { :root { --aw-header-hoehe: 138px; } } @media (max-width: 767px) { :root { --aw-header-hoehe: 126px; } } /* -------------------------------------------------------------------------- 1. Sichtbarer Fokus Ohne das ist die Seite mit der Tastatur nicht bedienbar (WCAG 2.4.7). :focus-visible zeigt den Ring nur bei Tastaturbedienung, nicht bei Mausklick. -------------------------------------------------------------------------- */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible, .elementor-button:focus-visible { outline: var(--aw-fokus-breite) solid var(--aw-primary-kontrast); outline-offset: var(--aw-fokus-abstand); border-radius: var(--aw-radius); } /* Auf dunklen Flaechen braucht der Ring eine helle Farbe, sonst verschwindet er. */ .aw-dunkel a:focus-visible, .aw-dunkel button:focus-visible, .aw-dunkel .elementor-button:focus-visible { outline-color: #ffffff; } /* -------------------------------------------------------------------------- 2. Skip-Link Springt an den Inhalt und ueberspringt die Navigation (WCAG 2.4.1). Wird im Header-Template als erstes Element eingebunden. -------------------------------------------------------------------------- */ .aw-skiplink { position: absolute; left: -9999px; top: 0; z-index: 10000; padding: 12px 20px; background: var(--aw-elfenbein); color: var(--aw-text); border: 2px solid var(--aw-primary-kontrast); border-radius: 0 0 var(--aw-radius) 0; text-decoration: none; font-weight: 700; } .aw-skiplink:focus { left: 0; } /* -------------------------------------------------------------------------- 3. Links im Fliesstext Farbe allein darf Links nicht kennzeichnen (WCAG 1.4.1) – daher unterstrichen. Buttons und Menue sind ausgenommen, die sind als Flaeche erkennbar. -------------------------------------------------------------------------- */ .elementor-widget-text-editor a:not(.elementor-button), .elementor-widget-theme-post-content a:not(.elementor-button), .elementor-widget-shortcode a:not(.elementor-button), .aw-termine a, .aw-kontakt-liste a { color: var(--aw-primary-kontrast); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; } .elementor-widget-text-editor a:not(.elementor-button):hover, .elementor-widget-theme-post-content a:not(.elementor-button):hover, .elementor-widget-shortcode a:not(.elementor-button):hover, .aw-termine a:hover, .aw-kontakt-liste a:hover { text-decoration-thickness: 2px; } /* -------------------------------------------------------------------------- 4. Bedienelemente gross genug Mindestens 44x44 px Zielflaeche (WCAG 2.5.8). -------------------------------------------------------------------------- */ .elementor-button, .aw-kontakt-liste a { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; } /* -------------------------------------------------------------------------- 5. Bewegung reduzieren Respektiert die Systemeinstellung (WCAG 2.3.3). -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* -------------------------------------------------------------------------- 5d. Umbruchpunkt der Navigation Das Menue braucht mit den jetzigen Abstaenden rund 900 px. Zusammen mit Logo und Knopf reicht der Platz erst ab etwa 1300 px – darunter bricht es zweizeilig um. Elementor schaltet erst bei 1025 px auf den Burger, das ist viel zu spaet. Die Angabe steht bewusst in em statt px: Vergroessert jemand die Schrift, waechst auch der Platzbedarf des Menues – die Abfrage greift dann frueher, genau wie sie soll. 88 em entsprechen 1408 px. Der Wert wurde angehoben, als die Menueschrift von 15 auf 16 px wuchs – groessere Schrift braucht mehr Platz. -------------------------------------------------------------------------- */ @media (max-width: 88em) { #header-container .aw-navigation .elementor-nav-menu--main { display: none !important; } #header-container .aw-navigation .elementor-menu-toggle { display: flex !important; } } /* * Anordnung, solange der Burger da ist: Logo links, rechts „Anrufen“ und * der Burger – in dieser Reihenfolge, der Burger ganz aussen. * * Im Quelltext steht der Menue-Block VOR dem Anrufen-Knopf (weil das am * grossen Schirm die richtige Reihenfolge ist). Auf schmalen Schirmen * dreht `order` das um, ohne den Quelltext zu aendern – die Reihenfolge * fuer Screenreader und Tastatur bleibt damit unveraendert. */ @media (max-width: 88em) { #header-container #aw-hauptleiste.e-con.e-flex { justify-content: space-between !important; gap: 12px; } #header-container #aw-hauptleiste > .aw-logo { order: 1; margin-right: auto; } /* * Im Menue-Block stecken Burger UND „Anrufen“. Er nahm die halbe * Leiste ein, obwohl nur zwei Knoepfe darin sind – jetzt schrumpft er * auf seinen Inhalt und sitzt am rechten Rand. */ #header-container #aw-hauptleiste > #aw-navblock { order: 3; flex: 0 0 auto; width: auto; min-width: 0; justify-content: flex-end; } } /* Ab hier hat das Menue Platz – dann gibt es keinen Burger. Ausdruecklich, damit keine spaetere Regel ihn versehentlich einblendet. */ @media (min-width: 88.0625em) { #header-container .aw-navigation .elementor-menu-toggle, #header-container .aw-navigation .elementor-nav-menu--dropdown { display: none !important; } } /* -------------------------------------------------------------------------- 5e. Ruhiges Bild einer Seite Medien in einer Reihe bekommen dasselbe Seitenverhaeltnis. Sonst sind die Kacheln unterschiedlich hoch und die Reihe wirkt unaufgeraeumt. Abgerundete Ecken nehmen den Bildern die Haerte. -------------------------------------------------------------------------- */ .aw-kachelbild img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; height: auto; border-radius: var(--aw-radius); } .aw-blockbild img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; height: auto; border-radius: var(--aw-radius); } /* Galerie: gleich hohe Felder, damit die Reihen buendig stehen. */ .elementor-widget-image-gallery .gallery-item img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; height: auto; border-radius: var(--aw-radius); } /* Gleiche Hoehe der Kacheln steuert die Container-Einstellung flex_justify_content: space-between (siehe lib-elementor.php) – Container nehmen keine CSS-Klassen an. */ /* -------------------------------------------------------------------------- 6. Nur fuer Screenreader Beschriftungen, die sichtbar redundant waeren, akustisch aber fehlen. -------------------------------------------------------------------------- */ .aw-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- 5b. Header und Navigation -------------------------------------------------------------------------- */ /* * Betheme ueberschreibt die Flex-Richtung von Elementor-Containern innerhalb * des Headers. Ohne diese Zeilen stapeln Info-Leiste und Hauptleiste * untereinander, statt nebeneinander zu stehen. */ #header-container #aw-infoleiste.e-con.e-flex, #header-container #aw-hauptleiste.e-con.e-flex { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; } /* * Dasselbe gilt fuer die Hintergruende: die Global Colors sind am Container * gesetzt, werden im Header aber ueberschrieben. Die Werte spiegeln die * Global Colors – beim Aendern einer Kit-Farbe hier mitziehen. */ /* * Der Header wird vom Theme eingerueckt (er sitzt in einem Container mit * Innenabstand). Diese Zeilen ziehen ihn ueber die volle Breite und an den * oberen Rand – sonst bleiben helle Streifen oben und an den Seiten stehen. */ #header-container { top: 0 !important; left: 0 !important; right: 0 !important; /* Nicht 100vw: das rechnet die Scrollleiste mit und erzeugt einen Ueberhang. left/right 0 spannt den Header exakt ueber den sichtbaren Bereich. */ width: auto !important; max-width: none !important; margin: 0 !important; /* Ohne diese Zeile bleiben 22 px oben und 14 px seitlich als heller Rand um die Info-Leiste stehen – der Innenabstand kommt aus den Container-Vorgaben und ueberschreibt die Einstellung am Element. */ padding: 0 !important; } /* Die beiden Leisten fuellen den Header vollstaendig aus. */ #header-container > .e-con-inner { max-width: none !important; width: 100% !important; padding: 0 !important; } /* Die Info-Leiste traegt das hellere Braun – dasselbe wie der Knopf daneben. Elfenbein darauf ergibt 5,55:1. */ #header-container #aw-infoleiste.e-con.e-flex { background-color: var(--aw-primary-kontrast) !important; } #header-container #aw-hauptleiste.e-con.e-flex { background-color: var(--aw-elfenbein) !important; } /* Info-Leiste: dunkles Band, klein und ruhig – nie wichtiger als der Inhalt. Elfenbein auf #3C332D ergibt 10,9:1. */ #aw-infoleiste p { margin: 0; font-size: 0.82rem; line-height: 1.4; color: var(--aw-elfenbein); letter-spacing: 0.01em; } #aw-infoleiste a { color: var(--aw-elfenbein); text-decoration: none; } #aw-infoleiste a:hover { text-decoration: underline; } /* Auf schmalen Schirmen bleibt nur die wichtigste Zeile stehen. */ @media (max-width: 767px) { #aw-infoleiste { justify-content: center !important; } .aw-infoleiste-kontakt { display: none; } .aw-infoleiste-zeiten p { font-size: 0.74rem; text-align: center; } } /* Der Reservieren-Knopf ist die einzige farbige Flaeche im Header. */ .aw-cta .elementor-button { padding-block: 0.7em; padding-inline: 1.4em; white-space: nowrap; font-size: 0.82rem; } /* Anruf-Knopf nur mobil – am Schreibtisch steht die Nummer in der Info-Leiste. */ .aw-anruf-mobil { display: none; } @media (max-width: 767px) { .aw-anruf-mobil { display: block; } .aw-anruf-mobil .elementor-button { padding-inline: 1em; font-size: 0.78rem; } /* Auf dem Handy fuehrt „Reservieren“ ueber das Menue – ein Knopf genuegt. */ .aw-cta { display: none; } } /* * Zustand nie ueber die Groesse anzeigen. * * Fett oder groesser beim Hovern macht den Text breiter – die Nachbarn * ruecken zur Seite, die Leiste wackelt und ein Ziel kann unter dem * Mauszeiger wegwandern. Deshalb bleiben Schriftgroesse und -staerke in der * Hauptleiste immer gleich. * * Die Kennzeichnung uebernimmt der Unterstrich, den Elementor als * Pointer-Effekt mitbringt (e--pointer-underline): Er liegt in einem * Pseudo-Element und beansprucht keinen Platz im Layout. * Hovern/Fokus -> Linie faehrt ein * aktive Seite -> Linie bleibt stehen, dazu die Akzentfarbe * Damit ist der Zustand nicht allein an der Farbe erkennbar (WCAG 1.4.1), * und Screenreader bekommen zusaetzlich aria-current="page". */ /* --- Hauptmenue: Grundzustand ---------------------------------------- */ .aw-navigation .elementor-nav-menu--main .elementor-item { position: relative; font-weight: 500; transition: color 0.18s ease; } /* --- Die Linie unter dem Menuepunkt ---------------------------------- * * Sie liegt in einem Pseudo-Element und beansprucht keinen Platz – der * Text bewegt sich also nie, egal in welchem Zustand. * * Sie waechst aus der Mitte: das fuehrt das Auge zum Wort, statt es von * links anzuschieben, und wirkt bei kurzen Woertern („Zimmer“) genauso * ruhig wie bei langen („Feiern & Seminare“). * * Links und rechts endet sie buendig mit dem Wort, nicht mit dem * Klickbereich – deshalb der Abstand von 22 px, derselbe Wert wie der * seitliche Innenabstand des Menuepunkts. */ .aw-navigation .elementor-nav-menu--main .elementor-item::after { content: ""; position: absolute; left: 22px; right: 22px; bottom: 0.5em; height: 2px; border-radius: 2px; background: currentColor; transform: scaleX(0); transform-origin: center; transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1); } /* * Nur auf Geraeten mit echtem Zeiger. * * Ohne diese Abfrage bleibt der Hover-Zustand auf dem Handy nach dem * Antippen stehen: der zuletzt beruehrte Punkt sieht dann aus wie der * aktuelle. Genau das war der Fehler im ausgeklappten Menue. */ @media (hover: hover) { .aw-navigation .elementor-nav-menu--main .elementor-item:hover::after { transform: scaleX(1); } } .aw-navigation .elementor-nav-menu--main .elementor-item:focus-visible::after { transform: scaleX(1); } /* * Die aktuelle Seite. * * Sie muss sich vom Hovern unterscheiden – sonst weiss man, waehrend die * Maus irgendwo liegt, nicht mehr, wo man ist. Unterschieden wird durch * die STAeRKE der Linie (3 statt 2 px) und dadurch, dass sie immer da * ist. Die Akzentfarbe allein waere zu wenig: sie traegt beide Zustaende * und ist damit kein Unterscheidungsmerkmal (WCAG 1.4.1). */ .aw-navigation .elementor-nav-menu--main .elementor-item-active { color: var(--aw-primary-kontrast); } .aw-navigation .elementor-nav-menu--main .elementor-item-active::after { transform: scaleX(1); height: 3px; background: var(--aw-primary-kontrast); } /* Wer Bewegung reduziert, bekommt die Linie ohne Aufbau – aber er bekommt sie. Ein Zustand darf nicht an einer Animation haengen. */ @media (prefers-reduced-motion: reduce) { .aw-navigation .elementor-nav-menu--main .elementor-item::after { transition: none; } } /* Der Fokusring soll den ganzen Menuepunkt umfassen, nicht nur die Schrift – sonst ist er zwischen den Punkten kaum zu finden. */ .aw-navigation .elementor-nav-menu--main .elementor-item:focus-visible { outline: var(--aw-fokus-breite) solid var(--aw-primary-kontrast); outline-offset: -2px; border-radius: var(--aw-radius); } /* --- Burger ----------------------------------------------------------- * * Ohne geschriebene Beschriftung, dafuer deutlich sichtbar: ein gefuellter * Knopf in der Akzentfarbe, so gross wie die uebrigen Knoepfe (48 px, damit * er sicher mit dem Daumen zu treffen ist – WCAG 2.5.8 verlangt 24 px, 44 px * gelten als bequem). * * Dass er ein Menue oeffnet, sagt das aria-label „Menü öffnen und schließen“ * – gesprochen, nicht geschrieben. */ .aw-navigation .elementor-menu-toggle { box-sizing: border-box; width: 48px; height: 48px; padding: 0; /* * Hier steht bewusst KEIN display. * * Ob der Burger ueberhaupt erscheint, entscheidet allein der * Umbruchpunkt in Abschnitt 5d. Stand hier `display: inline-flex`, * gewann diese Regel gegen das `display: none` von Elementor – der * Burger war dann auch am grossen Schirm neben dem Menue zu sehen. */ align-items: center; justify-content: center; background-color: var(--aw-primary-kontrast) !important; border: var(--aw-knopf-rand) solid var(--aw-primary-kontrast); border-radius: var(--aw-radius); color: #ffffff !important; transition: background-color 0.16s ease, border-color 0.16s ease; } .aw-navigation .elementor-menu-toggle svg { width: 24px; height: 24px; fill: #ffffff !important; } @media (hover: hover) { .aw-navigation .elementor-menu-toggle:hover { background-color: var(--aw-text) !important; border-color: var(--aw-text); } } .aw-navigation .elementor-menu-toggle:focus-visible { outline: var(--aw-fokus-breite) solid var(--aw-text); outline-offset: 2px; } /* Ist das Menue offen, wechselt der Knopf die Farbe – so ist der Zustand auch ohne die Beschriftung „Schließen“ zu erkennen. */ .aw-navigation .elementor-menu-toggle[aria-expanded="true"] { background-color: var(--aw-text) !important; border-color: var(--aw-text); } /* * Ausgeklapptes Menue auf Tablet und Handy. * Statt einer schmalen Liste ein Panel ueber die volle Breite: grosse * Zeilen, klare Trennlinien, Ziele deutlich groesser als die geforderten * 44 px – bequem mit dem Daumen zu treffen. */ @media (max-width: 1024px) { .aw-navigation .elementor-nav-menu--dropdown { border-radius: 0 0 var(--aw-radius) var(--aw-radius); box-shadow: 0 18px 40px rgba(30, 26, 22, 0.16); max-height: calc(100vh - var(--aw-header-hoehe)); overflow-y: auto; overscroll-behavior: contain; } /* * Die Zeilen des ausgeklappten Menues. * * Die Einstellungen des Widgets greifen hier nicht zuverlaessig (Hoehe und * Farbe der aktiven Zeile blieben auf den Elementor-Vorgaben). Deshalb * derselbe Weg wie beim Header: Selektor mit der Container-ID, damit er * gegen die je Widget erzeugten Regeln gewinnt. * * Hoehe mindestens 52 px – deutlich ueber den geforderten 44 px, damit * die Zeilen mit dem Daumen sicher zu treffen sind. */ #header-container .elementor-nav-menu--dropdown a.elementor-item { min-height: 52px !important; display: flex !important; align-items: center !important; padding-block: 0.9em !important; padding-inline: 1.25em !important; border-bottom: 1px solid var(--aw-sand) !important; color: var(--aw-text) !important; background-color: transparent !important; } /* * Die aktuelle Seite und die Reservierung: weiss auf Akzentfarbe (6,3:1). * Zusaetzlich ein Balken am linken Rand – damit ist der Zustand nicht * allein an der Farbe erkennbar (WCAG 1.4.1). */ #header-container .elementor-nav-menu--dropdown a.elementor-item-active, #header-container .elementor-nav-menu--dropdown .aw-nur-mobil > a.elementor-item { background-color: var(--aw-primary-kontrast) !important; color: #ffffff !important; } #header-container .elementor-nav-menu--dropdown a.elementor-item-active { box-shadow: inset 5px 0 0 0 var(--aw-text) !important; font-weight: 700 !important; } /* * Hovern bekommt eine EIGENE, leisere Kennzeichnung. * * Vorher sahen Hover und aktuelle Seite gleich aus – auf dem Handy blieb * der Hover-Zustand nach dem Antippen stehen, und die Zeile sah dann aus * wie die aktuelle Seite. Zwei Aenderungen: eigene Farbe, und der * Zustand gilt nur dort, wo es einen echten Zeiger gibt. */ @media (hover: hover) { #header-container .elementor-nav-menu--dropdown a.elementor-item:hover { background-color: var(--aw-elfenbein) !important; color: var(--aw-primary-kontrast) !important; } #header-container .elementor-nav-menu--dropdown a.elementor-item-active:hover { background-color: var(--aw-primary-kontrast) !important; color: #ffffff !important; } } /* Rueckmeldung beim Antippen – kurz, und danach wieder weg. */ #header-container .elementor-nav-menu--dropdown a.elementor-item:active { background-color: var(--aw-sand) !important; color: var(--aw-text) !important; } #header-container .elementor-nav-menu--dropdown a.elementor-item:focus-visible { outline: var(--aw-fokus-breite) solid var(--aw-primary-kontrast) !important; outline-offset: -4px; } /* Die Reservierung schliesst das Menue als Aktion ab. */ #header-container .elementor-nav-menu--dropdown .aw-nur-mobil > a.elementor-item { font-weight: 700 !important; border-bottom: 0 !important; } } /* Ab Tablet uebernimmt der Knopf im Header – dann faellt der Punkt weg. */ @media (min-width: 1025px) { .aw-nur-mobil { display: none !important; } } /* -------------------------------------------------------------------------- 5c. Seitenkopf Holt sich den Abstand vom fixierten Header. Aendert sich die Headerhoehe, genuegt --aw-header-hoehe weiter oben. -------------------------------------------------------------------------- */ #seitenkopf { position: relative; min-height: clamp(340px, 60vh, 620px); display: flex !important; flex-direction: column !important; justify-content: flex-end !important; padding-top: calc(var(--aw-header-hoehe) + 24px) !important; padding-bottom: clamp(34px, 6vh, 76px) !important; background-size: cover; background-position: center center; overflow: hidden; } /* * Verlauf ueber dem Foto. * * Er ist die einzige Absicherung dafuer, dass weisse Schrift auf einem * beliebigen Foto lesbar bleibt. Gerechnet wird der schlimmste Fall: der * Verlauf liegt ueber einer reinweissen Bildstelle (heller Himmel). Ueber * dunkleren Motiven wird der Kontrast nur besser. * * Der Text sitzt – gemessen ueber alle Seiten, von unten gezaehlt – * zwischen 17 % und 69 % der Hoehe. Auf dem Handy reicht er am weitesten * hinauf, weil der Titel dort dreizeilig wird. * * Deckung und Kontrast an den entscheidenden Stellen: * 17 % -> 0,81 -> 9,6:1 * 40 % -> 0,78 -> 8,5:1 * 55 % -> 0,70 -> 6,4:1 * 69 % -> 0,63 -> 4,9:1 (noetig 4,5:1; fuer die h1 nur 3:1) * * Vorher fiel der Verlauf zu frueh ab: bei 69 % lag die Deckung nur bei * 0,35, das ergibt **2,2:1**. Auf dem Handy stand der Titel damit fast * unlesbar ueber dem hellen Himmel – das war die Stelle „hell auf hell“. * * Ueber 72 % laeuft der Verlauf schnell aus, damit vom Motiv etwas zu * sehen bleibt. Dort steht kein Text. */ #seitenkopf::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( to top, rgba(30, 26, 22, 0.84) 0%, rgba(30, 26, 22, 0.78) 40%, rgba(30, 26, 22, 0.62) 70%, rgba(30, 26, 22, 0.26) 84%, rgba(30, 26, 22, 0.05) 100% ); } #seitenkopf > * { position: relative; z-index: 1; } #seitenkopf .elementor-heading-title { color: #ffffff !important; text-wrap: balance; } #seitenkopf h1.elementor-heading-title { font-size: clamp(2rem, 1.2rem + 3vw, 3.4rem); line-height: 1.12; } #seitenkopf .aw-lead .elementor-heading-title { color: rgba(255, 255, 255, 0.94) !important; } /* Der Knopf im Hero: heller Rahmen, damit er sich vom Foto abhebt. */ #seitenkopf .elementor-button { border-color: #ffffff !important; } @media (max-width: 767px) { #seitenkopf { /* * Hoehe: der Kopf muss so hoch sein, dass Titel, Leitsatz und * Knoepfe hineinpassen UND unter dem fixierten Header anfangen. * Deshalb keine feste Hoehe, sondern eine Untergrenze, die den * Header schon einrechnet – wird der Titel dreizeilig, waechst * der Kopf mit, statt den Text nach oben zu druecken. */ min-height: calc(var(--aw-header-hoehe) + 300px); padding-top: calc(var(--aw-header-hoehe) + 32px) !important; /* * Die Silhouette darunter ragt 61 px in den Seitenkopf hinein. * Der Inhalt braucht also mindestens so viel Abstand nach unten – * sonst steht der Knopf auf dem Kirchturm. 61 + 24 Luft. */ padding-bottom: 85px !important; /* * KEIN 100vw hier. * * 100vw rechnet die Scrollleiste mit: bei 390 px Fensterbreite sind * das 390 px, waehrend der Inhalt nur 375 px breit ist. Der Kopf war * dadurch 15 px zu breit und um 7 px nach links verschoben – die * Seite liess sich seitlich schieben. Randlos wird er jetzt dadurch, * dass der Innenabstand des Themes weiter unten aufgehoben wird. */ } } /* Ankersprünge landen nicht unter dem Header. */ html { scroll-padding-top: calc(var(--aw-header-hoehe) + 16px); } /* -------------------------------------------------------------------------- 6b. Leitsatz unter der Seitenueberschrift Kein -Element, weil es keine Gliederungsebene ist – aber optisch deutlicher als Fliesstext. Zum Anpassen genuegt diese eine Regel. -------------------------------------------------------------------------- */ .aw-lead .elementor-heading-title, p.aw-lead { font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem); line-height: 1.5; color: var(--aw-secondary); letter-spacing: 0.01em; margin-bottom: 0.6em; } /* -------------------------------------------------------------------------- 6a. Knöpfe – eine Form für die ganze Website Vorgefunden waren drei verschiedene Knöpfe: die von Elementor (54 px hoch, 5 px doppelter Rand), die auf den Terminseiten (48 px, 2 px Rand) und der Absendeknopf im Formular (48 px, gar kein Rand). Nebeneinander sah das zufällig aus. Jetzt eine Form: 52 px hoch, 2 px Rand, gleicher Radius, gleiche Schrift. Der Rand ist immer da – auch wenn er die Farbe der Füllung hat. So bleiben die Maße gleich, egal auf welchem Untergrund der Knopf steht. -------------------------------------------------------------------------- */ :root { --aw-knopf-hoehe: 52px; --aw-knopf-rand: 2px; --aw-knopf-innen: 1.6em; } .elementor-button, .aw-termin-knopf, .forminator-ui .forminator-button-submit, .forminator-ui .forminator-button { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-height: var(--aw-knopf-hoehe); height: var(--aw-knopf-hoehe); padding: 0 var(--aw-knopf-innen); border-width: var(--aw-knopf-rand); border-style: solid; border-radius: var(--aw-radius); font-family: inherit; font-size: var(--aw-schrift-klein); font-weight: 700; line-height: 1; letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease; } /* Elementor packt den Text in eine eigene Hülle – die darf nichts zusätzlich verschieben. */ .elementor-button .elementor-button-content-wrapper, .elementor-button .elementor-button-text { display: inline-flex; align-items: center; line-height: 1; } /* * Auf dem Foto im Seitenkopf. * * Dort steht der Knopf auf einem Bild, dessen Helligkeit sich nicht * vorhersagen lässt. Ein heller Rand trennt ihn sauber vom Motiv – das ist * dieselbe Aufgabe, die vorher der doppelte Rand zufällig erfüllt hat, * nur als eine bewusst gesetzte Linie. */ #seitenkopf .elementor-button { border-color: #ffffff !important; box-shadow: 0 2px 14px rgba(30, 26, 22, 0.35); } #seitenkopf .elementor-button:hover, #seitenkopf .elementor-button:focus-visible { border-color: #ffffff !important; } /* Der Absendeknopf im Formular hat von Forminator gar keinen Rand bekommen – hier bekommt er denselben wie alle anderen. */ .forminator-ui .forminator-button-submit { border: var(--aw-knopf-rand) solid var(--aw-primary-kontrast) !important; padding: 0 var(--aw-knopf-innen) !important; height: var(--aw-knopf-hoehe) !important; min-height: var(--aw-knopf-hoehe) !important; font-weight: 700 !important; letter-spacing: 0.05em !important; } /* -------------------------------------------------------------------------- 6b. Einleitung unter dem Seitenkopf Der erste Absatz einer Seite soll wie ein Vorwort wirken, nicht wie der erste von vielen: groesser, kursiv, in der dunklen Textfarbe und mit ruhigem Zeilenfall. Ein feiner Strich darueber trennt ihn vom Bild, ohne dass es nach Kasten aussieht. Zentriert bleibt er absichtlich nicht ueber die volle Breite: 820 px Satzbreite, weil kursive Schrift in langen Zeilen schwerer zu lesen ist. -------------------------------------------------------------------------- */ #aw-intro { text-align: center; } /* Das !important ist noetig, weil die allgemeine Schriftgroessen-Regel weiter unten (Abschnitt 14) ebenfalls mit !important arbeitet – sonst bliebe die Einleitung auf Fliesstextgroesse stehen. */ #aw-intro .elementor-widget-text-editor, #aw-intro .elementor-widget-text-editor p, #aw-intro p { font-size: clamp(1.25rem, 0.95rem + 1vw, 1.65rem) !important; line-height: 1.5 !important; font-style: italic; color: var(--aw-text) !important; letter-spacing: 0.005em; margin: 0; text-wrap: balance; } #aw-intro p + p { margin-top: 0.7em; } /* Kleines Zierzeichen als Auftakt – dieselbe Rolle wie eine Initiale, nur zurueckhaltender. */ #aw-intro .elementor-widget-text-editor::before { content: ""; display: block; width: 56px; height: 2px; margin: 0 auto 1.6rem; background: var(--aw-primary); } /* Links in der Einleitung bleiben aufrecht – kursiv unterstrichen liest sich schlecht. */ #aw-intro a { font-style: normal; font-weight: 700; } @media (max-width: 767px) { #aw-intro .elementor-widget-text-editor::before { margin-bottom: 1.1rem; } } /* -------------------------------------------------------------------------- 7. Oeffnungszeiten- und Kapazitaetstabellen Werden als echte gebaut, damit Screenreader die Zuordnung vorlesen. Auf breiten Schirmen eine ruhige Tabelle ohne Gitternetz: nur feine Linien zwischen den Zeilen, die Kopfzeile als Grossbuchstaben-Zeile. Auf schmalen Schirmen wird jede Zeile zu einer Karte – Tabellen mit drei Spalten sind auf einem Telefon sonst nicht mehr zu lesen. Damit dabei nichts an Bedeutung verloren geht, traegt jede Zelle ihre Spaltenbezeichnung als data-spalte mit sich. -------------------------------------------------------------------------- */ .aw-tabelle { width: 100%; border-collapse: collapse; margin: 0 0 1.25rem; } /* Das Theme bringt ein vollstaendiges Gitternetz und graue Kopfzeilen mit. Beides wird zurueckgesetzt – die Tabelle soll aus Linien bestehen, nicht aus Kaesten. */ .aw-tabelle, .aw-tabelle thead, .aw-tabelle tbody, .aw-tabelle tr, .aw-tabelle th, .aw-tabelle td { border: 0; background: transparent; background-image: none; box-shadow: none; color: inherit; vertical-align: baseline; } .aw-tabelle caption { text-align: left; font-weight: 700; font-size: var(--aw-schrift-klein); text-transform: uppercase; letter-spacing: 0.08em; color: var(--aw-secondary); padding-bottom: 0.9em; } .aw-tabelle thead th { font-size: var(--aw-schrift-klein); text-transform: uppercase; letter-spacing: 0.06em; color: var(--aw-secondary); font-weight: 700; padding-bottom: 0.75em; border-bottom: 2px solid var(--aw-sand); } .aw-tabelle th, .aw-tabelle td { text-align: left; padding: 0.95em 1.25em 0.95em 0; border-bottom: 1px solid var(--aw-sand); vertical-align: baseline; /* Das Theme faerbt Tabellenzellen grau (#626262). In der Tabelle soll dieselbe Textfarbe stehen wie daneben im Fliesstext. */ color: var(--aw-text); } /* Die erste Spalte benennt die Zeile – sie darf sich abheben. Das Theme setzt th auf normale Staerke, deshalb hier ausdruecklich. */ .aw-tabelle tbody th, .aw-tabelle tbody th[scope="row"] { font-weight: 700 !important; color: var(--aw-text); } .aw-tabelle tbody tr:last-child th, .aw-tabelle tbody tr:last-child td { border-bottom: 0; } /* Ein zurueckhaltender Wechsel hilft beim Zeilehalten, ohne dass es nach Tabellenkalkulation aussieht. Nur dort, wo es noch Zeilen gibt – in der Kartenansicht weiter unten waere er sinnlos. */ @media (min-width: 641px) { .aw-tabelle tbody tr:nth-child(even) { background: color-mix(in srgb, var(--aw-elfenbein) 55%, transparent); } } .aw-tabelle td.aw-zeit, .aw-tabelle td[data-spalte="Uhrzeit"] { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 700; } .aw-tabelle td:last-child, .aw-tabelle th:last-child { padding-right: 0; } /* --- Auf schmalen Schirmen: aus jeder Zeile wird eine Karte ----------- */ @media (max-width: 640px) { .aw-tabelle, .aw-tabelle tbody, .aw-tabelle tr, .aw-tabelle th, .aw-tabelle td { display: block; width: auto; } /* Die Kopfzeile wird nicht mehr gebraucht – ihre Inhalte stehen ab jetzt vor jedem Wert. Sichtbar entfernt, fuer Screenreader bleibt die Zuordnung ueber scope/headers erhalten. */ .aw-tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .aw-tabelle tbody tr { background: #ffffff; border: 1px solid var(--aw-sand); border-radius: var(--aw-radius); padding: 1rem 1.15rem; margin-bottom: 0.85rem; } .aw-tabelle tbody th[scope="row"] { font-size: 1.08em; padding: 0 0 0.5em; border-bottom: 1px solid var(--aw-sand); margin-bottom: 0.6em; } .aw-tabelle tbody td { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5em 1.5em; padding: 0.3em 0; border-bottom: 0; } /* Die Spaltenbezeichnung steht jetzt vor dem Wert. */ .aw-tabelle tbody td[data-spalte]::before { content: attr(data-spalte); color: var(--aw-secondary); font-size: var(--aw-schrift-klein); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; } .aw-tabelle tbody tr:last-child { margin-bottom: 0; } } /* Uhrzeiten im Footer. Waren vorher als

ausgezeichnet – das ergibt keine sinnvolle Gliederung. Jetzt Absaetze; diese Regel haelt das Aussehen gleich. */ .aw-zeit-footer { font-weight: 700; font-variant-numeric: tabular-nums; margin: 0; } /* -------------------------------------------------------------------------- 8. Terminliste (Veranstaltungen) -------------------------------------------------------------------------- */ .aw-termine { list-style: none; margin: 0; padding: 0; } .aw-termine li { display: grid; grid-template-columns: minmax(9rem, auto) 1fr; gap: 0.4em 1.6em; padding: 0.9em 0; border-bottom: 1px solid var(--aw-sand); } .aw-termine li:last-child { border-bottom: 0; } .aw-termine .aw-datum { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; } .aw-termine .aw-hinweis { grid-column: 2; color: var(--aw-secondary); font-size: 0.9em; } @media (max-width: 600px) { .aw-termine li { grid-template-columns: 1fr; gap: 0.2em; } .aw-termine .aw-hinweis { grid-column: 1; } } /* -------------------------------------------------------------------------- 9. Hinweis-Box (z. B. „Termine werden noch bekanntgegeben“) -------------------------------------------------------------------------- */ .aw-hinweisbox { border-left: 4px solid var(--aw-primary-kontrast); background: var(--aw-elfenbein); padding: 1em 1.25em; border-radius: 0 var(--aw-radius) var(--aw-radius) 0; } /* -------------------------------------------------------------------------- 10. Lieferanten / regionale Partner Logoflaechen bleiben vorbereitet, bis die Freigaben da sind. -------------------------------------------------------------------------- */ .aw-partner { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.5rem; } .aw-partner li { border-top: 2px solid var(--aw-sand); padding-top: 1rem; } .aw-partner .aw-partner-produkt { display: block; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8em; color: var(--aw-secondary); margin-bottom: 0.35em; } .aw-partner .aw-partner-name { display: block; font-weight: 700; font-size: 1.15em; } .aw-partner .aw-partner-ort { display: block; color: var(--aw-secondary); } /* -------------------------------------------------------------------------- 11. Formulare (Forminator) Pflichtfeld-Sternchen bekommt eine Textalternative, Fehler sind nicht allein durch Farbe gekennzeichnet. -------------------------------------------------------------------------- */ .forminator-ui .forminator-required-mark { color: var(--aw-primary-kontrast); } .forminator-ui .forminator-error-message { color: #8a2b2b; font-weight: 700; } .forminator-ui .forminator-error-message::before { content: "Fehler: "; } .forminator-ui input:focus-visible, .forminator-ui textarea:focus-visible, .forminator-ui select:focus-visible { outline: var(--aw-fokus-breite) solid var(--aw-primary-kontrast); outline-offset: var(--aw-fokus-abstand); } /* -------------------------------------------------------------------------- 12. Bilder Verhindert Layoutspruenge und horizontales Scrollen. -------------------------------------------------------------------------- */ .elementor-widget-image img { max-width: 100%; height: auto; } /* -------------------------------------------------------------------------- 13. Karte mit Zustimmung Die Google-Karte laedt erst auf Klick. Vorher gehen keine Daten an Google. -------------------------------------------------------------------------- */ .aw-karte { background: var(--aw-elfenbein); border: 1px solid var(--aw-sand); border-radius: var(--aw-radius); padding: 1.5em 1.25em; text-align: center; min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.9em; } .aw-karte-text { margin: 0; font-size: 0.9rem; color: var(--aw-text); max-width: 46ch; } .aw-karte-knopf { min-height: 44px; padding: 0.65em 1.5em; border: 0; border-radius: var(--aw-radius); background: var(--aw-primary-kontrast); color: #ffffff; font: inherit; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; } .aw-karte-knopf:hover { background: var(--aw-text); } .aw-karte iframe { border-radius: var(--aw-radius); } /* -------------------------------------------------------------------------- 14. Schriftgroessen Gemessen lag der Fliesstext bei 13,12 px – deutlich unter dem, was sich angenehm liest. Untergrenze ist jetzt 17 px; alles andere zieht mit. Die Groessen stehen in rem, damit sie der Systemeinstellung des Gastes folgen. Wer im Browser groesser stellt, bekommt groesser. -------------------------------------------------------------------------- */ :root { --aw-schrift: 1.0625rem; /* 17 px */ --aw-schrift-klein: 0.9375rem; /* 15 px */ --aw-zeilenhoehe: 1.65; } /* * Fliesstextfarbe. * * Das Theme faerbt Fliesstext #626262. Auf Weiss reicht das (5,7:1), auf der * sandfarbenen Flaeche #D8CCBE aber nur noch fuer **3,86:1** – gemessen auf * fuenf Seiten. Gefordert sind 4,5:1. * * Mit der Textfarbe des Hauses (#3C332D) sind es auf Sand 7,8:1, auf * Elfenbein und Weiss 10,9:1. Ausgenommen sind Abschnitte auf dunkler * Flaeche – die setzen ihre Schriftfarbe selbst. */ body, .elementor-widget-text-editor, .elementor-widget-theme-post-content, .elementor-widget-shortcode { color: var(--aw-text); } /* * WICHTIG: die Farbe NICHT auf p/li setzen. * * Abschnitte auf dunkler Flaeche (z. B. „Gut schlafen“) faerben ihren Text * ueber die Widget-Einstellung hell. Diese Farbe wirkt durch Vererbung auf * die Absaetze darin. Eine eigene Regel auf `p` waere naeher am Element und * wuerde die Vererbung ueberschreiben – der Text stand dann dunkel auf * dunkel (gemessen 1,61:1). Auf Widget-Ebene bleibt Elementor vorn. */ /* Das Theme setzt eigene Groessen mit hoeherer Spezifitaet – deshalb hier ausdruecklich. Ohne !important bleibt der Fliesstext bei 15 px stehen. */ body, .elementor-widget-text-editor, .elementor-widget-text-editor p, .elementor-widget-text-editor li, .elementor-widget-theme-post-content p, .elementor-widget-shortcode p, .aw-tabelle th, .aw-tabelle td, .aw-kontakt-liste, .aw-kontakt-liste li, .aw-termine { font-size: var(--aw-schrift) !important; line-height: var(--aw-zeilenhoehe) !important; } /* Elemente mit eigener Groesse: muessen die Gruppenregel oben ueberbieten, deshalb ebenfalls ausdruecklich. */ .aw-lead .elementor-heading-title { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.55rem) !important; line-height: 1.45 !important; } #header-container #aw-infoleiste p { font-size: var(--aw-schrift-klein) !important; line-height: 1.4 !important; } .elementor-button { font-size: var(--aw-schrift-klein) !important; line-height: 1.3 !important; } /* Listen brauchen etwas Luft zwischen den Punkten. */ .elementor-widget-text-editor li + li { margin-top: 0.35em; } /* Die Groesse steht in den Widget-Einstellungen (16 px). Hier bleibt nur der Hinweis: nicht kleiner setzen – Grossbuchstaben mit Sperrung sind darunter schlecht zu lesen. */ /* Hinweiszeilen bleiben relativ zum Fliesstext. */ .aw-termine .aw-hinweis, .aw-partner .aw-partner-produkt { font-size: 0.9em; } h3.elementor-heading-title { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem); line-height: 1.25; } /* -------------------------------------------------------------------------- 15. Bildnachweis und Bildabstaende Der Nachweis steht in der Bildunterschrift und erscheint damit in der Lightbox – klein und unten, nicht auf dem Foto selbst. -------------------------------------------------------------------------- */ .elementor-lightbox .elementor-slideshow__description, .elementor-lightbox figcaption { font-size: 0.85rem; opacity: 0.75; } /* Abstaende zwischen den Fotos einer Galerie – vorher klebten sie aneinander. */ .elementor-widget-image-gallery .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 0 !important; } .elementor-widget-image-gallery .gallery-item { width: 100% !important; margin: 0 !important; float: none !important; } .elementor-widget-image-gallery .gallery-icon { margin: 0 !important; } @media (max-width: 900px) { .elementor-widget-image-gallery .gallery { grid-template-columns: repeat(2, 1fr); gap: 14px; } } @media (max-width: 560px) { .elementor-widget-image-gallery .gallery { grid-template-columns: 1fr; } } /* Luft um einzelne Bilder in Text-Bild-Bloecken. */ .aw-blockbild, .aw-kachelbild { margin-block: 0.5rem; } /* -------------------------------------------------------------------------- 16. Header schrumpft beim Scrollen Sobald gescrollt wird, verschwindet die Info-Leiste und die Hauptleiste wird flacher. Das gibt dem Inhalt Platz, ohne dass Menue und Knopf verloren gehen. Die Klasse setzt ein kurzes Skript in mu-plugins/almerwirt-performance.php. -------------------------------------------------------------------------- */ #header-container { transition: box-shadow 0.2s ease; } /* Muss die Flex-Regel weiter oben ueberbieten – daher dieselben Klassen. */ #header-container.aw-geschrumpft #aw-infoleiste.e-con.e-flex { display: none !important; } #header-container.aw-geschrumpft #aw-hauptleiste.e-con.e-flex { padding-block: 6px !important; box-shadow: 0 6px 18px rgba(30, 26, 22, 0.1); } #header-container.aw-geschrumpft .aw-logo img { max-width: 108px; transition: max-width 0.2s ease; } @media (prefers-reduced-motion: reduce) { #header-container, #header-container.aw-geschrumpft .aw-logo img { transition: none; } } /* -------------------------------------------------------------------------- 17. Bildnachweis nur beim Vergroessern Die Bildunterschrift stand unter jedem Bild in der Uebersicht. Das stoert dort nicht nur – sie schiebt auch die Titel darunter auf unterschiedliche Hoehen, je nachdem wie lang sie umbricht. In der Lightbox bleibt sie. -------------------------------------------------------------------------- */ .elementor-widget-image-gallery figcaption, .elementor-widget-image-gallery .gallery-caption, .elementor-widget-image figcaption { display: none !important; } .elementor-lightbox figcaption, .elementor-lightbox .elementor-slideshow__description, .elementor-lightbox .elementor-slideshow__title { display: block !important; } /* -------------------------------------------------------------------------- 18. Impressionen: gross und ueber die ganze Seite Die Bilder standen klein und weit auseinander. WordPress begrenzt die Galerie-Elemente per max-width – das muss ausdruecklich aufgehoben werden, sonst bleiben die Bilder in ihrer Ursprungsgroesse stehen. -------------------------------------------------------------------------- */ .elementor-widget-image-gallery .gallery { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 18px !important; width: 100% !important; max-width: none !important; margin: 0 !important; } .elementor-widget-image-gallery .gallery-item { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; float: none !important; } .elementor-widget-image-gallery .gallery-icon, .elementor-widget-image-gallery .gallery-icon a { display: block !important; width: 100% !important; margin: 0 !important; } .elementor-widget-image-gallery .gallery-item img { width: 100% !important; height: auto !important; max-width: none !important; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--aw-radius); } @media (max-width: 900px) { .elementor-widget-image-gallery .gallery { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; } } @media (max-width: 560px) { .elementor-widget-image-gallery .gallery { grid-template-columns: 1fr !important; } } /* -------------------------------------------------------------------------- 19. Kacheln buendig Bilder gleiches Seitenverhaeltnis, Titel beginnen dadurch auf einer Linie. -------------------------------------------------------------------------- */ .aw-kachelbild img, .aw-kachelbild .elementor-image, .aw-kachelbild figure { margin: 0 !important; } .aw-kachelbild { margin-bottom: 0.9rem !important; } /* -------------------------------------------------------------------------- 20. Bild-Text-Bloecke mit Tiefe Das Bild greift leicht ueber seine Spalte hinaus und liegt mit einem weichen Schatten vor der Flaeche. Das gibt den Bloecken Spannung, ohne zusaetzliches Markup – und laesst sich mit dieser einen Regel wieder zuruecknehmen. -------------------------------------------------------------------------- */ @media (min-width: 1025px) { .aw-blockbild img { box-shadow: 0 18px 44px rgba(30, 26, 22, 0.18); transform: translateY(-14px); } /* Wechselseitiger Versatz: mal nach links, mal nach rechts ueberlappend. */ .e-con > .e-con:first-child .aw-blockbild img { margin-right: -28px; } .e-con > .e-con:last-child .aw-blockbild img { margin-left: -28px; } } /* Auf schmalen Schirmen bleibt alles buendig – dort stoert jeder Versatz. */ @media (max-width: 1024px) { .aw-blockbild img { transform: none; margin-inline: 0; } } /* -------------------------------------------------------------------------- 21. Terminseiten Der Kalender bringt eine eigene Gestaltung mit (blaue Links, fremde Schrift, eigene Knopfformen). Hier wird sie auf das Haus umgestellt: dieselbe Schrift, dieselben Knoepfe, dieselben Abstaende wie ueberall. -------------------------------------------------------------------------- */ /* Ruhige Flaeche, lesbare Breite. */ .single-tribe_events .tribe-events-single { max-width: 860px; margin-inline: auto; padding-top: calc(var(--aw-header-hoehe) + 40px); padding-bottom: 20px; } /* Ueberschrift wie auf allen anderen Seiten. */ .single-tribe_events .tribe-events-single-event-title { font-family: inherit; color: var(--aw-text); margin-bottom: 0.4em; } /* Der Kalender bringt eine eigene Schrift mit (Helvetica). Auf der ganzen Terminseite gilt dieselbe Schrift wie auf allen anderen Seiten. */ .single-tribe_events .tribe-events-single, .single-tribe_events .tribe-events-single a, .single-tribe_events .tribe-events-content, .single-tribe_events .tribe-events-content p, .single-tribe_events .tribe-events-back a { font-family: inherit; } /* Rueckweg oben: leise, aber gut zu treffen. */ .single-tribe_events .tribe-events-back { margin-bottom: 1.5rem; font-size: var(--aw-schrift-klein); } .single-tribe_events .tribe-events-back a { color: var(--aw-secondary) !important; font-weight: 400; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; } .single-tribe_events .tribe-events-back a:hover, .single-tribe_events .tribe-events-back a:focus-visible { color: var(--aw-primary-kontrast) !important; text-decoration: underline; text-underline-offset: 0.18em; } /* Wann und wo – die wichtigste Zeile der Seite. Der Kalender legt diesen Kasten als Flex-Reihe mit „nowrap“ an. Datum und Ort landen dadurch nebeneinander in einer Zeile, ohne Abstand dazwischen. Wir stellen den Kasten auf normalen Textfluss zurueck – dann steht der Ort unter dem Datum, so wie er gelesen werden soll. */ .single-tribe_events .tribe-events-schedule { display: block; margin: 0 0 2rem; padding: 0; background: none; border: 0; } .single-tribe_events .tribe-events-schedule .aw-termin-wann, .single-tribe_events .tribe-events-schedule .aw-termin-wo { display: block; font-family: inherit; } .single-tribe_events .tribe-events-schedule .aw-termin-wann { font-size: 1.15em; font-weight: 700; color: var(--aw-primary-kontrast); } .single-tribe_events .tribe-events-schedule .aw-termin-wo { margin-top: 0.25em; color: var(--aw-secondary); font-size: var(--aw-schrift-klein); font-weight: 400; } .single-tribe_events .tribe-events-event-image img { border-radius: var(--aw-radius); width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; } .single-tribe_events .tribe-events-single-event-description { margin-top: 1.75rem; } /* Vor- und Zurueck steht zweimal auf der Seite – oben und unten. Oben, direkt unter dem Datum, unterbricht es den Lesefluss. Es bleibt dort, wo es hingehoert: am Ende. */ .single-tribe_events #tribe-events-header { display: none; } /* --- Knopfreihe unter dem Termin --------------------------------------- Reservieren, Anrufen, Kalender und der Rueckweg stehen in einer Reihe. Alle Knoepfe haben dieselbe Hoehe und dieselbe Form – auch der vom Kalender mitgelieferte Abo-Knopf. */ .aw-termin-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--aw-sand); } /* Form, Hoehe und Schrift kommen aus Abschnitt 6a – hier nur die Farben. */ .aw-termin-knopf { background: var(--aw-primary-kontrast); color: #ffffff !important; border-color: var(--aw-primary-kontrast); text-decoration: none !important; } .aw-termin-knopf:hover { background: var(--aw-text); border-color: var(--aw-text); } .aw-termin-zurueck { color: var(--aw-primary-kontrast) !important; text-decoration: underline; text-underline-offset: 0.18em; box-sizing: border-box; height: var(--aw-knopf-hoehe); display: inline-flex; align-items: center; margin-left: auto; } .aw-termin-zurueck span { margin-right: 0.4em; } /* --- Abo-Knopf des Kalenders angleichen ------------------------------- Er kommt als blau umrandeter Knopf in fremder Schrift. Umgestellt auf dieselbe Form wie „Anrufen“ – sonst stehen drei Knoepfe nebeneinander, von denen jeder anders aussieht. */ /* Der Kalender faerbt seine Knoepfe ueber eigene Variablen (Blau #334aff). Wir setzen die Variablen um, statt jede einzelne Regel zu ueberschreiben – damit stimmen auch Hover, Fokus und aktiver Zustand von selbst. */ .single-tribe_events, .aw-termin-kalender { --tec-color-accent-primary: var(--aw-primary-kontrast); --tec-color-accent-primary-hover: var(--aw-text); --tec-color-accent-primary-active: var(--aw-text); --tec-color-accent-primary-background: var(--aw-elfenbein); --tec-color-link-accent: var(--aw-primary-kontrast); --tec-color-link-accent-hover: var(--aw-text); --tec-color-button-primary: var(--aw-primary-kontrast); --tec-color-button-primary-hover: var(--aw-text); --tec-color-button-primary-active: var(--aw-text); --tec-color-text-primary: var(--aw-text); --tec-color-text-secondary: var(--aw-secondary); --tec-color-border-default: var(--aw-sand); --tec-color-border-secondary: var(--aw-sand); --tec-color-border-active: var(--aw-primary-kontrast); --tec-color-icon-primary: var(--aw-primary-kontrast); --tec-color-icon-active: var(--aw-primary-kontrast); --tec-border-radius-default: var(--aw-radius); --tec-font-family-sans-serif: inherit; } .aw-termin-kalender { display: inline-flex; } .aw-termin-kalender .tribe-events-c-subscribe-dropdown__container, .aw-termin-kalender .tribe-events-c-subscribe-dropdown { margin: 0; padding: 0; } /* Aussenhuelle: exakt dieselbe Hoehe und Form wie „Anrufen“. Achtung: derselbe
traegt BEIDE Klassen (…c-btn-border und …subscribe-dropdown__button). Eine zweite Regel fuer den „Knopf darin“ wuerde deshalb die Hoehe hier wieder aufheben – das war der Grund, warum der Knopf zusammengefallen ist. Alles steht in einer Regel. */ .aw-termin-kalender .tribe-common-c-btn-border, .aw-termin-kalender .tribe-events-c-subscribe-dropdown__button { display: inline-flex !important; align-items: center; justify-content: center; gap: 0.5em; box-sizing: border-box !important; height: var(--aw-knopf-hoehe) !important; min-height: var(--aw-knopf-hoehe) !important; width: auto !important; padding: 0 var(--aw-knopf-innen) !important; background: var(--aw-primary-kontrast) !important; border: var(--aw-knopf-rand) solid var(--aw-primary-kontrast) !important; border-radius: var(--aw-radius) !important; color: #ffffff; font-size: var(--aw-schrift-klein) !important; transition: background-color 0.15s ease, color 0.15s ease; } .aw-termin-kalender .tribe-events-c-subscribe-dropdown__button-text { font-family: inherit; font-size: var(--aw-schrift-klein); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #ffffff !important; background: none !important; border: 0; padding: 0; min-height: 0; line-height: 1; } .aw-termin-kalender .tribe-common-c-svgicon { color: #ffffff; fill: #ffffff; } /* Hover und Tastaturfokus wie bei „Anrufen“: gefuellt statt umrandet. */ .aw-termin-kalender .tribe-common-c-btn-border:hover, .aw-termin-kalender .tribe-common-c-btn-border:focus-within, .aw-termin-kalender .tribe-events-c-subscribe-dropdown--open .tribe-common-c-btn-border { background: var(--aw-text) !important; border-color: var(--aw-text) !important; } .aw-termin-kalender .tribe-common-c-btn-border:hover .tribe-events-c-subscribe-dropdown__button-text, .aw-termin-kalender .tribe-common-c-btn-border:hover .tribe-common-c-svgicon, .aw-termin-kalender .tribe-common-c-btn-border:focus-within .tribe-events-c-subscribe-dropdown__button-text, .aw-termin-kalender .tribe-common-c-btn-border:focus-within .tribe-common-c-svgicon, .aw-termin-kalender .tribe-events-c-subscribe-dropdown--open .tribe-events-c-subscribe-dropdown__button-text, .aw-termin-kalender .tribe-events-c-subscribe-dropdown--open .tribe-common-c-svgicon { color: #ffffff !important; fill: #ffffff !important; } /* Die aufklappende Liste in derselben Schrift. */ .aw-termin-kalender .tribe-events-c-subscribe-dropdown__list { border: 1px solid var(--aw-sand); border-radius: var(--aw-radius); background: #ffffff; } .aw-termin-kalender .tribe-events-c-subscribe-dropdown__list-item-link { font-family: inherit; font-size: var(--aw-schrift-klein); color: var(--aw-text); min-height: 44px; display: flex; align-items: center; } .aw-termin-kalender .tribe-events-c-subscribe-dropdown__list-item-link:hover, .aw-termin-kalender .tribe-events-c-subscribe-dropdown__list-item-link:focus-visible { background: var(--aw-elfenbein); color: var(--aw-primary-kontrast); } /* --- Vor und zurueck am Seitenende ------------------------------------ */ .single-tribe_events #tribe-events-footer { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--aw-sand); } .single-tribe_events .tribe-events-sub-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; list-style: none; margin: 0; padding: 0; } .single-tribe_events .tribe-events-sub-nav a { color: var(--aw-secondary) !important; text-decoration: none; font-size: var(--aw-schrift-klein); display: inline-flex; align-items: center; min-height: 44px; } .single-tribe_events .tribe-events-sub-nav a:hover, .single-tribe_events .tribe-events-sub-nav a:focus-visible { color: var(--aw-primary-kontrast) !important; text-decoration: underline; text-underline-offset: 0.18em; } /* Auf schmalen Schirmen untereinander – nebeneinander wird es zu eng. */ /* Auf schmalen Schirmen ordnet Abschnitt 23 die Knopfreihe – mittig und umbrechend statt über die volle Breite gestreckt. */ /* -------------------------------------------------------------------------- 22. Formularfelder einheitlich Die Auswahlfelder kamen im Grau des Browsers, die Textfelder in Weiss. Jetzt alle gleich: weisse Flaeche, gleicher Rahmen, gleiche Schrift. Mindestens 17 px – dieselbe Groesse wie der Fliesstext. -------------------------------------------------------------------------- */ .forminator-ui input[type="text"], .forminator-ui input[type="email"], .forminator-ui input[type="tel"], .forminator-ui input[type="number"], .forminator-ui input[type="date"], .forminator-ui textarea, .forminator-ui select, .forminator-ui .forminator-input, .forminator-ui .forminator-textarea, .forminator-ui .forminator-select2 .select2-selection { background-color: #ffffff !important; background-image: none !important; color: var(--aw-text) !important; border: 1px solid var(--aw-sand) !important; border-radius: var(--aw-radius) !important; font-family: inherit !important; font-size: var(--aw-schrift) !important; line-height: 1.5 !important; min-height: 52px !important; /* Ein Wert fuer alle Felder – Texteingaben und Auswahlfelder muessen denselben Innenabstand haben, sonst beginnt der Text im Auswahlfeld weiter links als im Feld darunter. */ padding: var(--aw-feld-innen) !important; box-shadow: none !important; } /* Das Nachrichtenfeld darf mehr Platz haben – dort wird tatsaechlich geschrieben, nicht nur ein Wort eingetragen. */ .forminator-ui textarea, .forminator-ui .forminator-textarea { min-height: 190px !important; resize: vertical; } /* --- Auswahlfelder ---------------------------------------------------- Achtung: Forminator blendet das echte