/*
 * Barrierefreiheit - Anpassungen nach BFSG / EN 301 549 (WCAG 2.2 AA)
 * Version 1.23.1
 *
 * Eingebunden ueber das MU-Plugin imh-a11y.php.
 * Aenderungsdokumentation: siehe Projektunterlagen, Abschnitt "a11y.css 1.0.0".
 *
 * Farbwerte des Corporate Designs und ihre Kontrastwerte:
 *   #00491e  Dunkelgruen  - auf Creme 9,79:1, auf Weiss 10,65:1
 *   #f0e6b1  Hellgelb     - auf Dunkelgruen 8,45:1
 *   #f5c5db  Rosa         - als Textfarbe auf hellem Grund 1,39:1 (untauglich),
 *                           als Flaeche mit dunkelgruener Schrift 7,05:1
 *   #f9f5ec  Creme        - Seitenhintergrund
 *   #a4123f  Fehlerrot    - abgedunkeltes Rosa fuer Formularfehler,
 *                           auf Weiss 7,67:1, auf Creme 7,05:1 (siehe B-11)
 *
 * Theme-Konvention: .style-light = heller Hintergrund, .style-dark = dunkler.
 */


/* B-01 Fliesstextlinks, heller Hintergrund.
   Vorher #f5c5db auf #f9f5ec (1,39:1) und ohne Unterstreichung.
   Die Unterstreichung ist erforderlich, weil Dunkelgruen gegenueber dem
   schwarzen Fliesstext nur 1,97:1 erreicht.
   Zur Selektorlaenge: Die Theme-Regel hat Spezifitaet (0,7,4) und setzt
   !important; die Ausnahmen .entry-small und .panel-title spiegeln deren
   Abgrenzung und heben die Spezifitaet auf (0,8,3).
   WCAG 1.4.1, 1.4.3 */
body.textual-accent-color .post-content .style-light .uncode_text_column p:not(.entry-small):not(.panel-title) > a:not(.btn):not(.custom-link),
body.textual-accent-color .post-content .style-light .uncode_text_column p:not(.entry-small):not(.panel-title) > span > a:not(.btn):not(.custom-link),
body.textual-accent-color .post-content .style-light .uncode_text_column p:not(.entry-small):not(.panel-title) > strong > a:not(.btn):not(.custom-link),
body.textual-accent-color .post-content .style-light .uncode_text_column p:not(.entry-small):not(.panel-title) > span > strong > a:not(.btn):not(.custom-link),
body.textual-accent-color .post-content .style-light .uncode_text_column li:not(.entry-small):not(.panel-title) > a:not(.btn):not(.custom-link),
body.textual-accent-color .post-content .style-light .uncode_text_column small:not(.entry-small):not(.panel-title) > a:not(.btn):not(.custom-link) {
	color: #00491e !important;
	text-decoration: underline !important;
	text-underline-offset: 0.18em;
	text-decoration-thickness: from-font;
}

/* B-01 Fliesstextlinks, dunkler Hintergrund.
   Farbe unveraendert (8,45:1), nur die Unterstreichung fehlte. */
body.textual-accent-color .post-content .style-dark .uncode_text_column p:not(.entry-small):not(.panel-title) > a:not(.btn):not(.custom-link),
body.textual-accent-color .post-content .style-dark .uncode_text_column p:not(.entry-small):not(.panel-title) > span > a:not(.btn):not(.custom-link),
body.textual-accent-color .post-content .style-dark .uncode_text_column p:not(.entry-small):not(.panel-title) > strong > a:not(.btn):not(.custom-link),
body.textual-accent-color .post-content .style-dark .uncode_text_column li:not(.entry-small):not(.panel-title) > a:not(.btn):not(.custom-link),
body.textual-accent-color .post-content .style-dark .uncode_text_column small:not(.entry-small):not(.panel-title) > a:not(.btn):not(.custom-link) {
	color: #f0e6b1 !important;
	text-decoration: underline !important;
	text-underline-offset: 0.18em;
	text-decoration-thickness: from-font;
}

/* B-01 Auffangregel fuer Fliesstextlinks ausserhalb von .uncode_text_column,
   etwa auf der 404-Seite. Nur Unterstreichung, die Farbe stimmt dort bereits. */
.style-light .uncont > p > a:not(.btn):not(.custom-link):not([class*="btn-"]),
.style-light .uncont > div > p > a:not(.btn):not(.custom-link):not([class*="btn-"]) {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* B-01 Einwilligungslink im Bewerbungsformular, vorher 1,51:1. */
body.textual-accent-color .post-content .awsm-job-form-inner .awsm-application-form label > a:not(.btn),
body.textual-accent-color .post-content .awsm-application-form label > a:not(.btn),
.awsm-application-form label > a {
	color: #00491e !important;
	text-decoration: underline !important;
	text-underline-offset: 0.18em;
}

/* B-02 Sprunglink. Vorher Weiss auf Rosa (1,51:1), jetzt Dunkelgruen auf
   demselben Rosa (7,05:1). Gegenregel: .btn-accent des Themes.
   WCAG 1.4.3, 2.4.1 */
a.screen-reader-shortcut,
a.screen-reader-shortcut:link,
a.screen-reader-shortcut:visited,
a.screen-reader-shortcut.btn.btn-accent {
	background-color: #f5c5db !important;
	color: #00491e !important;
	font-weight: 700;
	text-decoration: underline !important;
}

/* B-02 Sprunglink im Fokus. */
a.screen-reader-shortcut:focus,
a.screen-reader-shortcut:focus-visible,
a.screen-reader-shortcut.btn.btn-accent:focus {
	background-color: #f5c5db !important;
	color: #00491e !important;
	outline: 3px solid #00491e !important;
	outline-offset: 2px;
}

/* B-03 Sichtbarer Tastaturfokus.
   :focus-visible statt :focus, damit der Ring nur bei Tastaturbedienung erscheint.

   Zweifarbiger Ring statt Farbumschaltung nach Abschnittsklasse: Ein dunkelgruener
   Kern mit hellgelbem Aussenrand ist auf jedem Untergrund erkennbar. Die Umschaltung
   ueber .style-dark war unzuverlaessig, weil dunkle Abschnitte weisse Karten
   enthalten koennen - dort stand Hellgelb auf Weiss.

   Das Theme setzt im Modus uncode-accessible
   body.uncode-accessible a { outline-color: #f5c5db !important }; Rosa erreicht auf
   Creme nur 1,39:1 und damit nicht die geforderten 3:1 fuer Bedienelemente. Ein
   !important laesst sich nur mit einem eigenen !important ueberstimmen.

   WCAG 2.4.7, 1.4.11 */
:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible,
body.uncode-accessible a:focus-visible,
body.uncode-accessible button:focus-visible,
body.uncode-accessible input:focus-visible,
body.uncode-accessible select:focus-visible,
body.uncode-accessible textarea:focus-visible,
body.uncode-accessible [tabindex]:not([tabindex="-1"]):focus-visible {
	outline: 3px solid #00491e !important;
	outline-color: #00491e !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 6px #f0e6b1 !important;
	border-radius: 2px;
}

/* B-04 Filter-Umschalter der Stellenangebote. Vorher #00491e auf #00491e
   (1,00:1), angeglichen an die Desktopvariante (10,65:1). Mindesthoehe 44 px
   fuer die Bedienung auf Touchgeraeten.
   WCAG 1.4.3 */
.awsm-filter-wrap .awsm-filter-toggle,
.awsm-filter-wrap a.awsm-filter-toggle {
	background-color: #ffffff;
	color: #00491e;
	border: 1px solid #00491e;
	padding: 0.5em 0.9em;
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	min-height: 44px;
}

/* B-20 Der Umschalter gehoert nur in schmale Ansichten.
   Das Plugin blendet ihn ab 768 Pixeln aus
   (@media (min-width: 768px) { .awsm-filter-toggle { display: none } }, (0,1,0))
   und zeigt stattdessen die drei Auswahllisten unmittelbar. Die Anzeigeart aus
   B-04 liegt mit (0,2,0) darueber und hat ihn dadurch auf allen Breiten sichtbar
   gemacht - betroffen waren /karriere/ausbildung/, /karriere/arbeiten-bei-uns/
   und /job-openings/.

   Die Angabe aus B-04 bleibt fuer schmale Ansichten noetig, weil sie zugleich
   Ausrichtung und Mindesthoehe traegt. Sie wird hier nur ab 768 Pixeln wieder
   zurueckgenommen. Die Auswahllisten selbst sind davon nicht beruehrt. */
@media (min-width: 768px) {
	.awsm-filter-wrap .awsm-filter-toggle,
	.awsm-filter-wrap a.awsm-filter-toggle {
		display: none;
	}
}

/* B-04 Beschriftung des Umschalters. */
.awsm-filter-wrap .awsm-filter-toggle .awsm-filter-toggle-text-wrapper,
.awsm-filter-wrap .awsm-filter-toggle span {
	color: #00491e;
}

/* B-05 Zielgroessen der Karussellpunkte. Vergroessert wird die Trefferflaeche,
   die sichtbare Gestaltung bleibt unveraendert.
   WCAG 2.5.8 */
.owl-dots .owl-dot,
button.owl-dot {
	min-width: 24px;
	min-height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* B-06 Der Menuecontainer ist 192 px hoch und faehrt beim Scrollen ein.
   scroll-margin-top haelt beim Hereinscrollen den noetigen Abstand frei, damit
   fokussierte Elemente nicht darunter verschwinden.
   WCAG 2.4.11 */
:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])) {
	scroll-margin-top: 210px;
}

/* B-06 Mobil ist der Menuecontainer niedriger. */
@media (max-width: 959px) {
	:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])) {
		scroll-margin-top: 110px;
	}
}


/* B-07 Fokusring auf den Bedienelementen der Stellenfilter.
   Das Plugin setzt dort outline: none mit hoeherer Spezifitaet als die
   allgemeine Regel. Das Suchfeld von Selectric misst 1x1 Pixel und liegt
   verdeckt; der Fokus wird deshalb auf der sichtbaren Huelle dargestellt.
   WCAG 2.4.7, 1.4.11 */
.awsm-filter-wrap a.awsm-filter-toggle:focus,
.awsm-filter-wrap a.awsm-filter-toggle:focus-visible {
	outline: 3px solid #00491e !important;
	outline-color: #00491e !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 6px #f0e6b1 !important;
}

.awsm-selectric-wrapper:has(.awsm-selectric-input:focus) .awsm-selectric,
.awsm-selectric-wrapper:has(.awsm-selectric-input:focus-visible) .awsm-selectric,
.awsm-selectric-wrapper.awsm-selectric-focus .awsm-selectric {
	outline: 3px solid #00491e;
	outline-offset: 2px;
	box-shadow: 0 0 0 6px #f0e6b1;
}


/* B-08 Sichtbare Begrenzung der Formularfelder.
   Die Felder des Anfrageformulars und des Bewerbungsformulars hatten einen
   transparenten Rahmen - gar keine erkennbare Begrenzung. Gemessen 1,20:1 statt
   der geforderten 3:1 fuer Bedienelemente. Auf /kontakt/ waren dieselben Felder
   bereits korrekt (Dunkelgruen auf Creme, 10,65:1); die Regel wird damit auf alle
   Formulare uebertragen.
   Zugleich Meilenstein Z, Angleichung an den stilistischen Master.

   Die Auswahl ist auf Eingabefelder begrenzt. Der zuvor mitgefuehrte Selektor
   .wpcf7-form-control traegt Contact Form 7 auch auf Sammelelementen und auf der
   Absendeschaltflaeche; der Rahmen erschien dadurch als Kasten um die
   Zustimmungszeile (siehe B-10).
   WCAG 1.4.11 */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form textarea,
.wpcf7-form select,
.awsm-application-form input[type="text"],
.awsm-application-form input[type="email"],
.awsm-application-form input[type="tel"],
.awsm-application-form textarea {
	border: 1px solid #00491e;
}

.wpcf7-form input[type="checkbox"],
.wpcf7-form input[type="radio"],
.awsm-application-form input[type="checkbox"] {
	outline: 1px solid #00491e;
	outline-offset: 0;
	accent-color: #00491e;
}

/* Suchfeld im Seitenkopf und auf der 404-Seite */
input[type="search"],
.search-form input[type="text"] {
	border: 1px solid #00491e;
}


/* B-09 Einblendeffekt darf fokussierte Elemente nicht verbergen.
   Inhalte werden beim Scrollen mit Deckkraft 0 vorgehalten und erst eingeblendet,
   wenn sie in den Blick kommen. Der Tastaturfokus wandert aber schneller als die
   Animation: Gemessen fuenf Elemente je Seite, die im Moment des Fokussierens
   unsichtbar waren - der Fokusring liegt dann auf einer leeren Flaeche.
   :focus-within blendet den betroffenen Bereich sofort ein.
   WCAG 2.4.7, 2.4.11 */
.animate_when_almost_visible:focus-within,
[class*="animate_when"]:focus-within,
.owl-item:focus-within {
	opacity: 1 !important;
	transform: none !important;
	visibility: visible !important;
	transition: none !important;
}

/* Auch das fokussierte Element selbst, falls es den Effekt direkt traegt. */
:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
	opacity: 1 !important;
	visibility: visible !important;
}


/* B-10 Kasten um die Zustimmungszeile.
   Contact Form 7 vergibt die Klasse .wpcf7-form-control nicht nur an Eingabe-
   felder, sondern auch an das umschliessende Element der Zustimmung
   (.wpcf7-acceptance) und an die Absendeschaltflaeche. Die Rahmenregel B-08 griff
   dadurch auf Elemente, die kein Eingabefeld sind - sichtbar als duenne Linie um
   den Text "Bitte akzeptieren Sie die Bedingungen um fortzufahren.".
   Behoben durch die Einschraenkung der Selektoren in B-08; die folgende Regel
   sichert das Ergebnis gegen erneute Vergabe ab.
   Meilenstein Z */
.wpcf7-form .wpcf7-acceptance,
.wpcf7-form .wpcf7-checkbox,
.wpcf7-form .wpcf7-radio,
.wpcf7-form .wpcf7-list-item {
	border: 0;
}


/* B-11 Lesbarkeit der Fehlermeldungen in Formularen.
   Das Theme faerbt die Feldmeldungen mit der Akzentfarbe Rosa #f5c5db ein
   (style-skins.css.php, mit !important). Auf dem weissen Grund der Formular-
   abschnitte ergibt das 1,51:1 - die Meldung ist praktisch nicht lesbar.
   Alle fuenfzehn Seiten mit Formular stehen auf Weiss.

   Neu #a4123f, ein abgedunkeltes Rosa derselben Farbfamilie (Farbton 342 Grad
   gegenueber 333 Grad): 7,67:1 auf Weiss, 7,05:1 auf Creme. Die Meldung ist damit
   als Fehler erkennbar, ohne dass die Farbe allein den Fehler tragen muesste -
   der Meldungstext benennt ihn.

   Schriftgrad 13 auf 15 Pixel und Abstand 18 auf 6 Pixel: Die Meldung stand
   weiter unter ihrem Feld als der Abstand zum naechsten Feld betraegt.

   Spezifitaet (0,2,2) gegenueber der Theme-Regel (0,2,1), damit die Farbe auch
   ohne Ruecksicht auf die Ladereihenfolge greift.
   WCAG 1.4.3, 3.3.1 */
.wpcf7 form span.wpcf7-not-valid-tip,
.wpcf7 form .wpcf7-not-valid-tip {
	color: #a4123f !important;
	font-size: 15px;
	font-weight: 600;
	margin-top: 6px;
	line-height: 1.4;
}

/* B-11 Sammelmeldung unter dem Formular. */
.wpcf7 form .wpcf7-response-output {
	color: #a4123f;
	font-weight: 600;
}

.wpcf7 form.sent .wpcf7-response-output {
	color: #00491e;
}


/* B-12 Einspaltige Formularfelder auf schmalen Ansichten.
   Das Theme stellt gepaarte Felder als Tabellenzellen mit je 50 Prozent Breite
   dar, ohne Umbruchpunkt. Gemessene Feldbreite 79 Pixel bei 320, 114 Pixel bei
   390 Pixeln Bildschirmbreite: Beschriftungen brechen mitten im Wort um
   ("Vor- und Nachna-me"), die Felder sind schmaler als die Meldung darunter.
   Nachher 176 beziehungsweise 246 Pixel.
   Ab 768 Pixeln bleibt die zweispaltige Darstellung unveraendert.
   WCAG 1.4.10; Meilenstein Z */
@media (max-width: 767px) {
	form .wpcf7-inline-wrapper {
		display: block;
	}

	form .wpcf7-inline-wrapper .wpcf7-inline-field {
		display: block;
		width: 100%;
		padding-left: 0;
		padding-right: 0;
	}

	form .wpcf7-inline-wrapper .wpcf7-inline-field + .wpcf7-inline-field {
		margin-top: 18px;
	}
}


/* B-14 Zeilenabstand des Einwilligungshinweises auf schmalen Ansichten.
   Der Hinweis unter der Zustimmungszeile steht als <small> innerhalb des
   Absatzes, der auch die Zustimmung enthaelt. Als Inline-Element bildet er keine
   eigenen Zeilenboxen: Deren Hoehe bestimmt der Absatz mit 20 Pixel Schriftgrad
   und 31 Pixel Zeilenhoehe, waehrend der Hinweis selbst 12 Pixel misst. Gemessen
   bei 390 Pixeln: fuenf Zeilen auf 139 Pixel, also rund 28 Pixel je Zeile bei
   12 Pixel Schrift.

   display: block loest den Hinweis aus den Zeilenboxen des Absatzes; damit gilt
   seine eigene Zeilenhoehe. 1,55 liegt ueber dem Faktor 1,5, den Nutzerinnen und
   Nutzer nach 1.4.12 einstellen koennen - die Darstellung bleibt dort unveraendert
   umbruchfaehig.

   Ab 768 Pixeln unveraendert; dort laeuft der Hinweis ueber hoechstens zwei
   Zeilen.
   WCAG 1.4.12 */
@media (max-width: 767px) {
	.wpcf7-form p > small,
	.wpcf7-form small {
		display: block;
		line-height: 1.55;
	}
}


/* B-15 Zeilenabstand der Zustimmungszeile auf schmalen Ansichten.
   Derselbe Mechanismus wie B-14, eine Ebene tiefer. Der sichtbare Text
   (.wpcf7-list-item-label) misst 13 Pixel bei 20,15 Pixel Zeilenhoehe. Die
   Zeilenboxen bildet aber .wpcf7-list-item, und dessen Grundlinienraster stammt
   aus dem Formularabsatz: 20 Pixel Schriftgrad, 31 Pixel Zeilenhoehe. Gemessen
   bei 390 Pixeln: zwei Zeilen auf 47 Pixel, bei 320 Pixeln drei Zeilen auf
   78 Pixel.

   Statt der Anzeigeart wird hier das Grundlinienraster auf den Schriftgrad des
   Inhalts gesetzt. Die Angabe am Sammelelement allein genuegt nicht: Das innere
   <label> traegt als eigene Inline-Box weiterhin 31 Pixel und haelt die Zeilenbox
   damit hoch. Sichtbar bleibt die Schriftgroesse unveraendert, sie steht auf dem
   Textelement selbst.

   Nachher 56 statt 78 Pixel bei 320, 36 statt 47 Pixel bei 390 Pixeln.

   Ab 768 Pixeln unveraendert; dort laeuft die Zeile einzeilig.
   WCAG 1.4.12 */
@media (max-width: 767px) {
	.wpcf7-form .wpcf7-acceptance .wpcf7-list-item,
	.wpcf7-form .wpcf7-acceptance .wpcf7-list-item label,
	.wpcf7-form .wpcf7-acceptance .wpcf7-list-item-label {
		font-size: 13px;
		line-height: 1.55;
	}
}


/* B-16 Mastergestaltung aller Contact-Form-7-Formulare.
   /kontakt/ ist der stilistische Master. Seine Merkmale lagen bisher im Plugin
   "WP Add Custom CSS" und wurden nur auf dieser einen Seite ausgeliefert; das
   Anfrageformular auf dreizehn weiteren Seiten sah deshalb anders aus. Die
   Merkmale stehen jetzt hier und gelten fuer jedes Contact-Form-7-Formular,
   auch fuer kuenftige.

   Gemessene Unterschiede vorher (1440 px, /leistungen/ gegen /kontakt/):

     Feldfuellung      #f7f7f7 Grau        gegen #f9f5ec Creme
     Eckenradius Feld  2 px                gegen 20 px
     Rahmen Textfeld   1px #00491e         gleich
     Rahmen Textarea   1px transparent     gegen 1px #00491e
     Rahmen Auswahl    1px transparent     gegen 1px #00491e
     Kontrollkaestchen 2 px, Rahmen #eaeaea, Innenschatten
                                           gegen 20 px, #00491e, ohne Schatten
     Schaltflaeche     Radius 150 px, Schrift #ffffff, ohne Innenschatten
                                           gegen 50 px, #f0e6b1, Innenschatten

   Der transparente Rahmen an Textarea und Auswahllisten ist zugleich ein
   Barrierefreiheitsbefund: gemessen 1,20:1 statt der geforderten 3:1 fuer
   Bedienelemente. B-08 hatte ihn dort nicht erreicht, weil das Theme mit
   "html .input-background textarea" die hoehere Spezifitaet (0,1,2) besitzt.
   Auf /kontakt/ war das durch die Seiten-CSS verdeckt.

   Zur Selektorlaenge: Die Theme-Regel fuer die Fuellung
   ".style-light .input-background input[type=...]" traegt selbst !important und
   liegt bei (0,3,1) - der Typselektor zaehlt in der Klassenspalte. Voran-
   gestelltes body und die Klasse des Bedienelements heben die Auswahl hier auf
   (0,3,2). Die Zustandsregel B-13 steht deshalb weiter unten in dieser Datei. Anders als dort bleibt die
   Auswahl hier auf Formulare begrenzt - die Seiten-CSS trifft jedes input-
   Element der Seite, also auch das Suchfeld.

   WCAG 1.4.11; Meilenstein Z */
body .wpcf7-form input.wpcf7-form-control[type="text"],
body .wpcf7-form input.wpcf7-form-control[type="email"],
body .wpcf7-form input.wpcf7-form-control[type="tel"],
body .wpcf7-form input.wpcf7-form-control[type="number"],
body .wpcf7-form input.wpcf7-form-control[type="date"],
body .wpcf7-form input.wpcf7-form-control[type="url"],
body .wpcf7-form input.wpcf7-form-control[type="password"],
body .wpcf7-form input.wpcf7-form-control[type="search"],
body .wpcf7-form textarea.wpcf7-form-control,
body .wpcf7-form select.wpcf7-form-control {
	background-color: #f9f5ec !important;
	border: 1px solid #00491e !important;
	border-radius: 20px !important;
	box-shadow: none !important;
}

/* B-16 Kontrollkaestchen der Zustimmung. */
body .wpcf7-form input[type="checkbox"],
body .wpcf7-form input[type="radio"] {
	border: 1px solid #00491e !important;
	border-radius: 20px !important;
	box-shadow: none !important;
}

/* B-16 Absendeschaltflaeche. Werte des Masters, uebertragen auf jedes
   Contact-Form-7-Formular. Schrift #f0e6b1 auf #00491e ergibt 8,45:1.
   body hebt die Spezifitaet auf (0,3,2) und damit ueber die Seiten-CSS des
   Masters (0,3,1), deren Werte identisch sind. */
body .wpcf7 form .wpcf7-submit,
body .wpcf7 form input.wpcf7-submit {
	position: relative !important;
	color: #f0e6b1 !important;
	text-decoration: none !important;
	border-radius: 50px !important;
	box-shadow: inset 0 -0.275em 0.1px 0 #000 !important;
	transform: translateY(0) !important;
	transition: box-shadow 0.2s ease-out, transform 0.2s ease-out !important;
}


/* B-16 Der Fokusring darf durch die Grundgestaltung nicht verloren gehen.
   Der hellgelbe Aussenring des zweifarbigen Fokusindikators aus B-03 wird als
   box-shadow gezeichnet. Die Grundgestaltung setzt box-shadow zurueck - fuer die
   Fuellung der Felder und das Kontrollkaestchen notwendig, fuer den Fokus
   fatal. Gemessen nach der Umstellung: Umriss vorhanden, Aussenring weg.

   Die Zustandsregeln stehen deshalb nach der Grundgestaltung und tragen mit
   (0,3,2) dieselbe Spezifitaet; die spaetere Stelle entscheidet. Bei der
   Absendeschaltflaeche bleibt der Innenschatten des Masters erhalten und der
   Aussenring kommt hinzu - dort fehlte er schon vorher, weil die Seiten-CSS des
   Masters mit (0,3,1) ueber B-03 lag.
   WCAG 2.4.7, 1.4.11 */
body .wpcf7 form .wpcf7-form-control:focus-visible,
body .wpcf7-form input[type="checkbox"]:focus-visible,
body .wpcf7-form input[type="radio"]:focus-visible {
	outline: 3px solid #00491e !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 6px #f0e6b1 !important;
}

body .wpcf7 form .wpcf7-submit:focus-visible,
body .wpcf7 form input.wpcf7-submit:focus-visible {
	box-shadow: inset 0 -0.275em 0.1px 0 #000, 0 0 0 6px #f0e6b1 !important;
}


/* B-17 Mastergestaltung des Bewerbungsformulars (WP Job Openings).
   Das Formular war bereits teilweise angeglichen: Eine globale Regel im Plugin
   "WP Add Custom CSS" setzt Fuellung, Eckenradius, Rahmenfarbe und die Gestaltung
   der Absendeschaltflaeche. Sie weicht in mehreren Werten vom Master ab.

   Gemessene Unterschiede (1440 px, gegen /kontakt/):

     Feldfuellung      #faf5ec        gegen #f9f5ec
     Polsterung Feld   10px 14px      gegen 10px 15px
     Schriftfarbe Feld #000000        gegen #00491e
     Innenschatten     rgba(0,0,0,.024) 0 2px 1px   gegen keiner
     Kontrollkaestchen 2 px, #eaeaea, Innenschatten
                                      gegen 20 px, #00491e, ohne
     Rahmen Schaltflaeche  #eaeaea    gegen #00491e
     Breite Schaltflaeche  249 px, inline
                                      gegen volle Breite, Block
     Beschriftung      Schriftstaerke 800, Abstand 10 px
                                      gegen 600 und 9 px

   Zur Selektorlaenge: Die Regel des Plugins traegt !important bei (0,2,0).
   Vorangestelltes body hebt die Auswahl auf (0,2,1) - knapp darueber und bewusst
   nicht weiter. Die Zustandsregeln muessen darueber liegen: der Fokusring mit
   (0,3,1), die Fehlerkennzeichnung aus B-13 mit (0,3,0). Zusaetzliche
   typspezifische Selektoren haetten die Grundgestaltung auf (0,3,2) gehoben und
   beide Zustaende ueberschrieben.

   Nicht angetastet: der Rahmenkasten .awsm-job-form-inner und die Felder fuer
   den Dateiupload in ihrer Bedienung - der Dateiwaehler ist ein Bedienelement
   des Browsers.

   WCAG 1.4.11; Meilenstein Z */
body .awsm-application-form .awsm-job-form-control {
	background-color: #f9f5ec !important;
	color: #00491e !important;
	border: 1px solid #00491e !important;
	border-radius: 20px !important;
	box-shadow: none !important;
	padding: 10px 15px !important;
}

/* B-17 Kontrollkaestchen der Einwilligung. */
body .awsm-application-form input[type="checkbox"] {
	color: #00491e;
	border: 1px solid #00491e !important;
	border-radius: 20px !important;
	box-shadow: none !important;
}

/* B-17 Beschriftungen. Das !important spiegelt die Regel des Plugins
   ".awsm-job-form-group label { font-weight: 800 !important }". */
body .awsm-application-form .awsm-job-form-group > label {
	font-weight: 600 !important;
	margin-bottom: 9px;
}

/* B-17 Absendeschaltflaeche. Fuellung, Schriftfarbe, Eckenradius und
   Innenschatten setzt bereits das Plugin; ergaenzt werden Rahmenfarbe, Breite
   und die Anordnung des Masters. */
body .awsm-application-form input.awsm-application-submit-btn {
	position: relative !important;
	border: 1px solid #00491e !important;
	text-decoration: none !important;
	display: block !important;
	width: 100% !important;
	transform: translateY(0) !important;
	transition: box-shadow 0.2s ease-out, transform 0.2s ease-out !important;
}

/* B-17 Fokusring, wie in B-16 nach der Grundgestaltung. */
body .awsm-application-form .awsm-job-form-control:focus-visible,
body .awsm-application-form input[type="checkbox"]:focus-visible {
	outline: 3px solid #00491e !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 6px #f0e6b1 !important;
}

body .awsm-application-form input.awsm-application-submit-btn:focus-visible {
	outline: 3px solid #00491e !important;
	outline-offset: 2px !important;
	box-shadow: inset 0 -0.275em 0.1px 0 #000, 0 0 0 6px #f0e6b1 !important;
}


/* B-13 Kennzeichnung fehlerhafter Felder, formularuebergreifend.
   Das Bewerbungsformular kennzeichnet ein fehlerhaftes Feld bereits mit einem
   Rahmen, die Contact-Form-7-Formulare bisher nicht. Zugleich verwendet das
   Stellenangebots-Plugin ein eigenes Rot #db4c4c (4,02:1 auf Weiss, unter der
   Schwelle). Beide Formulararten erhalten damit dieselbe Fehlerfarbe aus B-11.
   Die Kennzeichnung ergaenzt den Meldungstext, sie ersetzt ihn nicht.

   Das !important ist erforderlich: Das Theme setzt im Seitenkopf
   .style-light input { border-color: #00491e !important }.

   Zur Anordnung: Der Block steht bewusst als letzter in dieser Datei. Er traegt
   dieselbe Spezifitaet (0,3,2) wie die Grundgestaltung der Felder aus B-16, die
   denselben Rahmen in Dunkelgruen setzt - die spaetere Stelle entscheidet. So
   ueberschreibt der Zustand "fehlerhaft" die Grundgestaltung und nicht umgekehrt.
   WCAG 1.4.3, 1.4.11, 3.3.1; Meilenstein Z */
body .wpcf7-form input.wpcf7-form-control.wpcf7-not-valid,
body .wpcf7-form textarea.wpcf7-form-control.wpcf7-not-valid,
body .wpcf7-form select.wpcf7-form-control.wpcf7-not-valid,
.awsm-application-form .awsm-job-form-control.awsm-job-form-error,
.awsm-application-form .awsm-job-form-control.awsm-job-form-error:focus {
	border-color: #a4123f !important;
}

.awsm-job-form-inner div.awsm-job-form-error,
.awsm-application-form div.awsm-job-form-error,
div.awsm-job-form-error {
	color: #a4123f;
}

.awsm-job-form-inner .awsm-error-message,
.awsm-error-message {
	border-color: #a4123f;
}


/* B-18 Einwilligungszeile des Bewerbungsformulars auf den Schriftgrad des
   Masters. Der Master setzt die Zustimmungszeile in 13 Pixel, das
   Bewerbungsformular stand in 20 Pixel.

   Der Schriftgrad allein genuegt nicht: Die Beschriftung steht als Inline-
   Element in .awsm-job-inline-group, deren Grundlinienraster die Zeilenboxen
   bestimmt - derselbe Mechanismus wie in B-14 und B-15. Die Angabe steht deshalb
   auf dem Sammelelement und auf der Beschriftung.

   Anders als in B-15 ohne Umbruchpunkt: Der Text laeuft hier auf jeder Breite
   ueber mehrere Zeilen, nicht erst auf schmalen Ansichten.
   Meilenstein Z */
body .awsm-application-form .awsm-job-inline-group,
body .awsm-application-form .awsm-job-inline-group > label,
body .awsm-application-form .awsm-job-inline-group > label a {
	font-size: 13px !important;
	line-height: 1.55 !important;
}


/* B-19 Verweis auf die Datenschutzerklaerung im Einwilligungshinweis.
   In beiden Contact-Form-7-Formularen war er vom umgebenden Text nicht zu
   unterscheiden: keine Unterstreichung, und der sichtbare Text liegt in einem
   <strong>, das dieselbe Farbe traegt wie der Flieesstext ringsum. Die Farbe war
   damit nicht einmal als Merkmal vorhanden - der Verweis war unsichtbar.

   Das <a> selbst traegt die Akzentfarbe Rosa #f5c5db (1,51:1 auf Weiss). Sichtbar
   wird das erst bei der Unterstreichung: Ohne ausdrueckliche Angabe folgt
   text-decoration-color der Farbe des <a>, die Linie waere also rosa. Die
   Kurzschreibweise text-decoration setzt text-decoration-color zudem auf initial
   zurueck - die Farbe muss deshalb nach der Kurzschreibweise stehen.

   Neu: Dunkelgruen #00491e mit dunkelgruener Unterstreichung, 10,65:1.

   Entspricht der Festlegung vom 21.09.2026 und der Behandlung der Fliesstext-
   verweise in B-01; das Bewerbungsformular war darueber bereits erfasst.

   Zur Selektorlaenge: Die Theme-Regel
   "body.textual-accent-color .post-content > div p:not(.entry-small):not(.panel-title):not(.t-entry-member-social) a:not(.btn):not(.unmenu-block *)"
   traegt !important und liegt bei (0,7,4). Die Ausnahmen spiegeln deren
   Abgrenzung und heben die Auswahl auf (0,8,3); die Klassenspalte entscheidet.
   Gegengeprueft durch Messung - kuerzere Fassungen verlieren.
   WCAG 1.4.1, 1.4.3 */
body.textual-accent-color .wpcf7-form small a:not(.btn):not(.custom-link):not(.unmenu-block *):not(.entry-small):not(.panel-title):not(.t-entry-member-social),
body.textual-accent-color .wpcf7-form small a:not(.btn):not(.custom-link):not(.unmenu-block *):not(.entry-small):not(.panel-title):not(.t-entry-member-social):hover,
body.textual-accent-color .wpcf7-form small a:not(.btn):not(.custom-link):not(.unmenu-block *):not(.entry-small):not(.panel-title):not(.t-entry-member-social):focus,
body .wpcf7-form small a:not(.btn),
body .wpcf7 form small a:not(.btn) {
	color: #00491e !important;
	text-decoration: underline !important;
	text-decoration-color: #00491e !important;
	text-underline-offset: 0.18em;
	text-decoration-thickness: from-font;
}


/* B-23 Kein Farbzustand fuer die gerade aufgerufene Seite.
   Das Theme faerbt im Menue drei Eintraege rosa, sobald eine Unterseite offen
   ist: den Zweig (current-menu-ancestor), dessen Elternpunkt
   (current-menu-parent) und den Eintrag der Seite selbst (current-menu-item).
   Auf /locations/cafe-kohlenwaesche/ trifft das ausgerechnet einen Eintrag mit
   der Beschriftung "Zur Uebersicht", der dadurch als aktive Seite erscheint.

   Auf Entscheidung vom 22.09.2026 entfaellt die Markierung vollstaendig. Alle
   Eintraege stehen einheitlich in #f0e6b1.

   Barrierefreiheitsseitig geht dabei nichts verloren: Das Menue fuehrt kein
   aria-current, die Markierung war rein farblich und damit ohnehin nur fuer
   sehende Nutzung wirksam. Soll die aktuelle Seite spaeter wieder erkennbar
   sein, gehoert sie als aria-current="page" ausgezeichnet und nicht allein ueber
   Farbe - das waere eine Ergaenzung im MU-Plugin, nicht hier.

   Zur Anordnung: Der Block steht vor B-21. Beide tragen (0,6,3); der
   Zeigereffekt soll den Ruhezustand ueberschreiben, deshalb steht er spaeter.
   WCAG 1.4.1 (keine Verschlechterung; 2.4.8 ist AAA und nicht Zielniveau) */
body :is(.menu-dark, .submenu-dark) .menu-smart li:is(.current-menu-item, .current-menu-ancestor, .current-menu-parent, .current_page_item, .current_page_ancestor, .active) > a:not(.btn):not(.vc_tta-tab):not(.block-wrapper-parent *) {
	color: #f0e6b1;
}


/* B-21 Zeigereffekt auf allen Menueebenen.
   Die Theme-Regel fuer den Zeigereffekt im dunklen Menue schliesst Untermenues
   ausdruecklich aus:
   ".menu-dark .menu-smart a:not(.un-submenu *):hover" - und die Untermenue-Liste
   traegt genau diese Klasse .un-submenu. Die erste und zweite Untermenueebene
   blieben dadurch beim Ueberfahren unveraendert bei #f0e6b1, waehrend die oberste
   Ebene nach #f5c5db wechselt.

   Die Regel gilt jetzt fuer alle Ebenen und zusaetzlich fuer den Tastaturfokus,
   damit Maus- und Tastaturbedienung dieselbe Rueckmeldung geben.

   Gemessen: Rosa #f5c5db auf dem Menuegrund #00491e ergibt 7,05:1.

   Auf dunkle Menues begrenzt - auf hellem Grund erreicht Rosa nur 1,39:1.
   WCAG 1.4.3, 2.4.7 */
body :is(.menu-dark, .submenu-dark) .menu-smart li > a:not(.btn):not(.vc_tta-tab):not(.block-wrapper-parent *):hover,
body :is(.menu-dark, .submenu-dark) .menu-smart li > a:not(.btn):not(.vc_tta-tab):not(.block-wrapper-parent *):focus-visible {
	color: #f5c5db;
}


/* B-22 Schliessschalter des Menues als X.
   Der Schalter besteht aus drei Balken: .lines als mittlerer Balken, dessen
   ::before und ::after als die beiden gedrehten. Im geoeffneten Zustand nimmt das
   Theme den mittleren Balken zurueck
   (".lines-button.close .lines { background: transparent !important }", (0,3,0)).

   Zwei Regeln der Skin-Datei faerben den Balken bei geoeffnetem Ueberblendmenue
   jedoch erneut ein, beide mit !important. Die bindende liegt bei (0,9,1) - der
   Grund ist ein verschachteltes :not(.is_stuck:not(.menu-desktop-transparent)),
   dessen Argument selbst zwei Klassen traegt. Das Zeichen erschien dadurch als
   Stern statt als X.

   Statt die Selektorlaenge hochzutreiben wird der Balken ueber visibility
   zurueckgenommen - eine Eigenschaft, die an dieser Stelle niemand sonst setzt.
   visibility vererbt sich, die beiden gedrehten Balken holen sich deshalb
   ausdruecklich visible zurueck.

   Nur der geoeffnete Zustand ist betroffen; geschlossen bleiben alle drei Balken
   sichtbar. Die Farbangabe bleibt als Rueckfallebene erhalten.
   WCAG 1.4.11 */
.lines-button.close .lines:not(.lines-dropdown) {
	visibility: hidden;
	background: transparent !important;
}

.lines-button.close .lines:not(.lines-dropdown)::before,
.lines-button.close .lines:not(.lines-dropdown)::after {
	visibility: visible;
}


/* B-24 Lesbarkeit der Texte ueber den Kopfbildern.
   Jede Seite traegt im Kopf ein Foto mit einer Verlaufsschicht darueber
   (linear-gradient von durchsichtig bei 22 Prozent zu deckendem Dunkelgruen bei
   67 Prozent der Folienhoehe). Der Text steht darin zu weit oben: An seiner
   Stelle deckt der Verlauf je nach Seite nur 0 bis 71 Prozent. Beim Zoomen
   waechst der Textblock nach oben in den durchsichtigen Bereich hinein - bei
   200 Prozent liegt die Deckung auf allen Seiten unter dem noetigen Wert.

   Gemessen ueber den gesamten Pruefumfang: 26 von 29 Seitenkoepfen bereits bei
   100 Prozent unter der Schwelle, alle 29 bei 200 Prozent.

   Eine staerkere Verlaufsschicht scheidet aus: Sie muesste ab etwa einem Fuenftel
   der Folienhoehe decken und wuerde das Foto praktisch ausloeschen. Die
   Deckschicht haengt deshalb am Textcontainer und waechst mit ihm mit.

   Deckkraft 0,8, hergeleitet aus dem unguenstigsten denkbaren Untergrund, einem
   weissen Bildpunkt:

     Ueberschrift, grosse Schrift, noetig 3,0:1
       Rosa #f5c5db     4,05:1        Hellgelb #f0e6b1  4,86:1
     Fliesstext, noetig 4,5:1
       Hellgelb #f0e6b1  4,86:1

   Ueber dunkleren Bildstellen wird es besser, ueber reinem Dunkelgruen
   7,05:1 beziehungsweise 8,45:1.

   Die Flaeche ist eine eigene Ebene (::before), 28 px ueber den Container
   hinaus, statt Polsterung: Das Theme setzt an .uncont eine eigene
   Polsterung, und die Ebene veraendert den Seitenaufbau nicht. Hintergrund
   und Schatten mit Streuung trafen sich an den gerundeten Ecken als
   halbdurchlaessige Naht; an der Ecke oben links sank der Kontrast der
   ersten Zeile dadurch unter 3:1.

   Das :has() grenzt die Regel auf Zeilen mit Kopfbild ein. Browser ohne
   :has()-Unterstuetzung verwerfen die Regel; der Zustand ist dann der alte, es
   entsteht kein neuer Fehler.

   WCAG 1.4.3 */
.vc_row:has(> .row-background .block-bg-overlay) .uncont:not(.uncont *) {
	position: relative;
	isolation: isolate;
}

.vc_row:has(> .row-background .block-bg-overlay) .uncont:not(.uncont *)::before {
	content: "";
	position: absolute;
	inset: -28px;
	background-color: rgba(0, 73, 30, 0.8);
	border-radius: 48px;
	z-index: -1;
	pointer-events: none;
}


/* B-24 Der Kasten soll den Text umschliessen, nicht den ganzen Container.
   Das Theme haelt den Textblock mit einer Polsterung von oben frei, damit er
   nicht unter den festen Seitenkopf rutscht - gesetzt als Inline-Angabe am
   Container und beim Groessenwechsel per Skript nachgefuehrt: 192 Pixel ab
   960 Pixeln Breite, darunter 116. Die Deckschicht liegt am selben Container und
   faerbte diese leere Flaeche mit ein; oberhalb der Ueberschrift stand dadurch
   ein bis zu 192 Pixel hoher leerer Block.

   Die Polsterung wird deshalb in einen Aussenabstand verlagert: Der Text bleibt
   an seiner Stelle, der Kasten beginnt aber erst an der Schrift.

   Gemessen ueber 87 Seiten-Breiten-Kombinationen: vorher 36 mit leerer Flaeche
   oben, nachher keine - bei unveraenderter Position der Ueberschrift.

   Die Ausnahme spiegelt die Theme-Regel
   "#page-header .remove-menu-padding > .vc_row:first-child .uncont", die die
   Polsterung auf einem Teil der Seiten ohnehin entfernt. Ohne sie bekaemen
   gerade diese Seiten einen Abstand, den sie vorher nicht hatten.

   Das !important am Aussenabstand ist noetig, weil das Theme am Container
   margin: 0 auto setzt; die Ausnahme gewinnt ueber die Kennung #page-header. */
.vc_row:has(> .row-background .block-bg-overlay) .uncont:not(.uncont *) {
	padding-top: 0 !important;
	margin-top: 192px !important;
}

@media (max-width: 959px) {
	.vc_row:has(> .row-background .block-bg-overlay) .uncont:not(.uncont *) {
		margin-top: 116px !important;
	}
}

@media (min-width: 960px) {
	#page-header .remove-menu-padding > .vc_row:first-child .uncont:not(.uncont *) {
		margin-top: 0 !important;
	}
}

@media (max-width: 960px) {
	#page-header .remove-menu-padding-mobile > .vc_row:first-child .uncont:not(.uncont *) {
		margin-top: 0 !important;
	}
}


/* B-25 Startseite, Kopfslider: Beginn der Deckschicht auf Telefonen.

   Der Textkasten haengt im Theme am unteren Rand der Folie (.pos-bottom). Seine
   Oberkante liegt damit dort, wo der Text zufaellig endet - je nach Geraet und
   Folie zwischen 28 und 45 Prozent der Folienhoehe. Auf Telefonen verdeckt er
   den groesseren Teil des Fotos.

   Die Folie wird auf Telefonen deshalb von oben aufgebaut. Die sichtbare
   Oberkante des Kastens liegt dann bei 58 Prozent der Folienhoehe:
   72 px Polsterung der Reihe + Aussenabstand - 28 px Ueberstand der Flaeche
   aus B-24.

   Folge: Die Folie wird hoeher als der Bildschirm, Schaltflaeche und
   Folienpunkte stehen unterhalb der Falz. Zugleich beginnen alle vier Folien
   auf derselben Hoehe; die Ueberschrift springt beim Folienwechsel nicht mehr.

   svh statt vh, damit die eingeblendete Adressleiste in iOS Safari mitgerechnet
   wird. Die vh-Angabe davor bleibt fuer Browser ohne svh stehen.

   Gilt nur fuer die Startseite (body.home), nur fuer den Kopfslider
   (.row-slider) und nur bis 569 px - das ist die Mobilgrenze des Themes.
   Tablet und Desktop bleiben unveraendert.

   Gestaltungsvorgabe des Auftraggebers, kein Pruefbefund. */
@media (max-width: 569px) {
	body.home #page-header .row-slider .uncell:not(.uncont *) {
		vertical-align: top;
	}

	body.home #page-header .row-slider .uncont:not(.uncont *) {
		margin-top: calc(58vh - 44px) !important;
		margin-top: calc(58svh - 44px) !important;
	}
}


/* B-26 Kartentitel im Beitragsraster auf Telefonen. Seit 1.18.0 steht der
   Schriftgrad in der Telefonskala B-27, seit 1.19.0 die Trennung in B-65. */


/* ==========================================================================
   Meilenstein M - Darstellung unter 1024 px
   ========================================================================== */

/* B-32 Zwischen 500 und 1023 px keine Verkleinerung durch Theme-Stufen.

   Browser-Zoom halbiert die CSS-Breite: Ein Fenster ab 1000 px Breite landet
   bei 200 Prozent zwischen 500 und 1023 px. Das Theme verkleinert dort aber
   schon ab 959 bzw. 569 px - der Text waechst beim Zoomen dann nicht auf das
   Doppelte. Die Theme-Stufen gelten deshalb erst unter 500 px; darueber bleibt
   die Tablet- bzw. Desktopgroesse.

   Steht vor B-27, damit dort das Telefon-Querformat die Telefonskala erhaelt.
   Der Suchtitel traegt zusaetzlich die Klasse .h1; h1.h1.header-title hebt
   ihn ueber die Theme-Regel ".h1:not([class*=fontsize-])".

   WCAG 1.4.4 */
@media (min-width: 500px) and (max-width: 959px) {
	h1.post-title,
	h1.h1.header-title {
		font-size: 2.625rem;
	}
}

@media (min-width: 500px) and (max-width: 569px) {
	.tmb.tmb-content-overlay .t-entry-title.h3.title-scale {
		font-size: 1.625rem !important;
	}

	.uncode_text_column.text-small p {
		font-size: 1.25rem;
	}
}


/* B-27 Schriftskala der Ueberschriften auf Telefonen.

   Gleiche Rolle, gleicher Schriftgrad - vorher je nach Seite fuenf Groessen
   fuer dieselbe Rolle, und auf 24 von 32 Seiten war eine h2 groesser als die
   Hauptueberschrift. Die Groessen stammen aus WPBakery je Element als
   clamp(); auf dem Telefon greift jeweils die Untergrenze.

     Seitentitel h1        30 px   (vorher 20 bis 40)
     Titelsatz h1          26 px   lange Satztitel: Hotel, Familientafel,
                                   Hochzeiten, Lazy Sunday, Stellenanzeigen
     Abschnitt h2          26 px   (vorher 21 bis 40)
     Unterabschnitt h3     22 px   (vorher 16 bis 26)
     Kartentitel           22 px   (vorher 17 bzw. 24)

   Untergrenzen aus WCAG 1.4.4: Bei bis zu 500 Prozent Zoom muss ein Text die
   doppelte Groesse seines Desktopwerts erreichen koennen. Fuer den Seitentitel
   (5vw, bei 1440 px 72 px) sind das mindestens 28,8 px, fuer den Titelsatz
   (3,33vw) 19,2 px. Kartentitel bleiben fett ueber 18,66 px und damit grosse
   Schrift, auch in der beim Stapeln verkleinerten Karte.

   Gilt unter 500 px und im Telefon-Querformat. Das Querformat wird ueber
   (pointer: coarse) erkannt: Ein gezoomtes Desktopfenster hat einen feinen
   Zeiger und behaelt seine Groesse - sonst schrumpfte Text beim Zoomen.

   Ueberschriften in Textspalten (Rechtstexte) folgen derselben Skala; dort
   standen h2 bei 32 px, und lange Woerter wie "ANFRAGEVERWALTUNG" liefen bei
   320 px ueber die Spalte. Der Suchtitel ist wie in B-32 als h1.h1
   angesprochen.

   Nicht erfasst: Kopfslider der Startseite (B-25), Kontaktzeilen mit Telefon
   oder E-Mail, Suchtreffer (C-04), die 404-Ziffer.

   WCAG 1.4.4, 1.4.10; Gestaltung: Harmonisierung */
@media (max-width: 499px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
	.heading-text > h1.custom:not(:has(a[href^="tel:"], a[href^="mailto:"])):not(.row-slider *),
	.uncode_text_column > h1,
	h1.post-title,
	h1.h1.header-title {
		font-size: 1.875rem;
		line-height: 1.2;
	}

	body.page-id-159457 .heading-text > h1.custom:not(:has(a[href^="tel:"], a[href^="mailto:"])):not(.row-slider *),
	body.postid-159886 .heading-text > h1.custom:not(:has(a[href^="tel:"], a[href^="mailto:"])):not(.row-slider *),
	body.postid-159880 .heading-text > h1.custom:not(:has(a[href^="tel:"], a[href^="mailto:"])):not(.row-slider *),
	body.postid-159892 .heading-text > h1.custom:not(:has(a[href^="tel:"], a[href^="mailto:"])):not(.row-slider *),
	body.single-awsm_job_openings h1.post-title {
		font-size: 1.625rem;
	}

	.heading-text > h2,
	.heading-text > h3.custom,
	.awsm-job-form-inner > h2,
	.uncont > h2,
	.uncode_text_column > h2 {
		font-size: 1.625rem;
		line-height: 1.2;
	}

	.heading-text > h3:not(.custom),
	.awsm-job-entry-content > h3,
	.uncode_text_column > h3 {
		font-size: 1.375rem;
		line-height: 1.2;
	}

	.t-entry-title.custom,
	.tmb .t-entry-title.h3.title-scale,
	.tmb.tmb-content-overlay .t-entry-title.h3.title-scale {
		font-size: 1.375rem !important;
		line-height: 1.2;
	}
}

/* B-27 Kopfslider im Telefon-Querformat: dort steht die Tabletreihe des
   Sliders mit 5vw. Hochformat bleibt bei B-25. */
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
	.row-slider .heading-text > h1.custom {
		font-size: 1.875rem;
		line-height: 1.2;
	}
}


/* B-79 Anzeige-Ueberschriften beim Seitenzoom des iPad 30 px.

   Die von a11y.js C-28 markierten Anzeige-Ueberschriften (data-imh-anzeige)
   stehen in der Telefonskala B-27 bei 26 px. Auf dem iPad gilt B-27 ab
   175 Prozent Seitenzoom (768 px hochkant: 439 x 585 CSS-px; 1024 x 768:
   585 x 439): 26 x 1,75 = 45,5 px, kleiner als die Tabletstufe aus B-75
   (51 px). In diesem Fenster stehen sie bei 30 px (52,5 px gerendert).

   Erkannt am Seitenverhaeltnis: hochkant 400 bis 499 px breit und nicht
   schmaler als 2 : 3, quer 400 bis 500 px hoch und nicht breiter als
   3 : 2. Telefone liegen hochkant bei etwa 9 : 19,5 und quer ab 16 : 9 und
   bleiben bei B-27. Bei 200 Prozent und mehr (unter 400 CSS-px) reicht
   B-27: 26 x 2 = 52 px.

   Nur Touchgeraete; gezoomte Desktopfenster bleiben bei B-64.
   Steht nach B-27: gleiche Spezifitaet wie ".heading-text > h3.custom".

   WCAG 1.4.4 (Anzeige-Ueberschriften: bewusste Abweichung wie B-64) */
@media (min-width: 400px) and (max-width: 499px) and (min-aspect-ratio: 2/3) and (pointer: coarse), (orientation: landscape) and (min-height: 400px) and (max-height: 500px) and (max-aspect-ratio: 3/2) and (pointer: coarse) {
	.heading-text > h2[data-imh-anzeige],
	.heading-text > h3[data-imh-anzeige] {
		font-size: 1.875rem;
	}
}


/* B-75 Schriftskala der Ueberschriften auf Tablets.

   Auf Tablets galten die Groessen aus WPBakery je Element, meist clamp()
   mit vw-Anteil. Gleiche Rolle stand je Breite in bis zu fuenf Groessen;
   auf den vier Hotelseiten war die h2 groesser als die Hauptueberschrift,
   auf der Datenschutzerklaerung ebenso, auf drei Leistungsseiten bei
   768 px die h3 groesser als die h2.

     Seitentitel h1        40 px   (vorher 28 bis 68, Kopfslider 40 bis 68)
     Titelsatz h1          32 px   (vorher 26 bis 45)
     Abschnitt h2          32 px   (vorher 24 bis 55)
     Anzeige-Ueberschrift  51 px   (vorher 61 bis 137)
     Unterabschnitt h3     24 px   (vorher 26)
     Kartentitel           24 px   (vorher 26; gestapelte Bildkarten B-76)
     404-Ziffer            80 px   (vorher 77 bis 137; doppelte
                                   Hauptueberschrift wie am Desktop)

   Rollen und Selektoren wie in der Telefonskala B-27, die Titelsatz-Seiten
   ueber ihre Seiten-IDs. Der Kopfslider der Startseite zaehlt hier zu den
   Seitentiteln. h1.h1.header-title hebt den Suchtitel ueber die
   Theme-Regel ".h1:not([class*=fontsize-])". Nicht erfasst: Kontaktzeilen
   mit Telefon oder E-Mail, Suchtreffer (C-04), Stellenliste.

   Anzeige-Ueberschriften sind die von a11y.js C-28 markierten
   Abschnittsueberschriften (data-imh-anzeige; im Seitenbaukasten
   mindestens 8vw und 90 px Hoechstwert). Ohne a11y.js stehen sie bei
   32 px. Bei 51 px steht "Unsere Hotellerie" ab 768 px Breite einzeilig
   (688 px in 696 px Spalte). Ab 175 Prozent Seitenzoom gilt die
   Telefonskala B-27 (26 px): bei 200 Prozent 52 px; bei 175 Prozent
   gilt B-79 (30 px, gerendert 52,5 px). Wie am Desktop (B-64) waechst die Anzeige-Ueberschrift beim
   Zoomen nicht auf das Doppelte.

   Feste rem-Werte: Beim Seitenzoom waechst der Text im selben Mass, eine im
   Browser eingestellte Grundschrift wird uebernommen. Bei 300 Prozent
   Seitenzoom erreicht jede uebrige Rolle mindestens das Doppelte ihres
   Tabletwerts.

   Nur Touchgeraete ohne Hover, 500 bis 1366 px breit und hoeher als
   500 px. Telefon und Telefon-Querformat bleiben bei B-27, Desktop und
   gezoomte Desktopfenster (feiner Zeiger) unveraendert.

   Steht nach B-32: gleiche Selektoren fuer Stellen- und Suchtitel sowie
   fuer Kartentitel zwischen 500 und 569 px. Die Anzeige-Regel steht nach
   der h2-Regel (gleiche Spezifitaet wie ".heading-text > h3.custom").
   Kartentitel mit !important wie in B-27: Das Theme setzt
   ".tmb-content-overlay .h3.title-scale" unter 570 px mit Vorrang.

   WCAG 1.4.4 (Anzeige-Ueberschriften: bewusste Abweichung wie B-64);
   Gestaltung: Harmonisierung */
@media (min-width: 500px) and (max-width: 1366px) and (min-height: 501px) and (pointer: coarse) and (hover: none) {
	.heading-text > h1.custom:not(:has(a[href^="tel:"], a[href^="mailto:"])),
	.uncode_text_column > h1,
	h1.post-title,
	h1.h1.header-title {
		font-size: 2.5rem;
		line-height: 1.2;
	}

	body.page-id-159457 .heading-text > h1.custom:not(:has(a[href^="tel:"], a[href^="mailto:"])):not(.row-slider *),
	body.postid-159886 .heading-text > h1.custom:not(:has(a[href^="tel:"], a[href^="mailto:"])):not(.row-slider *),
	body.postid-159880 .heading-text > h1.custom:not(:has(a[href^="tel:"], a[href^="mailto:"])):not(.row-slider *),
	body.postid-159892 .heading-text > h1.custom:not(:has(a[href^="tel:"], a[href^="mailto:"])):not(.row-slider *),
	body.single-awsm_job_openings h1.post-title {
		font-size: 2rem;
	}

	body.error404 .page-body .uncont > .vc_custom_heading_wrap:first-child > .heading-text > h1 {
		font-size: 5rem;
	}

	.heading-text > h2,
	.heading-text > h3.custom,
	.awsm-job-form-inner > h2,
	.uncont > h2,
	.uncode_text_column > h2 {
		font-size: 2rem;
		line-height: 1.2;
	}

	.heading-text > h2[data-imh-anzeige],
	.heading-text > h3[data-imh-anzeige] {
		font-size: 3.1875rem;
	}

	.heading-text > h3:not(.custom),
	.awsm-job-entry-content > h3,
	.uncode_text_column > h3 {
		font-size: 1.5rem;
		line-height: 1.2;
	}

	.t-entry-title.custom,
	.tmb .t-entry-title.h3.title-scale,
	.tmb.tmb-content-overlay .t-entry-title.h3.title-scale {
		font-size: 1.5rem !important;
		line-height: 1.2;
	}
}


/* B-76 Titel der gestapelten Bildkarten auf Tablets 28 px.

   Die Bildkarten auf /locations/, /hotel/ und den Zimmerseiten laufen auf
   Tablets ueber die volle Spaltenbreite (562 bis 1037 px). Ihre Titel
   standen bei 50 px und brachen bis 1024 px Breite zweizeilig um, mit
   B-75 allein stuenden sie bei 24 px. 28 px stellt sie zwischen Abschnitt
   h2 (32 px) und Unterabschnitt h3 (24 px), einzeilig.

   Nur die gestapelten Karten tragen .t-entry-title.custom. !important
   gegen B-75, daher nach B-75.

   Gestaltung: Harmonisierung */
@media (min-width: 500px) and (max-width: 1366px) and (min-height: 501px) and (pointer: coarse) and (hover: none) {
	.t-entry-title.custom {
		font-size: 1.75rem !important;
	}
}


/* B-28 Adressen unter 1024 px.

   Adressen werden nicht nach Silben getrennt ("HUE-GEL.DE" in einer E-Mail-
   Adresse), duerfen aber an jeder Stelle umbrechen, statt ueber den Rand zu
   laufen. Lange Verweise in der Datenschutzerklaerung wurden sonst
   abgeschnitten. Die Trennung in Ueberschriften regelt seit 1.19.0 B-65.

   WCAG 1.4.10, 1.4.12 */
@media (max-width: 1023px) {
	a[href^="mailto:"],
	a[href^="http"]:not(.btn),
	.icon-box-heading .h6 {
		-webkit-hyphens: manual;
		hyphens: manual;
		overflow-wrap: anywhere;
	}
}


/* B-29 Schaltflaechen brechen um, statt abgeschnitten zu werden.

   Bei 320 px war die Absendeschaltflaeche 176 px breit, ihr Text brauchte mit
   39 px Polster je Seite 211 bis 231 px; white-space: nowrap und
   overflow: clip schnitten ihn ab. Die Schaltflaeche "Reservierungstelefon"
   ragte 76 px aus der Spalte. Unter 500 px darf die Beschriftung umbrechen,
   das seitliche Polster sinkt auf 24 px; lange Woerter werden an der
   Silbengrenze getrennt. Das Theme setzt an Schaltflaechen hyphens: none und
   word-break: keep-all mit Vorrang, daher !important. Fuer Schaltflaechen als
   Link gilt seit 1.19.0 die Trennung aus B-65.

   WCAG 1.4.10, 1.4.12 */
@media (max-width: 499px) {
	a.custom-link.btn,
	body .wpcf7 form input.wpcf7-submit,
	body .awsm-application-form input.awsm-application-submit-btn {
		max-width: 100%;
		white-space: normal !important;
		height: auto !important;
		padding-left: 24px !important;
		padding-right: 24px !important;
		line-height: 1.3 !important;
		word-break: normal !important;
		-webkit-hyphens: auto !important;
		hyphens: auto !important;
		hyphenate-limit-chars: auto 4 4;
		-webkit-hyphenate-limit-before: 4;
		-webkit-hyphenate-limit-after: 4;
		overflow-wrap: break-word;
	}

	body .wpcf7 form input.wpcf7-submit,
	body .awsm-application-form input.awsm-application-submit-btn {
		min-height: 53px;
		overflow: visible !important;
	}
}


/* B-30 Fokusring der Karten nach innen.

   Karten- und Galerielinks liegen in Behaeltern mit overflow: hidden (Karte,
   Raster, Reihe); der Ring aus B-03 wird dort vollstaendig abgeschnitten. Die
   Karte bekommt deshalb bei Tastaturfokus einen Ring auf der Innenseite, in den
   Farben von B-03: Dunkelgruen mit hellgelbem Rand, auf jedem Foto erkennbar.

   WCAG 2.4.7, 1.4.11 */
.tmb .t-entry-visual-cont:has(a:focus-visible)::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow:
		inset 0 0 0 2px #f0e6b1,
		inset 0 0 0 5px #00491e,
		inset 0 0 0 7px #f0e6b1;
	pointer-events: none;
	z-index: 10;
}

.tmb .t-entry-visual-cont:has(a:focus-visible) {
	position: relative;
}


/* B-31 Telefon folgt der Ausrichtung von Tablet und Desktop.

   Spalten, die auf Tablet und Desktop linksbuendig stehen, zentriert das Theme
   unter 570 px (Spaltenoption "mittig auf Mobilgeraeten"). Lange Absaetze
   standen dadurch mittig, bis 18 Zeilen, ohne gemeinsame Flucht mit dem
   linksbuendigen Kopfband. Diese Spalten bleiben jetzt linksbuendig. Auf allen
   Breiten zentrierte Abschnitte bleiben zentriert.

   Gestaltung: Harmonisierung */
@media (max-width: 569px) {
	.row div[class*=col-lg-].align_left.align_center_mobile > .uncol > .uncoltable > .uncell > .uncont,
	.row div[class*=col-lg-] .row-inner .align_left.align_center_mobile > .uncol > .uncoltable > .uncell > .uncont {
		text-align: left;
	}

	.align_left.align_center_mobile .btn-container.btn-container-advanced:not(.uncode-flexbox *) {
		margin-left: 0 !important;
		justify-content: flex-start !important;
	}
}


/* B-33 Einleitung im Kopfband auf Telefonen 18 px.

   Die Einleitung unter der Kopfueberschrift stand bei 15 px, der Fliesstext
   darunter bei 20 px - die Reihenfolge der Rollen war umgekehrt. Der Kopfslider
   der Startseite bleibt unberuehrt (B-25).

   Gestaltung: Harmonisierung */
@media (max-width: 499px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
	.uncode_text_column.text-small p:not(.row-slider *) {
		font-size: 1.125rem;
	}
}


/* B-34 Kopfzone bei geringer Fensterhoehe: Logo kleiner, Kopftext darunter.

   Das Logo steht auf allen Stufen unter 960 px mit 193 x 80 px bei 36/36;
   seine Unterkante liegt bei 116 px - im Telefon-Querformat ein Drittel, bei
   400 Prozent Zoom fast die Haelfte der Fensterhoehe. Wo die Seite den
   Menueabstand entfernt (Theme-Option, von B-24 gespiegelt), beginnt der
   Kopftext bei 72 px unter dem Logo: gemessen bei 844 x 390 auf zehn Seiten,
   bei 568 x 320 und Zoom auf Impressum und Datenschutz.

   Bei geringer Hoehe wird das Logo 48 px hoch bei 20 px Rand (Unterkante
   68 px), und der Kopftext erhaelt 16 px Aussenabstand. Das Logo ist ein Bild,
   die Verkleinerung beruehrt WCAG 1.4.4 nicht. 520 px statt 500 px, damit auch
   1280 px bei 200 Prozent Zoom (640 x 512) erfasst ist.

   WCAG 1.4.10 (Inhalt nicht verdeckt); Gestaltung: Harmonisierung */
@media (max-width: 959px) and (max-height: 520px) {
	#logo-container-mobile {
		padding-top: 20px !important;
		padding-bottom: 20px !important;
	}

	#logo-container-mobile .logo-image {
		height: 48px !important;
	}

	#page-header .remove-menu-padding-mobile > .vc_row:first-child .uncont:not(.uncont *),
	body.page-id-159713 #page-header .vc_row:first-child .uncont:not(.uncont *) {
		margin-top: 16px !important;
	}
}

/* B-34 Seiten ohne Menueabstand ab 960 px: Das Logo ist dort 120 px hoch
   (Unterkante 156 px). Auf /locations/ lag es bei 1024 und 1440 px ueber der
   Kopfueberschrift, auf /hotel/ mit Textabstaenden nach 1.4.12 von 1024 bis
   1440 px (bis 48 px der ersten Zeile verdeckt). Der Kopftext beginnt deshalb
   mindestens 96 px unter der Reihenoberkante, der Kasten 20 px unter dem Logo.
   Der Text steht am unteren Rand der Reihe; der Abstand wirkt nur, wenn er so
   weit nach oben reicht, und die Reihe waechst dann nach unten. */
@media (min-width: 960px) {
	#page-header .remove-menu-padding > .vc_row:first-child .uncont:not(.uncont *) {
		margin-top: 96px !important;
	}
}


/* B-35 Zielflaechen und Fokus am unteren Rand.

   - Nach-oben-Schalter: Der Kreis misst 42 x 42 px, der Link darin nur
     42 x 23 px. Im Querformat lag ein anderes Ziel naeher als 12 px; der
     Link fuellt jetzt den Kreis.
   - Einwilligung im Bewerbungsformular: Das gestaltete Kaestchen misst
     16 x 16 px, der Link "Datenschutzerklaerung" stand bei 844 x 390 px nur
     3 px daneben. 8 px Abstand erfuellen die Abstandsausnahme.
   - Symbol-Links im Kontaktblock (Telefon, E-Mail): 51 x 23 px, niedriger als
     24 px. Sie erhalten eine Flaeche von mindestens 44 x 44 px.
   - Fokus am unteren Rand: Der feste Nach-oben-Schalter verdeckte Zeilenenden
     und Teile fokussierter Elemente. Beim Scrollen zum Fokus bleiben unten
     72 px frei.

   WCAG 2.5.8, 2.4.11 */
.footer-scroll-top a.scroll-top {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	min-height: 42px;
}

body .awsm-application-form .awsm-job-form-group input[type="checkbox"] {
	margin-right: 8px;
}

.icon-box-icon > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
}

html {
	scroll-padding-bottom: 72px;
}


/* B-36 Menue: Schriftgrad im Telefon-Querformat und der Unterpunkte.

   Die Menuepunkte stehen bei 5vw: 42 px bei 844 x 390, fuenf Punkte fuellen
   dort mehr als die Fensterhoehe. Unterpunkte lagen bei 320 px bei 12,8 px.
   Im Telefon-Querformat (Zeigerabfrage wie in B-27, der gezoomte Desktop
   bleibt unberuehrt) 24 px; Unterpunkte auf Telefonen mindestens 15 px, darueber
   weiter mit dem Theme-Wert 4vw.

   Die Selektoren spiegeln die Theme-Regel mit !important und heben sich mit
   :not(.social-menu-link) darueber.

   WCAG 1.4.10; Gestaltung: Harmonisierung */
@media (max-width: 499px) {
	body.menu-mobile-centered .overlay-menu .navbar-main .menu-sidebar-inner ul.menu-smart.menu-primary-inner ul.drop-menu li.menu-item > a:not(li.font-size-custom > *):not(.uncont .font-size-custom *):not(.social-menu-link) {
		font-size: max(0.9375rem, 4vw) !important;
	}
}

@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
	body.menu-mobile-centered .overlay-menu .navbar-main .menu-sidebar-inner ul.menu-smart.menu-primary-inner > li > a:not(li.font-size-custom > *):not(.uncont .font-size-custom *):not(.social-menu-link) {
		font-size: 1.5rem !important;
		line-height: 1.3 !important;
	}

	body.menu-mobile-centered .overlay-menu .navbar-main .menu-sidebar-inner ul.menu-smart.menu-primary-inner ul.drop-menu li.menu-item > a:not(li.font-size-custom > *):not(.uncont .font-size-custom *):not(.social-menu-link) {
		font-size: 1rem !important;
	}
}


/* B-38 Kopfslider der Startseite: Pfeile neben dem Text.

   Zwischen 960 und 1279 px lagen die Pfeile des Sliders auf der ersten
   Textzeile (bei 1024 px Pfeilflaeche bis x 98, Text ab x 32); unter dem Pfeil
   fiel der Kontrast auf 1,00:1. Der Textkasten wird so schmal, dass die Pfeile
   ausserhalb liegen.

   WCAG 1.4.3 */
@media (min-width: 960px) and (max-width: 1279px) {
	body.home #page-header .row-slider .owl-item .uncont:not(.uncont *) {
		max-width: calc(100% - 160px);
		margin-left: auto !important;
		margin-right: auto !important;
	}
}


/* B-39 Einzelbilder im Telefon-Querformat nicht hoeher als das Fenster.

   Portraets und Einzelbilder laufen unter 1024 px ueber die volle Spaltenbreite:
   bei 568 x 320 px 496 x 496 px, 155 Prozent der Fensterhoehe. Bild und Text
   waren nie gemeinsam zu sehen. Im Telefon-Querformat wird die Breite auf
   70 Prozent der sichtbaren Hoehe begrenzt. Bildgruppen (mehrere Bilder
   uebereinander mit Parallaxe) bleiben unberuehrt.

   Gestaltung: Harmonisierung */
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
	.uncode-single-media:only-child {
		max-width: 70vh;
		max-width: 70svh;
		margin-left: auto;
		margin-right: auto;
	}
}


/* B-40 Adressblock auf dem Tablet linksbuendig.

   Die Adressspalte (Kontaktblock /hotel/) steht auf dem Desktop rechtsbuendig
   neben dem Text und auf dem Telefon linksbuendig. Dazwischen - einspaltig,
   570 bis 959 px - stand sie rechtsbuendig unter linksbuendigem Text.

   Gestaltung: Harmonisierung */
@media (min-width: 570px) and (max-width: 959px) {
	.row div[class*=col-lg-].align_right.align_left_mobile > .uncol > .uncoltable > .uncell > .uncont {
		text-align: left;
	}
}


/* B-41 Stellenanzeigen und Stellenfilter.

   - Beschriftung der Auswahllisten im Filter 12 px, der Umschalter darueber
     20 px: jetzt 16 px.
   - Datum der Anzeige auf dem Telefon 10 px, ab 768 px 12 px: jetzt ueberall
     mindestens 12 px.
   - Hinweis zu den Dateitypen als eigene Zeile; vorher erbte er als
     Inline-Element 30 px Zeilenhoehe.

   Gestaltung: Harmonisierung */
.awsm-filter-wrap .awsm-selectric .label {
	font-size: 1rem;
}

.post-info .date-info {
	font-size: max(0.75rem, 1em);
}

body .awsm-application-form .awsm-job-form-group > small {
	display: block;
	margin-top: 6px;
	line-height: 1.5;
}



/* B-42 Gestapelte Karten: die fokussierte Karte liegt oben.

   Auf den Seiten mit gestapelten Karten (Locations, Hotel, Zimmer) wird jede
   Karte als eigene Reihe fixiert, die folgende schiebt sich darueber, die
   vorige wird verkleinert. Beim Rueckwaerts-Tab liegt die fokussierte Karte
   zwar im Fenster, aber vollstaendig unter der naechsten; der Browser rollt
   deshalb nicht. Die Karte mit Tastaturfokus kommt nach oben und wird
   unverkleinert gezeigt. Zeigerbedienung und Stapeleffekt bleiben unberuehrt.

   Das z-index muss am Platzhalter der Fixierung sitzen: Die fixierte Ebene
   darin bildet einen eigenen Stapelkontext, ein Wert an der Reihe wirkte nur
   innerhalb dieser Ebene. Die Werte der Animation stehen inline, daher
   !important.

   WCAG 2.4.11, 2.4.7 */
.pin-spacer:has(.row-inner-sticky :focus-visible) {
	z-index: 20 !important;
}

.row-inner-sticky:has(:focus-visible) {
	transform: none !important;
	scale: none !important;
	filter: none !important;
	opacity: 1 !important;
}


/* B-43 Fehlermeldungen des Bewerbungsformulars wie im Master.

   Die Meldungen standen in 20 px, Staerke 500, Zeilenhoehe 30 px, ohne
   Abstand zum Feld; die Einwilligungsmeldung erbte 13 px aus B-18. Der Master
   (/kontakt/, B-11) setzt 15 px, 600, 1,4 und 6 px Abstand. Nur das div der
   Meldung: Dieselbe Klasse traegt als span das Pflichtfeld-Sternchen.

   Gestaltung: Harmonisierung (Meilenstein Z) */
.awsm-job-form-inner div.awsm-job-form-error,
.awsm-application-form div.awsm-job-form-error,
div.awsm-job-form-error {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	margin-top: 6px;
}


/* B-44 Gestapelte Karten in gezoomten Desktopfenstern geringer Hoehe.

   Die Kartenhoehe folgt der Fensterhoehe (80 % abzueglich Polster). Bei 200 %
   Zoom aus einem Laptopfenster (etwa 1366 x 657 oder 1280 x 600) bleiben
   320 bis 330 CSS-px Hoehe; die Titel stehen dort bei 50 px und wurden an der
   Unterkante abgeschnitten. Die Karte nutzt dann die verfuegbare Hoehe (sie
   steht zentriert, oben und unten bleiben je 40 px), das Polster des Titels
   wird schmaler. Die Schrift bleibt unveraendert, sie muss beim Zoomen
   wachsen. Touchgeraete sind nicht betroffen: Dort stehen die Titel im
   Querformat bei 22 px (B-27) und passen.

   WCAG 1.4.4, 1.4.10, 1.4.12 */
@media (max-height: 500px) and (pointer: fine) {
	.row-inner-sticky .tmb-iso .t-inside {
		height: calc(100vh - 80px) !important;
		height: calc(100svh - 80px) !important;
	}

	.row-inner-sticky .tmb-iso .t-overlay-text.single-block-padding {
		padding-top: 16px;
		padding-bottom: 16px;
	}
}


/* B-54 Telefon und E-Mail im Kontaktblock in Hellgelb, beim Zeigen in Rosa.

   Vorgabe Gestaltung. Die Kontaktzeilen auf dunkelgruenem Grund standen in
   Rosa: Die Theme-Option "Akzentfarbe fuer Textlinks" faerbt Links in
   Absaetzen mit !important und Spezifitaet bis (0,8,3); der Absatz selbst
   steht bereits in Hellgelb. Die erste Selektorgruppe spiegelt diese Regel
   mit (0,9,3), die zweite deckt Kontaktzeilen ohne die Option ab.

   Hellgelb #f0e6b1 auf #00491e 8,45:1, Rosa #f5c5db auf #00491e 7,05:1.
   Der Tastaturfokus erhaelt denselben Zustand wie der Zeiger.

   Gestaltung: Vorgabe; WCAG 1.4.3 */
body.textual-accent-color .style-dark .heading-text > p:not(.entry-small):not(.panel-title):not(.t-entry-member-social) a[href^="tel:"]:not(.btn):not(.unmenu-block *),
body.textual-accent-color .style-dark .heading-text > p:not(.entry-small):not(.panel-title):not(.t-entry-member-social) a[href^="mailto:"]:not(.btn):not(.unmenu-block *),
.style-dark .heading-text a[href^="tel:"],
.style-dark .heading-text a[href^="mailto:"] {
	color: #f0e6b1 !important;
}

body.textual-accent-color .style-dark .heading-text > p:not(.entry-small):not(.panel-title):not(.t-entry-member-social) a[href^="tel:"]:not(.btn):not(.unmenu-block *):hover,
body.textual-accent-color .style-dark .heading-text > p:not(.entry-small):not(.panel-title):not(.t-entry-member-social) a[href^="mailto:"]:not(.btn):not(.unmenu-block *):hover,
body.textual-accent-color .style-dark .heading-text > p:not(.entry-small):not(.panel-title):not(.t-entry-member-social) a[href^="tel:"]:not(.btn):not(.unmenu-block *):focus-visible,
body.textual-accent-color .style-dark .heading-text > p:not(.entry-small):not(.panel-title):not(.t-entry-member-social) a[href^="mailto:"]:not(.btn):not(.unmenu-block *):focus-visible,
.style-dark .heading-text a[href^="tel:"]:hover,
.style-dark .heading-text a[href^="mailto:"]:hover,
.style-dark .heading-text a[href^="tel:"]:focus-visible,
.style-dark .heading-text a[href^="mailto:"]:focus-visible {
	color: #f5c5db !important;
}


/* B-55 Zeilenhoehe der Ueberschriften einheitlich 1,2.

   Bei Zeilenhoehen unter 1,15 stossen die Umlautpunkte versaler Zeilen an die
   Zeile darueber. Ueberschriften ohne eigene Zeilenhoehe im Seitenbaukasten
   ("Heading line height: Default") erhalten auf allen Geraeten 1,2. Eine im
   Element gesetzte Zeilenhoehe bleibt wirksam; sie wird dort auf "Default"
   gestellt, damit diese Regel greift.

   Gestaltung: Harmonisierung */
.heading-text > h1,
.heading-text > h2,
.heading-text > h3,
.heading-text > h4,
.heading-text > h5,
.heading-text > h6,
.uncode_text_column > h1,
.uncode_text_column > h2,
.uncode_text_column > h3,
.uncode_text_column > h4,
h1.post-title,
.t-entry-title {
	line-height: 1.2;
}


/* B-64 Anzeige-Ueberschriften werden beim Zoomen nicht kleiner.

   Bewusste Abweichung von WCAG 1.4.4, freigegeben am 23.09.2026. Die grossen
   Abschnittsueberschriften (am Desktop 96 bis 150 px) bleiben beim
   Browser-Zoom gleich gross; alle uebrigen Texte wachsen unveraendert mit.
   Vorher sanken sie ab etwa 300 Prozent auf die Telefonskala B-27 (bei
   1440 px und 300 Prozent 78 statt 144 Bildpunkte).

   Unter 500 px Breite mit feinem Zeiger (gezoomtes Desktopfenster) behalten
   sie ihren Anteil an der Fensterbreite (--imh-anzeige, gesetzt von
   a11y.js C-28). Der Anteil haelt die Groesse bei jedem Zoom konstant und
   die Zeile passt wie ohne Zoom in die Spalte. Touchgeraete sind nicht
   betroffen, dort gilt B-27.

   WCAG 1.4.4 (bewusste Abweichung), 1.4.10 */
@media (max-width: 499px) and (pointer: fine) {
	.heading-text > h2[data-imh-anzeige],
	.heading-text > h3[data-imh-anzeige] {
		font-size: var(--imh-anzeige) !important;
	}
}


/* B-56 Hotelkarten der Startseite im einspaltigen Raster gleich hoch.

   Das Raster (links eine grosse Karte, rechts zwei halbe) setzt die
   Kartenhoehen per Skript aus dem Desktopmuster. Einspaltig behielt die
   erste Karte die doppelte Hoehe: bei 768 px 708 gegen 336 px, bei
   844 x 390 px 780 gegen 372 px (2 Bildschirmhoehen). Die grosse Karte
   erhaelt dort die Hoehe der beiden anderen, nach derselben Rechnung wie das
   Skript (halbe Rasterbreite, aufgerundet auf 12 px, abzueglich 36 px
   Abstand). Der Bildausschnitt steht bei 65 Prozent der Bildhoehe: Tisch,
   Vase und Windlicht bleiben im Bild, unter dem Titel liegt die dunkle
   Sesselflaeche.

   Die Bedingung fragt die Rasterbreite ab wie das Skript (Behaelterabfrage
   statt Fensterbreite) und greift vor dem Aufbau des Rasters; Positionen und
   Rasterhoehe stimmen damit. Sie beginnt bei 532 px Rasterbreite (Fenster ab
   568 px): Darunter stuende der Titel in der flachen Karte ueber der hellen
   Tischkante (2,5:1 statt 3:1), die Karte bleibt dort wie bisher. Ab 960 px
   Rasterbreite ist das Raster zweispaltig und unveraendert. Die Hoehe steht
   inline, daher !important.

   Gestaltung: Harmonisierung */
@media (max-width: 1023px) {
	.isotope-container.style-metro:has(> .tmb-iso-w6.tmb-iso-h6):has(> .tmb-iso-w6.tmb-iso-h3) {
		container: imh-metro / inline-size;
	}
}

@container imh-metro (532px <= width < 960px) {
	.isotope-container.style-metro > .tmb-iso-w6.tmb-iso-h6 > .t-inside {
		height: calc(50cqw - 36px) !important;
		height: calc(round(up, 50cqw, 12px) - 36px) !important;
	}

	.isotope-container.style-metro > .tmb-iso-w6.tmb-iso-h6 .t-background-cover {
		background-position: 50% 65%;
	}
}


/* B-57 Kontaktzeilen: Telefonnummer einzeilig, E-Mail groesser.

   Die Telefonnummer steht auf Telefonen bei 25 px und ist 250 px breit; bei
   320 px (Spalte 248 px) und 400 Prozent brach sie als "(0201) 24 70" / "40"
   um. Unter 360 px 24 px (240 px, einzeilig). Muss sie umbrechen (erweiterte
   Textabstaende, groessere Grundschrift), teilt balance sie als "(0201)" /
   "24 70 40" statt die letzte Zifferngruppe allein zu stellen. Kein nowrap:
   Mit erweiterten Textabstaenden braucht die Nummer bis 307 px.

   Die E-Mail-Adresse stand auf allen Telefonbreiten bei 15 px, der Fliesstext
   daneben bei 20 px. Ab 390 px Breite mindestens 18 px (287 px bei 318 px
   Spalte); ab 720 px gilt wie bisher 2,5vw. Unter 390 px bleibt 15 px, die
   Adresse passt dort sonst nicht in die Zeile.

   Gezoomtes Desktopfenster (feiner Zeiger, unter 500 px): Die Telefonnummer
   steht am Desktop bei 5vw (1280 px: 64 px) und wuchs beim Zoomen nicht auf
   das Doppelte (500 Prozent: 25 px, 1,95fach). 2rem ergibt ab 400 bzw.
   500 Prozent die doppelte Groesse; die Nummer bricht dann als "(0201)" /
   "24 70 40" um.

   WCAG 1.4.4; Gestaltung: Harmonisierung */
@media (max-width: 1023px) {
	.heading-text > p.custom:has(> span > a[href^="tel:"]) {
		text-wrap: balance;
	}
}

@media (max-width: 359px) and (pointer: coarse) {
	.heading-text > p.custom:has(> span > a[href^="tel:"]) {
		font-size: 1.5rem;
	}
}

@media (max-width: 499px) and (pointer: fine) {
	.heading-text > p.custom:has(> span > a[href^="tel:"]) {
		font-size: 2rem;
	}
}

@media (min-width: 390px) and (max-width: 1023px) {
	.heading-text > p.custom:has(> span > a[href^="mailto:"]) {
		font-size: max(1.125rem, 2.5vw);
	}
}


/* B-58 Schaltflaechenpaar der Startseite auf Telefonen nebeneinander.

   Unter 570 px stellt das Theme nebeneinander gesetzte Schaltflaechen
   untereinander, auch wo beide in eine Zeile passen: "Die Story" / "Die Jobs"
   (146 + 132 px) belegten bei 390 x 844 px 117 px Hoehe, bei 568 x 320 px
   115 von 320 px. Ab 375 px stehen sie wie auf dem Tablet nebeneinander,
   18 px Abstand; reicht die Zeile nicht (erweiterte Textabstaende), bricht
   die zweite um. Darunter bleibt die Stapelung, der Abstand steigt von 10 auf
   16 px.

   Nur Startseite: Die uebrigen Paare ("Bankettmappe" / "E-Mail schreiben"
   und aehnliche) passen auf Telefonen nicht in eine Zeile und bleiben
   gestapelt.

   Gestaltung: Harmonisierung */
@media (min-width: 375px) and (max-width: 569px) {
	body.home .btn-container.btn-inline:not(.btn-inline-mobile):has(+ .btn-container.btn-inline) {
		display: inline-block;
		padding-right: 9px;
	}

	body.home .btn-container.btn-inline + .btn-container.btn-inline:not(.btn-inline-mobile) {
		display: inline-block;
		padding-left: 9px;
	}
}

@media (max-width: 374px) {
	body.home .btn-container.btn-inline + .btn-container.btn-inline:not(.btn-inline-mobile) {
		margin-top: 15px !important;
	}
}


/* B-59 Kartenkarussell bei geringer Fensterhoehe.

   Unter 570 px zeigt das Locations-Karussell der Startseite eine Karte mit
   quadratischem Bild ueber die volle Spaltenbreite: bei 568 x 320 px
   496 x 496 px, die Karte war 545 px hoch (1,7 Bildschirmhoehen), Bild und
   Titel nie gemeinsam sichtbar. Bei geringer Hoehe wird das Bild auf
   70 Prozent der sichtbaren Hoehe begrenzt (wie B-39) und als Ausschnitt
   gezeigt, nicht verzerrt. Die Schrift bleibt unveraendert.

   Nur Karten mit Titel unter dem Bild; Bildergalerien mit Grossansicht
   bleiben unveraendert. Die Bildhoehe steht inline, daher !important.

   Gestaltung: Harmonisierung */
@media (max-width: 1023px) and (max-height: 500px) and (orientation: landscape) {
	.owl-carousel .tmb-carousel.tmb-content-under.tmb-img-ratio .t-entry-visual-cont > .dummy {
		padding-top: min(100%, 70vh) !important;
		padding-top: min(100%, 70svh) !important;
	}

	.owl-carousel .tmb-carousel.tmb-content-under.tmb-img-ratio .t-entry-visual-cont img {
		object-fit: cover;
	}
}


/* B-60 Leistungsseiten: Abstaende gestapelter Schaltflaechen.

   Unter 570 px stehen die Schaltflaechen untereinander. Die Abstaende
   folgten den Abstandselementen des jeweiligen Abschnitts und waren bei
   gleicher Bausteinfolge verschieden: Text bis Schaltflaeche 82, 46 oder
   37 px, zwischen gestapelten Schaltflaechen 11 oder 20 px, bis zum
   naechsten Abschnitt 72 oder 108 px (Hochzeiten).

   Einheitlich jetzt: 36 px vor der ersten Schaltflaeche wie auf der
   Uebersicht /leistungen/ und nach den Listen, 18 px zwischen gestapelten
   Schaltflaechen wie beim Theme ohne Verkettung, 72 px bis zum naechsten
   Abschnitt. Erfasst sind die Leistungsseiten (Beitragstyp
   service); die Uebersicht war bereits einheitlich.

   Gestaltung: Harmonisierung */
@media (max-width: 569px) {
	body.single-service .uncont > .empty-space:has(+ .btn-container) {
		padding-top: 36px;
	}

	body.single-service .uncont > .empty-space + .btn-container {
		margin-top: 0 !important;
	}

	body.single-service .uncont > .btn-container + .btn-container {
		margin-top: 18px !important;
	}

	body.single-service .vc_row:has(+ .vc_row > .row.double-top-padding) > .row.single-bottom-padding:has(.btn-container) {
		padding-bottom: 0;
	}
}


/* B-61 Bildgruppen im Telefon-Querformat nicht hoeher als das Fenster.

   Die Bildgruppen der Leistungs- und Location-Seiten (zwei oder drei
   versetzte Bilder) laufen unter 570 px ueber die volle Spaltenbreite: bei
   568 x 320 px 473 px hoch, 148 Prozent der Fensterhoehe. Das Einzelbild
   mit Seitenbeschriftung (/leistungen/, Erich-Brost-Pavillon) ist 495 px
   hoch; B-39 erfasst es nicht, weil die auf Telefonen ausgeblendete
   Beschriftung daneben steht. Bild und Ueberschrift waren nie gemeinsam
   zu sehen.

   Im Telefon-Querformat wird die Gruppe hoechstens 73 Prozent der
   sichtbaren Hoehe breit und mittig gestellt; sie ist dann hoechstens
   70 Prozent der Hoehe hoch, wie Einzelbilder nach B-39. Das Einzelbild
   folgt B-39. Ab 570 px (zweispaltig) und im gezoomten Desktopfenster
   bleibt die Darstellung unveraendert. Das Theme setzt an der Gruppe
   max-width: none mit Vorrang, daher !important.

   Gestaltung: Harmonisierung */
@media (max-width: 569px) and (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
	.image-card > .uncol > .uncoltable > .uncell > .uncont {
		max-width: 73vh !important;
		max-width: 73svh !important;
		margin-left: auto;
		margin-right: auto;
	}

	.uncont > .uncode-single-media:first-child:has(+ .vertical-text:last-child) {
		max-width: 70vh;
		max-width: 70svh;
		margin-left: auto;
		margin-right: auto;
	}
}


/* B-62 Ueber uns: Absatzabstand im einspaltigen Kapiteltext.

   Jedes Kapitel besteht aus einer Reihe mit Bild, Zwischenueberschrift und
   Text und einer Folgereihe mit zwei Textspalten. Unter 960 px stehen alle
   Absaetze untereinander: innerhalb eines Textmoduls 18 px Abstand, am
   Uebergang zur Folgereihe (oberer Reihenabstand) und zwischen deren Spalten
   (Spaltenabstand) je 36 px - Folge 18, 18, 36, 36 im ersten Kapitel,
   18, 36, 36 in den uebrigen. Beide Uebergaenge erhalten den Absatzabstand
   von 18 px. Zweispaltig ab 960 px unveraendert.

   Erfasst ist eine Reihe ohne Ueberschrift und Bild direkt nach einer Reihe
   ohne unteren Abstand. Die Seiten-ID begrenzt die Regel: Dieselbe Abfolge
   trennt auf Startseite und Hotelseiten eigenstaendige Abschnitte.

   Gestaltung: Harmonisierung */
@media (max-width: 959px) {
	body.page-id-159600 .post-content > .vc_row:has(> .row.no-bottom-padding) + .vc_row:not(:has(.vc_custom_heading_wrap, .uncode-single-media)) > .row {
		padding-top: 18px;
	}

	body.page-id-159600 .post-content > .vc_row:has(> .row.no-bottom-padding) + .vc_row:not(:has(.vc_custom_heading_wrap, .uncode-single-media)) > .row > .row-inner > .wpb_column + .wpb_column {
		padding-top: 18px;
	}
}


/* B-63 404-Seite: Ziffer auf Telefonen, Abstaende bei geringer Fensterhoehe.

   Die Ziffer "404" ist seit der Umgestaltung der Seite eine eigene h1 mit
   clamp(40px, 10vw, 150px) und faellt damit unter die Telefonskala B-27:
   30 px, so gross wie "Seite nicht gefunden". Beim Zoom aus einem
   Desktopfenster sank sie dadurch unter ihre Groesse bei 100 Prozent
   (1440 px bei 300 Prozent 90 statt 144 Bildpunkte). Unter 500 px gilt
   3,75rem, 60 px: 5 x 60 >= 2 x 150, und das Verhaeltnis zum Titel bleibt
   2 : 1 wie auf dem Desktop. Im Telefon-Querformat bleibt die Ziffer bei
   30 px, damit bei 844 x 390 Titel, Hinweis und Schaltflaeche auf die erste
   Bildschirmseite passen.

   Unter 960 px bei hoechstens 520 px Hoehe (wie B-34) halbieren sich der
   obere Abstand der Reihe und der Leerraum vor der Schaltflaeche, je 72 auf
   36 px. "Zur Startseite" lag bei 844 x 390 vorher bei 389 bis 442 px,
   ausserhalb der ersten Bildschirmseite. Schriftgroessen bleiben dabei
   unveraendert, auch im gezoomten Desktopfenster.

   WCAG 1.4.4; Gestaltung: Harmonisierung */
@media (max-width: 499px) {
	body.error404 .page-body .uncont > .vc_custom_heading_wrap:first-child > .heading-text > h1 {
		font-size: 3.75rem;
	}
}

@media (max-width: 959px) and (max-height: 520px) {
	body.error404 .page-body .row-container > .row-parent {
		padding-top: 36px;
	}

	body.error404 .page-body .uncont > .empty-space {
		padding-top: 36px;
	}
}


/* B-65 Trennung in Ueberschriften und Schaltflaechen nur an gesetzten Stellen.

   Die Silbentrennung des Browsers (hyphens: auto, Plugin "WP Add Custom
   CSS") trennt zusammengesetzte Woerter nach Silben statt an der Wortfuge:
   "RESERVIERUNGSTE-LEFON", "HOCHZEITSLOCATI-ONS", "STADTHALL-E". Ein
   weiches Trennzeichen verhindert das nicht; Chromium und WebKit trennen den
   Wortteil danach weiter nach Silben. Die Trennstellen setzt deshalb das
   MU-Plugin (A-13, Woerterbuch), der Browser trennt nur dort
   (hyphens: manual). Gilt auf allen Breiten und Geraeten und ersetzt die
   Trenngrenzen aus B-26 und B-28.

   Ein Wort ohne gesetzte Trennstelle, das breiter ist als die Spalte, bricht
   am Rand um (overflow-wrap: anywhere), statt die Spalte aufzuweiten. Das
   Plugin setzt word-wrap: normal an jedem Element; die Textbausteine in der
   Ueberschrift uebernehmen den Wert der Ueberschrift deshalb ausdruecklich.
   E-Mail-Adressen folgen B-28.

   Ueberschriftenblock und Ueberschrift sind im Theme inline-block. WebKit
   bemisst sie ohne Trennstellen; mit Textabstaenden nach 1.4.12 liefen
   "Weitere Raeumlichkeiten" und "Cafe Kohlenwaesche" ueber die Spalte hinaus
   und wurden abgeschnitten. max-width: 100% haelt beide in der Spalte.

   Schaltflaechen: Das Theme setzt hyphens: none und word-break: keep-all mit
   Vorrang, daher !important. "Reservierungstelefon:" war dadurch bei
   667 x 375 px breiter als die Spalte und ragte ueber den Fensterrand.

   Steht nach B-28 und B-29.

   WCAG 1.4.10, 1.4.12; Gestaltung: Harmonisierung */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4,
.t-entry-title,
.heading-text > p.custom,
:is(h1, h2, h3, h4, h5, h6, .t-entry-title) a[href^="http"]:not(.btn) {
	-webkit-hyphens: manual;
	hyphens: manual;
	overflow-wrap: anywhere;
}

:is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .t-entry-title, .heading-text > p.custom) :not(a[href^="mailto:"]) {
	overflow-wrap: inherit;
}

.vc_custom_heading_wrap > .heading-text,
.heading-text > h1,
.heading-text > h2,
.heading-text > h3 {
	max-width: 100%;
}

a.custom-link.btn {
	word-break: normal !important;
	-webkit-hyphens: manual !important;
	hyphens: manual !important;
}


/* B-88 Adressen brechen nur an gesetzten Stellen um.

   E-Mail- und Webadressen stehen in span.imh-adresse, ein Bindestrich mit
   Folgezeichen in span.imh-nb (A-15). Umbrochen wird an den gesetzten
   Stellen ohne Trennstrich: nach "@" und "/", vor "." der Domain. Vorher
   brach "info@imhoff-essen.de" bei 320 px am vorhandenen Bindestrich
   ("info@imhoff- / essen.de"), der sich wie ein Trennstrich liest, und ab
   1024 px trennte die Silbentrennung des Fliesstexts Webadressen mit
   Trennstrich (".../priva- / cy/"). Keine Silbentrennung in der Adresse;
   ein Abschnitt, der breiter ist als die Zeile, bricht als letzter Ausweg
   am Rand um, statt ueberzustehen.

   WCAG 1.4.10, 1.4.12 */
.imh-adresse {
	-webkit-hyphens: manual;
	hyphens: manual;
	overflow-wrap: anywhere;
}

.imh-nb {
	white-space: nowrap;
}


/* B-66 Bewerbungsformular: Ueberschrift unter 360 px 22 px.

   "JETZT BEWERBEN" steht im Formularkasten (178 px Innenbreite bei 320 px)
   bei 26 px; "BEWERBEN" passte nicht in die Zeile und brach ohne
   Trennstrich als "BEWERBE" / "N" um. Bei 22 px steht das Wort ganz.
   5 x 22 >= 2 x 32 (Desktopwert), die Untergrenze aus WCAG 1.4.4 bleibt
   gewahrt.

   WCAG 1.4.10; Gestaltung: Harmonisierung */
@media (max-width: 359px) {
	.awsm-job-form-inner > h2 {
		font-size: 1.375rem;
	}
}


/* B-67 Bildausschnitt der Kopfbilder auf Touchgeraeten.

   Die Kopfbilder fuellen die Kopfreihe (background-size: cover), der
   Ausschnitt steht mittig. Im Querformat ist die Reihe flach, auf dem
   Tablet hochkant fast quadratisch; der Verlauf der Reihe deckt ab zwei
   Dritteln ihrer Hoehe vollstaendig. Mittig gesetzt lag das Motiv auf
   sechs Seiten angeschnitten oder im deckenden Teil des Verlaufs:

     /leistungen/                     Teller oben angeschnitten (quer, Tablet)
     /leistungen/events/              Glas am linken Rand (Tablet hoch),
                                      tief im Verlauf (Telefon quer)
     /leistungen/hochzeiten/          Tafel tief im Verlauf (Telefon quer)
     /locations/                      Telefonreihe bei 568 x 320 px: nur Boden
     /locations/cafe-kohlenwaesche/   Gaeste tief im Verlauf (Telefon quer)
     /kontakt/                        Teller tief im Verlauf (Telefon quer)

   Die Position wird dort je Seite und Geraeteklasse nachgefuehrt; im
   Telefon-Hochformat gilt weiter die Angabe aus dem Seitenbaukasten. Die
   Seitenkennungen aendern sich bei einer Bearbeitung in WPBakery nicht;
   nach dem Austausch eines Kopfbilds ist die Position zu pruefen. Wo das
   Bild die Reihe ohne senkrechten Ueberstand fuellt (667 x 375 px), bleibt
   die senkrechte Angabe ohne Wirkung. Die
   Position steht als Inline-Stil am Element, daher !important. Geraete mit
   feinem Zeiger (Desktop, auch gezoomt) bleiben unveraendert.

   Gestaltung: Harmonisierung */
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
	body.page-id-159595 #page-header .vc_row.desktop-hidden:has(> .row-header) .background-inner {
		background-position: 50% 30% !important;
	}

	body.postid-159872 #page-header .vc_row.mobile-hidden:has(> .row-header) .background-inner,
	body.postid-159880 #page-header .vc_row.mobile-hidden:has(> .row-header) .background-inner,
	body.postid-159399 #page-header .vc_row.mobile-hidden:has(> .row-header) .background-inner {
		background-position: 50% 100% !important;
	}

	body.page-id-159604 #page-header .vc_row.mobile-hidden:has(> .row-header) .background-inner {
		background-position: 50% 75% !important;
	}
}

@media (min-width: 570px) and (max-width: 1366px) and (pointer: coarse) {
	body.page-id-159597 #page-header .vc_row.mobile-hidden:has(> .row-header) .background-inner {
		background-position: 50% 30% !important;
	}
}

@media (orientation: portrait) and (min-width: 570px) and (max-width: 1023px) and (pointer: coarse) {
	body.postid-159872 #page-header .vc_row.mobile-hidden:has(> .row-header) .background-inner {
		background-position: 10% 50% !important;
	}
}


/* B-68 Deckschicht hinter den Kartentiteln auf Fotos.

   Kartentitel in Hellgelb #f0e6b1 stehen auf Fotos, abgedunkelt nur durch
   den Verlauf am Kartenfuss. Laeuft ein Titel ueber mehrere Zeilen oder ist
   die Karte niedrig, reicht er in helle Bildbereiche. Betroffen sind die
   Zimmerkarten der Startseite, das Kartenraster /locations/, die Zimmerkarten
   /hotel/ und die Karten am Seitenende der Leistungs- und Location-Seiten.

   Hinter dem Titel liegt dieselbe Flaeche wie bei den Kopftexten (B-24):
   Dunkelgruen zu 80 Prozent, gerundet, als eigene Ebene hinter dem
   Textblock der Karte. Sie waechst mit dem Titel; Schrift und Zeilenfall
   bleiben unveraendert. Selbst ueber einem weissen Bildpunkt ergibt
   Hellgelb darauf 4,83:1.

   Gemessen an 38 Kartentiteln ueber zehn Stufen (Telefon bis Desktop,
   Zoom 200 und 400 Prozent), je hellster Bildpunkt unter jeder Zeile:
   vorher bis 1,00:1 und 190 von 380 Werten unter 3:1, nachher mindestens
   4,86:1.

   WCAG 1.4.3 */
.tmb.tmb-content-overlay .t-overlay-text .t-entry:has(> .t-entry-title) {
	position: relative;
	isolation: isolate;
}

.tmb.tmb-content-overlay .t-overlay-text .t-entry:has(> .t-entry-title)::before {
	content: "";
	position: absolute;
	inset: -12px -20px;
	background-color: rgba(0, 73, 30, 0.8);
	border-radius: 28px;
	z-index: -1;
	pointer-events: none;
}


/* B-69 Kartentitel im Locations-Karussell: Fokus- und Zeigerzustand.

   Das Theme faerbt die Titel beim Zeigen und bei jedem Fokus (:focus, also
   auch nach Mausklick oder Fokusrueckgabe) Rosa #f5c5db; auf Creme ergibt
   das 1,39:1. Der Titel bleibt Dunkelgruen #00491e (9,79:1) und wird
   unterstrichen - dieselbe Kennzeichnung wie bei Fliesstextlinks (B-01).

   Der Karussellrahmen schneidet ueberstehenden Inhalt ab. Der Fokusring aus
   B-03 reicht 6 px ueber den Link hinaus und fehlte unten zu 5,6 bis 5,8 px.
   6 px Abstand unter dem Titel halten ihn sichtbar; die Karte wird dadurch
   6 px hoeher. Beim Fokussieren rollt der Rahmen den Link nur bis an den
   Rand; 8 px seitlicher Abstand halten den Ring auch an der aeusseren Karte
   sichtbar. Auf Tablets hochkant fuellt der Titel mit dem Schriftgrad aus
   B-75 die Karte bis an den Rahmen, dort rollt nichts; 6 px Innenabstand
   seitlich halten den Ring sichtbar (vorher bis 5,9 px abgeschnitten), ein
   Titel laeuft dadurch hoechstens eine Zeile laenger.

   WCAG 1.4.3, 2.4.7 */
.owl-carousel .tmb-carousel.tmb-content-under .t-entry-title a:is(:hover, :focus) {
	color: #00491e !important;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.15em;
}

.owl-carousel .tmb-carousel.tmb-content-under .t-entry-text-tc > .t-entry {
	padding-bottom: 6px;
}

.owl-carousel .tmb-carousel.tmb-content-under .t-entry-title a {
	scroll-margin-left: 8px;
	scroll-margin-right: 8px;
}

@media (min-width: 500px) and (max-width: 1023px) and (min-height: 501px) and (pointer: coarse) and (hover: none) {
	.owl-carousel .tmb-carousel.tmb-content-under .t-entry-text-tc > .t-entry {
		padding-left: 6px;
		padding-right: 6px;
	}
}


/* B-70 Ueberschrift der Trefferliste in der Hausschrift.

   "Ergebnisse fuer: ..." stand als einziger Seitentitel in der Systemschrift
   (Staerke 900, gemischte Schreibung). Alle uebrigen Seitentitel stehen in
   Unbounded 800 versal. Der Schriftgrad folgt B-27 und B-32 und bleibt
   unveraendert. Die Hausschrift laeuft breiter: bei 320 px "Ergebnisse
   fuer: Catering" drei statt zwei Zeilen. Ein langer Suchbegriff bricht am
   Rand um (B-65), nichts wird abgeschnitten. Die Schriftklasse des Themes
   traegt !important.

   Gestaltung: Harmonisierung */
body.search h1.header-title {
	font-family: Unbounded, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
	font-weight: 800;
	text-transform: uppercase;
}


/* B-71 Gestapelte Schaltflaechen in voller Spaltenbreite.

   Unter 570 px stehen Schaltflaechenpaare untereinander, jede so breit wie
   ihre Beschriftung (bei 390 px etwa 311 und 224 px). Gestapelte
   Schaltflaechen fuellen jetzt die Spalte und haben eine gemeinsame Kante
   (bei 390 px beide 318 px); einzelne Schaltflaechen behalten ihre Breite.
   Abstaende wie in B-60, Zeilenfall unveraendert. Auf der Startseite
   stehen die Schaltflaechen ab 375 px nebeneinander (B-58) und bleiben dort
   unveraendert.

   Gestaltung: Harmonisierung */
@media (max-width: 569px) {
	body:not(.home) .uncont > .btn-container:has(+ .btn-container) > a.btn,
	body:not(.home) .uncont > .btn-container + .btn-container > a.btn {
		min-width: 100%;
	}
}

@media (max-width: 374px) {
	body.home .uncont > .btn-container:has(+ .btn-container) > a.btn,
	body.home .uncont > .btn-container + .btn-container > a.btn {
		min-width: 100%;
	}
}


/* B-72 Druckbewegung der Absendeschaltflaeche.

   Die Seiten-CSS des Masters (/kontakt/) setzt beim Zeigen einen flacheren
   Innenschatten (0,1 statt 0,275 em) und eine Verschiebung um 2 px nach
   unten, ohne !important; ihre eigene Grundregel und B-16 tragen !important
   und gewannen, die Schaltflaeche blieb unbewegt. Die Bewegung gilt jetzt
   fuer jedes Contact-Form-7-Formular. Liegt zugleich der Tastaturfokus auf
   der Schaltflaeche, bleibt der hellgelbe Aussenring aus B-16 erhalten.
   Bei reduzierter Bewegung (prefers-reduced-motion) entfaellt die
   Verschiebung, der Schatten wechselt ohne Uebergang.

   Zur Spezifitaet: Die Grundregel des Masters liegt bei (0,3,1) mit
   !important und wird nach a11y.css geladen; die Zustandsregeln hier liegen
   darueber. Sie stehen nach B-16, dessen Fokusregel dieselbe Spezifitaet
   hat.

   Gestaltung: Harmonisierung (Meilenstein Z) */
body .wpcf7 form .wpcf7-submit:hover,
body .wpcf7 form input.wpcf7-submit:hover {
	box-shadow: inset 0 -0.1em 0.1px 0 #000 !important;
	transform: translateY(2px) !important;
}

body .wpcf7 form .wpcf7-submit:hover:focus-visible,
body .wpcf7 form input.wpcf7-submit:hover:focus-visible {
	box-shadow: inset 0 -0.1em 0.1px 0 #000, 0 0 0 6px #f0e6b1 !important;
}

@media (prefers-reduced-motion: reduce) {
	body .wpcf7 form.wpcf7-form input.wpcf7-submit,
	body .wpcf7 form.wpcf7-form input.wpcf7-submit:hover {
		transform: translateY(0) !important;
		transition: none !important;
	}
}


/* B-73 Seitenrand auf Telefonen 24 px.

   Unter 500 px standen Inhalt und Logo 36 px vom Rand, die Striche des
   Menueschalters 40 px - zwei Fluchten. Der Rand sinkt auf 24 px; Inhalt,
   Suchtitel, Logo und Menueschalter stehen in einer Flucht.

     Textspalte      320 px: 248 -> 272 px    390 px: 318 -> 342 px
     Datenschutz     320 px: 22 -> 24 Zeichen je Zeile, Seite 9 Prozent kuerzer
     Formularfelder  320 px: 176 -> 200 px    390 px: 246 -> 270 px

   Die Ebene hinter den Kopftexten (B-24) ragt 16 statt 28 px ueber den
   Text hinaus, ihre Aussenkante bleibt 8 px vom Rand. Der Radius sinkt im
   selben Mass von 48 auf 36 px; die Rundung bleibt damit gleichlaeufig zum
   Textblock. Im Kopfslider der Startseite gleicht der Aussenabstand den
   kleineren Ueberstand aus; die sichtbare Oberkante des Kastens bleibt,
   wo B-25 sie setzt (58svh, bei 390 x 844 px 489 px).

   Der Menueschalter steht 9 px vom Rand, sein Fokusring (B-03, 6 px)
   endet 3 px davor.

   Reihen ohne Seitenrand (Karten ueber die volle Breite) und das
   Innenpolster von Karten und Formularen bleiben unveraendert. Die
   Theme-Regeln fuer Logo, Menueschalter und Suchkopf setzen !important.
   Steht nach B-24 und B-25.

   Gestaltung: Harmonisierung */
@media (max-width: 499px) {
	:is(.main-container, .block-wrapper-parent, .has-unblock) .row-container .row-parent:not([class*="-h-padding"]),
	:is(.main-container, .block-wrapper-parent, .has-unblock) .row-container .row:is(.single-h-padding, .double-h-padding) {
		padding-left: 24px;
		padding-right: 24px;
	}

	#page-header .header-wrapper .header-content-inner {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}

	#logo-container-mobile {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}

	body .mobile-menu-button {
        margin-top: 50px !important;
		margin-right: 24px !important;
	}

	.vc_row:has(> .row-background .block-bg-overlay) .uncont:not(.uncont *)::before {
		inset: -16px;
		border-radius: 36px;
	}

	body.home #page-header .row-slider .uncont:not(.uncont *) {
		margin-top: calc(58vh - 56px) !important;
		margin-top: calc(58svh - 56px) !important;
	}
}


/* B-74 Kopfslider der Startseite im Telefon-Querformat.

   Der Textkasten hing am Fuss der Folie; seine Lage folgte der Textmenge.
   Bei 844 x 390 px begann er je Folie zwischen 59 und 120 px, auf der
   vierten Folie 9 px oberhalb der Unterkante des Logos und unter Logo und
   Menueschalter; die Ueberschrift sprang zwischen 87 und 148 px. Bei
   568 x 320 px begann er bei 185 px.

   Im Telefon-Querformat beginnt der Kasten auf allen Folien bei 87 px,
   19 px unter dem Logo (B-34, Unterkante 68 px): 72 px Reihenpolster
   + 32 px Aussenabstand - 16 px Ueberstand der Ebene aus B-24, Radius
   36 px wie in B-73. Die Ueberschrift steht auf allen Folien bei 103 px.
   Der Abstand vor der Schaltflaeche sinkt von 36 px (unter 570 px) bzw.
   54 px auf 24 px; die Schaltflaeche steht 52 bis 191 px unter der Falz
   statt 127 bis 275 px. Die Schrift bleibt unveraendert.

   Gestaltung: Harmonisierung */
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
	body.home #page-header .row-slider .uncell:not(.uncont *) {
		vertical-align: top;
	}

	body.home #page-header .row-slider .owl-item .uncont:not(.uncont *) {
		margin-top: 32px !important;
	}

	body.home #page-header .row-slider .owl-item .uncont:not(.uncont *)::before {
		inset: -16px;
		border-radius: 36px;
	}

	body.home #page-header .row-slider .owl-item .uncont > .btn-container {
		margin-top: 24px !important;
	}
}


/* B-77 Schaltflaeche zum Anhalten und Fortsetzen von Karussells (C-29).

   Runde Flaeche wie der Menueschalter, Rosa mit dunkelgruenem Symbol
   (7,05:1), 44 x 44 px. Das Symbol wechselt mit dem Zustand
   (data-imh-zustand): zwei Balken, solange das Karussell laeuft, ein Dreieck,
   solange es steht.

   Der transparente Rahmen wird bei erzwungenen Farben als Umriss sichtbar.
   Der Fokusring ist der aus B-03; B-03 setzt dabei einen Eckenradius von
   2 px, der hier auf rund zurueckgenommen wird.

   WCAG 2.2.2, 2.5.8, 1.4.11, 2.4.7 */
button.imh-selbstlauf {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 50%;
	background: #f5c5db;
	color: #00491e;
	line-height: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

button.imh-selbstlauf svg {
	display: block;
	width: 18px;
	height: 18px;
	fill: currentColor;
	pointer-events: none;
}

button.imh-selbstlauf[data-imh-zustand="laeuft"] .imh-selbstlauf-start,
button.imh-selbstlauf[data-imh-zustand="steht"] .imh-selbstlauf-pause {
	display: none;
}

button.imh-selbstlauf[data-imh-zustand]:focus-visible {
	border-radius: 50%;
}

/* B-77 Kopfslider der Startseite: Schaltflaeche und Folienpunkte als Gruppe
   mittig. Die Punktzeile ist zentriert und ueber die ganze Breite gelegt;
   ein linker Innenabstand von 56 px (Schaltflaeche 44 px + Abstand 12 px)
   rueckt die Punkte um 28 px nach rechts. Die Schaltflaeche steht 12 px vor
   dem ersten Punkt auf dessen Mittellinie. Linke Kante und Mittellinie der
   Punkte setzt C-29 als --imh-punkte-links und --imh-punkte-mitte; die
   Rueckfallwerte entsprechen vier Folien. Unabhaengig von der Folienzahl
   liegt die Mitte der Gruppe dort, wo vorher die Mitte der Punkte lag.

   Die Punktzeile setzt das Theme mit (0,4,0) ohne Innenabstand; die
   Kennung #page-header hebt die Regel darueber. */
#page-header .owl-carousel[data-imh-schalter] > .owl-dots {
	padding-left: 56px;
}

.owl-carousel > button.imh-selbstlauf {
	position: absolute;
	z-index: 2;
	left: calc(var(--imh-punkte-links, calc(50% - 39px)) - 56px);
	bottom: calc(var(--imh-punkte-mitte, 30px) - 22px);
}


/* B-78 Uebrige Karussells: Schaltflaeche in der Pfeilzeile (C-30).

   Die Pfeilzeile unter dem Karussell ist eine zentrierte Flexzeile; die
   Schaltflaeche steht als erstes Element darin, vor "Zurueck" und "Weiter",
   und bildet mit den Pfeilen eine mittige Gruppe. Groesse und Abstand wie
   die Pfeile: 46 px Kreis, 18 px zwischen den Kreisen.

   Farben wie die Pfeile daneben, weil Rosa auf Creme nur 1,39:1 erreicht:
   auf hellem Grund Dunkelgruen mit hellgelbem Symbol (Flaeche gegen Creme
   9,79:1, Symbol 8,45:1), auf dunklem Grund (.style-dark) Hellgelb mit
   dunkelgruenem Symbol (Flaeche gegen Dunkelgruen 8,45:1, Symbol 8,45:1).

   Ohne Pfeilzeile steht die Schaltflaeche in einer eigenen, zentrierten
   Zeile unter dem Karussell.

   Das Theme nimmt der Pfeilzeile die Zeigereingaben (pointer-events: none)
   und gibt sie nur den Pfeilen zurueck; die Schaltflaeche erhaelt sie
   ebenso, damit sie per Maus und Beruehrung bedienbar ist.

   WCAG 2.2.2, 2.5.8, 1.4.11 */
.uncode-owl-nav-safe > button.imh-selbstlauf,
.imh-selbstlauf-zeile > button.imh-selbstlauf {
	width: 46px;
	height: 46px;
	margin: 0 9px;
	background: #00491e;
	color: #f0e6b1;
}

.uncode-owl-nav-safe > button.imh-selbstlauf {
	pointer-events: auto;
}

.style-dark .uncode-owl-nav-safe > button.imh-selbstlauf,
.style-dark .imh-selbstlauf-zeile > button.imh-selbstlauf {
	background: #f0e6b1;
	color: #00491e;
}

.imh-selbstlauf-zeile {
	display: flex;
	justify-content: center;
	margin-top: 18px;
}


/* B-80 Leichte Sprache: keine Silbentrennung.
   Gilt im Bereich /leichte-sprache/ (Body-Klasse aus A-14). hyphens: none
   ignoriert auch die weichen Trennzeichen aus A-13. B-65 und die
   Schaltflaechenregeln setzen hyphens: manual bzw. auto mit !important; die
   Schaltflaechen sind deshalb eigens aufgefuehrt (hoehere Spezifitaet).
   Empfehlung Leichte Sprache */
body.imh-leichte-sprache *,
body.imh-leichte-sprache *::before,
body.imh-leichte-sprache *::after,
body.imh-leichte-sprache a.custom-link.btn {
	-webkit-hyphens: none !important;
	hyphens: none !important;
}


/* B-81 Leichte Sprache: Zeilenhoehe 1,5.
   Gilt im Seitenkopf und im Inhalt von /leichte-sprache/ (Body-Klasse aus
   A-14) fuer Ueberschriften, Absaetze, Listen, Zitate, Beschriftungen und
   Schaltflaechen samt Textauszeichnung. Die Theme-Regeln fuer Ueberschriften
   und Schaltflaechen setzen line-height teils mit !important; die ID im
   Selektor haelt die Regel darueber.
   Empfehlung Leichte Sprache */
body.imh-leichte-sprache :is(#page-header, .post-content) :is(h1, h2, h3, h4, h5, h6, p, li, dt, dd, blockquote, label, .btn),
body.imh-leichte-sprache :is(#page-header, .post-content) :is(h1, h2, h3, h4, h5, h6, p, li, dt, dd, blockquote, label, .btn) :is(a, span, strong, em) {
	line-height: 1.5 !important;
}


/* B-82 Scroll-Pfeil im Seitenkopf auf allen Breiten.

   Der Pfeil am Fuss des Seitenkopfs (im Seitenbaukasten eingeschaltet,
   auf 28 der 32 geprueften Seiten; nicht auf Startseite, Stellenliste,
   404- und Suchseite) war unter 960 px ausgeblendet. Er steht jetzt auf
   allen Breiten, weiterhin 10 px ueber der Unterkante des Seitenkopfs.
   Liegt der Kopf hoeher als das Fenster (Telefon quer, 320 x 568 px bei
   langen Kopftexten, Zoom), erscheint er beim Scrollen am Kopfende.

   Flaeche: Das Symbol (45 px, sichtbarer Winkel 25 x 15 px) stand in
   einem 29 x 47 px grossen Block, der fuer ein 24-px-Symbol 6 px links der
   Mitte verankert ist; der Winkel lag dadurch 8,5 px rechts der
   Seitenmitte. Mit Textabstaenden wuchs der Block auf 34 x 68 px und
   ragte auf den Hotelseiten bei Telefonbreiten und Zoom 4,5 px in die
   Schaltflaeche "Zimmer reservieren". Jetzt 44 x 47 px, fest und
   mittig; das Symbol bleibt gleich gross, steht auf der Seitenachse und
   in der Hoehe auf 1 px an seiner Stelle. Abstand zur naechsten
   Schaltflaeche mindestens 16 px, zum naechsten Text mindestens 36 px,
   auch mit Textabstaenden.

   Kontrast: Hellgelb #f0e6b1 auf Dunkelgruen #00491e 8,45:1, im
   Zeigerzustand (Deckkraft 0,8) 6,0:1. Der Verlauf deckt am Fuss des
   Kopfs vollstaendig; unter der gesamten Flaeche liegt auf allen 28
   Seiten und allen Breiten einfarbiges Dunkelgruen. Die Unterkante der
   Ebene aus B-24 endet mindestens 4 px ueber dem Symbol und ist dort
   nicht sichtbar (gleiche Farbe).

   Das geoeffnete Menue deckt den Pfeil ab; der Nach-oben-Schalter steht
   in einer anderen Spalte.

   Bewegung: Die Verschiebung um 3 px beim Zeigen entfaellt bei
   "Bewegung reduzieren". Aus dem Barrierefreiheitsbaum nimmt ihn C-31.

   Die Theme-Regel zum Ausblenden hat (0,2,0); die Kennung #page-header
   hebt die Regel darueber, ohne !important.

   WCAG 2.5.8, 1.4.11, 2.3.3; Gestaltung: Wunsch des Auftraggebers */
#page-header .header-wrapper .header-scrolldown {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 47px;
	margin-left: -22px;
}

@media (prefers-reduced-motion: reduce) {
	.header-wrapper .header-scrolldown:hover {
		transform: none;
	}
}


/* B-83 /hotel/: "Zimmer reservieren" ab 1366 px rechts neben dem Text.

   Der Kopfkasten von /hotel/ und den drei Zimmerseiten (gemeinsamer
   Kopfblock) teilt Absatz und Schaltflaeche in drei innere Spalten: 2/12
   leer, 8/12 Absatz mit Schaltflaeche darunter, 2/12 leer. Die rechte Spalte
   (Einstellung "Mitte/rechts") ist bei 1440 bis 1920 px mit 118 bis 177 px
   Inhalt schmaler als die Schaltflaeche (287 px); sie bleibt leer.

   Ab 1366 px uebernimmt die Textspalte die leere rechte Spalte (10/12). Absatz
   und Schaltflaeche stehen nebeneinander, 36 px Abstand, die Schaltflaeche
   mittig zum Absatz und rechtsbuendig mit der Ueberschrift. Der Absatz wird
   schmaler: 1366 px 629 -> 481 px, 1440 px 667 -> 529 px (je 4 Zeilen, rund
   50 Zeichen, wie heute zwischen 1100 und 1365 px), 1920 px 923 -> 849 px
   (3 Zeilen). Schmaler als 1340 px liefe er auf 5 und mehr Zeilen mit
   hoechstens 40 Zeichen; darunter bleibt die Schaltflaeche unter dem Text
   (B-84), ebenso auf Tablets quer (1024, 1180 px) und bei Zoom 200 Prozent.

   Die Schaltflaeche bleibt in ihrer Spalte und im Kasten aus B-24: Fokusring
   22 px vor der rechten Kastenkante. Mit Textabstaenden nach 1.4.12 waechst
   sie auf 327 px, der Absatz laeuft auf bis zu 6 Zeilen, nichts wird
   abgeschnitten.
   Quelltext-, Lese- und Tabfolge unveraendert (Text, dann Schaltflaeche).

   Das Theme setzt den oberen Aussenabstand an .btn-container.btn-inline mit
   !important; die Regel hebt B-84 fuer diese Anordnung auf.

   Gestaltung (Wunsch Auftraggeber); WCAG 1.4.10, 1.4.12 */
@media (min-width: 1366px) {
	#page-header .row-inner > .col-lg-8:has(> .uncol .uncont > .uncode_text_column + .btn-container):has(+ .col-lg-2 .uncont:empty) {
		width: 83.33333333%;
	}

	#page-header .row-inner > .col-lg-8:has(> .uncol .uncont > .uncode_text_column + .btn-container) + .col-lg-2:has(.uncont:empty) {
		display: none;
	}

	#page-header .row-inner > .col-lg-8:has(+ .col-lg-2 .uncont:empty) .uncont:has(> .uncode_text_column + .btn-container) {
		display: flex;
		align-items: center;
		column-gap: 36px;
	}

	#page-header .row-inner > .col-lg-8:has(+ .col-lg-2 .uncont:empty) .uncont > .uncode_text_column:has(+ .btn-container) {
		flex: 1 1 auto;
		min-width: 0;
	}

	#page-header .row-inner > .col-lg-8:has(+ .col-lg-2 .uncont:empty) .uncont > .uncode_text_column + .btn-container {
		flex: 0 0 auto;
		margin-top: 0 !important;
	}
}


/* B-84 Kopfkaesten: 36 px zwischen Text und Schaltflaeche.

   In Kopfkaesten ausserhalb des Sliders (derzeit /hotel/ und die drei
   Zimmerseiten) stand die Schaltflaeche 1 px (ab 570 px) bzw. 10 px
   (Telefon) unter dem Absatz, 5 bzw. 14 px unter der Schrift; ab 570 px lag
   der Fokusring (B-03, 6 px) ueber der letzten Textzeile. Der Kopfslider der
   Startseite (Telefon) und die Leistungsseiten (B-60) halten 36 px.

   Jetzt ueberall, wo die Schaltflaeche unter dem Text steht, 36 px: Telefon
   hoch und quer, Tablet, Desktop unter 1366 px, Zoom 200 und 400 Prozent.
   Gemessen 37 px bis zur Schaltflaeche, 41 px bis zur Schrift, wie im
   Kopfslider (37/40). Der Kasten waechst um 36 px (Telefon 27 px); wo er am
   Fuss des Kopfbilds steht, rueckt die Ueberschrift entsprechend hoeher.

   Das Theme setzt den Abstand an .btn-container.btn-inline mit !important
   (0, auf Telefonen 9 px). Der Kopfslider behaelt seine Werte (B-74).

   Gestaltung: Harmonisierung; WCAG 2.4.7 */
#page-header .uncont > .uncode_text_column + .btn-container:not(.owl-item *) {
	margin-top: 36px !important;
}


/* B-85 Kopfslider der Startseite: Abstand der Gruppe zum unteren Rand.

   Anhalteschaltflaeche und Folienpunkte (B-77) standen 8 px (Schaltflaeche)
   bzw. 18 px (Punkte) ueber der Unterkante der gruenen Sliderflaeche, am
   Uebergang zum cremefarbenen Seitengrund - auf allen Stufen.

   Die Gruppe rueckt 16 px hoeher: 24 px bis zur Kante, wie der Seitenrand
   auf Telefonen (B-73) und der Abstand vor der Schaltflaeche im
   Telefon-Querformat (B-74). Damit sie nicht an Kasten und Folienschaltflaeche
   heranrueckt, erhaelt der Folieninhalt unten 16 px mehr Abstand; der Abstand
   Folienschaltflaeche -> Gruppe bleibt je Folie und Stufe unveraendert
   (mindestens 21 px). Wo der Slider mit dem Inhalt waechst (Telefon hoch und
   quer, 1024 x 768, Zoom 200 und 400 Prozent), wird er 16 px hoeher und die
   Gruppe bleibt an ihrer Stelle; wo er die Fensterhoehe fuellt (Tablet
   hochkant, 1180 x 820, Desktop), ruecken Kasten und Text 16 px nach oben.

   Punkte weiter 24 x 24 px, Untergrund der Gruppe deckend Dunkelgruen
   (Rosa 7,05:1). Die Lage der Schaltflaeche misst C-29 an den Punkten; der
   Rueckfallwert fuer die ausgeblendete Fassung steigt entsprechend von 30
   auf 46 px (B-77).

   Gestaltung (Wunsch Auftraggeber) */
#page-header .owl-carousel[data-imh-schalter] > .owl-dots {
	bottom: 16px;
}

.owl-carousel > button.imh-selbstlauf {
	bottom: calc(var(--imh-punkte-mitte, 46px) - 22px);
}

#page-header .row-slider .owl-carousel[data-imh-schalter] .owl-item .uncont:not(.uncont *) {
	margin-bottom: 16px;
}


/* B-86 Schaltflaechen auf Telefonen mittig.

   Auf Telefonen standen Schaltflaechen je nach Spalte links oder mittig.
   In Spalten, die auf Tablet und Desktop linksbuendig sind und es seit
   B-31 auch auf dem Telefon sind, standen sie links unter dem Text:
   "Mehr zu ..." auf /leistungen/ und am Ende der Leistungs- und
   Location-Seiten, "Jetzt reservieren" auf /leistungen/lazy-sunday/,
   "Zimmer reservieren" im Kopfkasten der vier Hotelseiten, im
   Querformat zusaetzlich die Paare auf /leistungen/hochzeiten/ und
   /leistungen/familientafel/. Abstand der Schaltflaechenmitte von der
   Spaltenmitte:

     320 x 568    bis  30 px     16 Schaltflaechen
     390 x 844    bis  65 px     21 Schaltflaechen
     430 x 932    bis  85 px     21 Schaltflaechen
     568 x 320    bis 127 px     21 Schaltflaechen
     844 x 390    bis 242 px     24 Schaltflaechen
     932 x 430    bis 286 px     24 Schaltflaechen

   Auf Telefonen steht jetzt jede Schaltflaeche mittig in ihrer Spalte,
   ein Paar nebeneinander als Gruppe. Text und Ueberschriften bleiben
   linksbuendig, auch im Kopfkasten. Groesse, Zeilenfall, senkrechte
   Abstaende und Tabreihenfolge bleiben unveraendert. Nicht beruehrt:
   Schaltflaechen in voller Spaltenbreite (B-71), die Absendeschalt-
   flaechen der Formulare (volle Breite, B-16, B-17), bereits mittige
   Schaltflaechen (Kopfslider, Startseite mit B-58, 404-Seite).

   Telefon heisst unter 570 px oder Querformat mit grobem Zeiger bis
   500 px Hoehe (wie B-73, B-74). Gezoomte Desktopfenster unter 570 px
   (400 Prozent: 320 px) folgen der Telefondarstellung. Tablet und
   Desktop bleiben unveraendert.

   Ab 570 px (Telefon quer) stehen Schaltflaechen mit .btn-inline als
   Inline-Block in der Textzeile der Spalte. Die Spalte wird dort mittig
   ausgerichtet, ihre uebrigen Inhalte linksbuendig; die Rueckstellung
   hat die Spezifitaet null, eigene Ausrichtungen der Inhalte bleiben
   wirksam. Der Abstand von 9 px zwischen den Schaltflaechen eines Paars
   steht beidseitig an jeder Schaltflaeche, damit auch ein umbrechendes
   Paar in jeder Zeile mittig steht.

   Hebt fuer Schaltflaechen die linke Ausrichtung aus B-31 auf. Die
   Regel fuer erweiterte Schaltflaechencontainer (Flexbox) spiegelt die
   Theme-Regeln und B-31, beide mit !important.

   Gestaltung: Harmonisierung */
@media (max-width: 569px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
	.btn-container {
		text-align: center;
	}

	body .wpb_column .uncont > .btn-container.btn-container-advanced:not(.uncode-flexbox *) {
		margin-left: auto !important;
		margin-right: auto !important;
		justify-content: center !important;
	}
}

@media (min-width: 570px) and (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
	.row div[class*=col-lg-].align_left > .uncol > .uncoltable > .uncell > .uncont:has(> .btn-container.btn-inline) {
		text-align: center;
	}

	:where(.row div[class*=col-lg-].align_left > .uncol > .uncoltable > .uncell > .uncont:has(> .btn-container.btn-inline)) > :where(:not(.btn-container)) {
		text-align: left;
	}

	.row div[class*=col-lg-].align_left > .uncol > .uncoltable > .uncell > .uncont > .btn-container.btn-inline {
		padding-left: 9px;
		padding-right: 9px;
	}
}


/* B-87 Groessen aus dem Seitenbaukasten wachsen beim Zoomen mit (C-33).

   Seitentitel, Titelsaetze, Abschnittsueberschriften und die Kontaktzeilen
   der Startseite haengen im Seitenbaukasten an der Fensterbreite (clamp mit
   vw-Anteil). Browser-Zoom verkleinert die Fensterbreite in CSS-Pixeln im
   selben Mass, in dem er die Schrift vergroessert; bei 200 Prozent aus
   1280 px standen diese Texte bei 100 bis 125 Prozent ihrer Groesse ohne
   Zoom (Seitentitel 64 -> 32 CSS-px).

   a11y.js C-33 erkennt den Zoom und setzt je Element --imh-zoomschrift:
   Groesse ohne Zoom mal Zoomfaktor, hoechstens das Doppelte, nie kleiner als
   bisher. Ergebnis bei 200 Prozent aus 1280, 1440 und 1920 px: 200 Prozent.
   Ohne Zoom, auf Touchgeraeten und ohne Skript bleibt alles unveraendert;
   Anzeige-Ueberschriften folgen weiter B-64.

   Links in diesen Zeilen tragen im Seitenbaukasten eine eigene Groesse mit
   Vorrang; sie folgen der Zeile. Die Kartentitel stehen in B-27 mit
   !important (0,2,0); der Selektor mit Attribut liegt darueber, die Regel
   ist von der Reihenfolge unabhaengig.

   WCAG 1.4.4 */
@media (pointer: fine) {
	h1[data-imh-zoomschrift],
	h2[data-imh-zoomschrift],
	h3[data-imh-zoomschrift],
	h4[data-imh-zoomschrift],
	p[data-imh-zoomschrift],
	div[data-imh-zoomschrift],
	.t-entry-title.custom[data-imh-zoomschrift] {
		font-size: var(--imh-zoomschrift) !important;
	}

	:is(h1, h2, h3, h4, p, div)[data-imh-zoomschrift] a {
		font-size: inherit !important;
	}
}

/* B-87 Rechtstext-h1 zwischen 500 und 959 px.

   Die Hauptueberschrift der Rechtstexte (.uncode_text_column > h1,
   "Datenschutzerklaerung") faellt unter 960 px auf die Theme-Stufe 28 px;
   bei 200 Prozent aus 1280 px waren das 133 Prozent. Wie B-32 fuer Stellen-
   und Suchtitel bleibt sie bis 500 px bei 42 px. Nur feiner Zeiger:
   Tablets folgen B-75, Telefone B-27.

   WCAG 1.4.4 */
@media (min-width: 500px) and (max-width: 959px) and (pointer: fine) {
	.uncode_text_column > h1 {
		font-size: 2.625rem;
	}
}


/* B-89 Umbrechende Schaltflaechenpaare: 18 px zwischen den Zeilen.

   Ab 570 px stehen gepaarte Schaltflaechen (.btn-inline) als Inline-Block
   in einer Textzeile der Spalte. Reicht die Spalte nicht, bricht die
   zweite in eine neue Zeile um; zwischen den Zeilen lagen 2 px (Theme:
   oberer Aussenabstand 0 mit !important). Der Fokusring (B-03, 6 px) der
   einen Schaltflaeche lag dabei auf der anderen. Betroffen:
   /leistungen/hochzeiten/ ("Hochzeitsmappe" / "E-Mail schreiben") und
   /leichte-sprache/startseite/ im Telefon-Querformat, auf Tablets
   hochkant und bei Zoom 200 Prozent; mit Textabstaenden nach 1.4.12
   zusaetzlich Paare auf Leistungs- und Location-Seiten bis 1440 px.

   Zwischen den Zeilen stehen jetzt 20 px, wie zwischen gestapelten
   Schaltflaechen auf den Leistungsseiten (B-60: 18 px Aussenabstand,
   sichtbar 20 px). Gilt auf allen Breiten ab 570 px; darunter stapelt
   das Theme die Paare als Block, die Abstaende regeln dort B-58 und
   B-60. Ausrichtung unveraendert: mittig je Zeile nur auf Telefonen
   (B-86 und Nachtrag).

   Ein Zeilenabstand (row-gap) setzt einen eigenen Flex- oder
   Grid-Behaelter fuer die Schaltflaechen voraus; den gibt es nicht, die
   Schaltflaechen sind Geschwister von Text und Abstandselementen im
   selben Spaltenblock. Deshalb traegt jede Schaltflaeche des Paars oben
   18 px Aussenabstand; im Inline-Block erhoeht das jede Zeile um 18 px,
   bei einem Paar in zwei Zeilen also auch den Abstand dazwischen. Das
   Element vor dem Paar (Abstandselement) gibt unten 18 px ab, damit
   bleibt die erste Zeile, wo sie war. Ergebnis: nebeneinander stehende
   Paare, Abstand Text -> Schaltflaeche und Schaltflaeche -> naechster
   Abschnitt unveraendert; nur bei einem umbrechenden Paar rueckt die
   zweite Zeile und alles darunter 18 px tiefer.

   Nur Paare mit einem Element davor.

   Gestaltung: Harmonisierung; WCAG 2.4.7 */
@media (min-width: 570px) {
	.uncont > :not(.btn-container) + .btn-container.btn-inline:has(+ .btn-container.btn-inline),
	.uncont > :not(.btn-container) + .btn-container.btn-inline + .btn-container.btn-inline {
		margin-top: 18px !important;
	}

	.uncont > :not(.btn-container):has(+ .btn-container.btn-inline + .btn-container.btn-inline) {
		margin-bottom: -18px;
	}
}


/* B-86 Nachtrag: umbrechende Schaltflaechenpaare in jeder Spalte mittig.

   Das Theme setzt den Abstand von 9 px zwischen gepaarten Schaltflaechen
   einseitig (erste rechts, zweite links). Bricht das Paar im
   Telefon-Querformat um, steht jede Zeile 4,5 px neben der Mitte. B-86
   setzt den Abstand bisher nur in linksbuendigen Spalten beidseitig;
   in mittigen Spalten blieb der Versatz, gemessen auf
   /leichte-sprache/startseite/ bei 844 x 390 (und 932 x 430 mit
   Textabstaenden): "Imhoff bei Facebook ansehen" -4,5 px,
   "Imhoff bei Instagram ansehen" +4,5 px.

   Jetzt in jeder Spalte beidseitig 9 px an jeder Schaltflaeche eines
   Paars: umbrechende Paare stehen je Zeile mittig, nebeneinander
   stehende Paare behalten Lage und Abstand (18 px). Nur Paare; einzelne
   Schaltflaechen bleiben unberuehrt.

   Die Zeile eines Paars wird dadurch 18 px laenger. Ein Paar mit
   weniger als 18 px Luft bricht um: /leichte-sprache/startseite/ bei
   932 x 430 in WebKit (17 px Luft). Es steht dann wie bei 844 x 390 in
   zwei mittigen Zeilen. Setzt B-89 voraus, sonst liegen umbrechende
   Zeilen 2 px auseinander.

   Gestaltung: Harmonisierung */
@media (min-width: 570px) and (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
	.uncont > .btn-container.btn-inline:has(+ .btn-container.btn-inline),
	.uncont > .btn-container.btn-inline + .btn-container.btn-inline {
		padding-left: 9px;
		padding-right: 9px;
	}
}


/* B-95 Verweiskacheln unter 300 px: Innenabstand 24 px.

   Die Verweiskacheln am Ende der Leistungs- und Location-Seiten
   (Metro-Raster, Ueberlagerung mit doppeltem Innenabstand 54 px) sind beim
   iPad-Seitenzoom 300 Prozent hochkant 256 CSS-px breit und 176 CSS-px hoch
   und schneiden ueberstehenden Inhalt ab. Mit Textabstaenden (1.4.12) lag
   die letzte Titelzeile von "Weitere Raeumlichkeiten"
   (/locations/cafe-kohlenwaesche/) 13 px unter der Kachelkante. Mit 24 px
   Innenabstand steht der Titel ganz in der Kachel.

   Nur unter 300 px bei grobem Zeiger (iPad-Seitenzoom, sehr schmale
   Telefone). Telefone ab 320 px, Tablets und Desktop bleiben unveraendert;
   die Kacheln mit einfachem Innenabstand (36 px) ebenso.

   WCAG 1.4.12 */
@media (max-width: 299px) and (pointer: coarse) {
	.isotope-container.style-metro .tmb .t-overlay-text.double-block-padding {
		padding: 24px !important;
	}
}


/* B-01 Nachtrag: Fliesstextlinks auf hellem Grund bei Zeigen und Fokus.

   B-01 regelt nur den Ruhezustand. Beim Zeigen und bei jedem Fokus
   (:focus, also auch nach Mausklick) setzt das Theme mit !important die
   abgedunkelte Akzentfarbe #dcacc2; auf Creme ergibt das 1,80:1, auf
   Weiss 1,96:1.
   Die Schrift bleibt Dunkelgruen #00491e (9,79:1 auf Creme, 10,65:1 auf
   Weiss); die Unterstreichung wird max(2px, 0.15em) stark: 3 px bei
   20 px Schrift, 2 px bei 12 und 13 px. In Ruhe zeichnet der Browser sie
   bei 20 px bereits 2 px stark, 2 px allein aendern dort nichts. Zeigen
   und Fokus zeigen denselben Zustand, der Fokusring aus B-03 bleibt.

   Zur Selektorlaenge: Die Theme-Regel liegt bei (0,9,3). Die Ausnahme
   .btn-text-skin spiegelt ihre Abgrenzung, der Ausschluss .style-dark
   laesst dunkle Spalten in hellen Reihen beim Theme; die Auswahl liegt
   bei (0,11,3). Einwilligungsverweis im Bewerbungsformular: Theme (0,6,3),
   hier (0,7,3). Die Kurzschreibweise text-decoration in B-01 und B-19
   setzt die Linienstaerke mit !important zurueck, deshalb traegt auch die
   Staerke !important. Der Einwilligungsverweis der Kontaktformulare (B-19)
   ist bereits dunkelgruen und erhaelt dieselbe Linienstaerke (0,10,3).
   Links auf dunklem Grund behalten Hellgelb und beim Zeigen Rosa
   (B-01, B-54).

   Gemessen an 128 Fliesstextlinks auf 34 Seiten bei 390 und 1440 px:
   vorher 113 beim Zeigen und im Fokus mit 1,80:1 bzw. 1,96:1, nachher
   alle mindestens 9,79:1. Zeilenfall und Lage unveraendert.

   WCAG 1.4.3, 2.4.7 */
body.textual-accent-color .post-content .style-light .uncode_text_column p:not(.entry-small):not(.panel-title) > a:not(.btn):not(.custom-link):not(.btn-text-skin):not(.style-dark *):is(:hover, :focus),
body.textual-accent-color .post-content .style-light .uncode_text_column p:not(.entry-small):not(.panel-title) > span > a:not(.btn):not(.custom-link):not(.btn-text-skin):not(.style-dark *):is(:hover, :focus),
body.textual-accent-color .post-content .style-light .uncode_text_column p:not(.entry-small):not(.panel-title) > strong > a:not(.btn):not(.custom-link):not(.btn-text-skin):not(.style-dark *):is(:hover, :focus),
body.textual-accent-color .post-content .style-light .uncode_text_column p:not(.entry-small):not(.panel-title) > span > strong > a:not(.btn):not(.custom-link):not(.btn-text-skin):not(.style-dark *):is(:hover, :focus),
body.textual-accent-color .post-content .style-light .uncode_text_column li:not(.entry-small):not(.panel-title) > a:not(.btn):not(.custom-link):not(.btn-text-skin):not(.style-dark *):is(:hover, :focus),
body.textual-accent-color .post-content .style-light .uncode_text_column small:not(.entry-small):not(.panel-title) > a:not(.btn):not(.custom-link):not(.btn-text-skin):not(.style-dark *):is(:hover, :focus),
body.textual-accent-color .post-content .awsm-job-form-inner .awsm-application-form label > a:not(.btn):not(.btn-text-skin):is(:hover, :focus) {
	color: #00491e !important;
	text-decoration-thickness: max(2px, 0.15em) !important;
}

body.textual-accent-color .wpcf7-form small a:not(.btn):not(.custom-link):not(.btn-text-skin):not(.unmenu-block *):not(.entry-small):not(.panel-title):not(.t-entry-member-social):is(:hover, :focus) {
	text-decoration-thickness: max(2px, 0.15em) !important;
}


/* B-01 Nachtrag, Erweiterung: Titellinks auf hellem Grund bei Zeigen und Fokus.

   Stellentitel und "Zur Stellenanzeige" in der Stellenliste sowie die
   Titel der Suchergebnisse stehen in Ruhe in Dunkelgruen #00491e ohne
   Unterstreichung. Beim Zeigen und bei jedem Fokus setzt das Theme Rosa
   #f5c5db (.style-light a:hover); auf Weiss 1,51:1, auf Creme 1,39:1.
   Wie bei den Kartentiteln (B-69) bleibt die Schrift Dunkelgruen
   (10,65:1 auf Weiss, 9,79:1 auf Creme) und wird 2 px unterstrichen.

   Gemessen an 18 Titellinks auf vier Seiten bei 390 und 1440 px:
   vorher alle beim Zeigen und im Fokus mit 1,39:1 bzw. 1,51:1, nachher
   mindestens 9,79:1. Lage unveraendert.

   WCAG 1.4.3, 2.4.7 */
.awsm-job-listing-item h2.awsm-job-post-title > a:is(:hover, :focus),
.awsm-job-listing-item a.awsm-job-more:is(:hover, :focus),
body.search-results .entry-header .entry-title > a:is(:hover, :focus) {
	color: #00491e !important;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.15em;
}