/* ==========================================================================
   custom.css — self-hosted webfonts + the rules that replace the removed
   WordPress/jQuery plugin runtime (smartmenus, jquery.sticky, elementor-pro).
   Loaded last, so it wins over the generated Elementor stylesheets.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Webfonts (were loaded from joepenas.de, now local + font-display:swap)
   -------------------------------------------------------------------------- */
@font-face {
	font-family: "Gin";
	src: url("../fonts/gin-regular.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Montserrat";
	src: url("../fonts/montserrat-v26-latin-regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Montserrat";
	src: url("../fonts/montserrat-v26-latin-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Montserrat";
	src: url("../fonts/montserrat-v26-latin-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* --------------------------------------------------------------------------
   1a. Grundschrift auf die Markenschrift setzen
       theme.css (Hello Elementor) stellt body auf den System-Font-Stack
       (-apple-system, Segoe UI, Roboto …). Elementor überschreibt das für
       fast jedes Element einzeln — was durchrutscht (z. B. der Skip-Link,
       der bei Tastaturfokus sichtbar wird), erschiene sonst in der Systemschrift.
       Laut Corporate Design sind nur Gin (Titel) und Montserrat zulässig.
   -------------------------------------------------------------------------- */
body {
	font-family: "Montserrat", sans-serif;
}

/* --------------------------------------------------------------------------
   1c. Farbpalette auf die vier freigegebenen Markenfarben begrenzen
       Das Corporate Design lässt nur Schwarz #000000, Gelb #e9b127,
       Beige #f5eac7 und Weiss #ffffff zu. Der Elementor-Kit führt darüber
       hinaus noch Grün (#313010, #696527) und Bordeaux (#5e040c) als
       Globals; sichtbar wird davon der Hintergrund des Abschnitts
       „Unser Versprechen" (#313010). Er läuft hier auf Schwarz.

       Hinweis: joepenas.de selbst nutzt an dieser Stelle weiterhin Grün —
       für echte Deckungsgleichheit muss der Global auch im WordPress-
       Backend (Elementor > Site Settings > Global Colors) geändert werden.
   -------------------------------------------------------------------------- */
.elementor-kit-7 {
	--e-global-color-d8c37b4: #000000;   /* war Grün – dunkel */
	--e-global-color-d51df40: #000000;   /* war Grün – hell */
	--e-global-color-accent:  #e9b127;   /* war Bordeaux */
}

/* --------------------------------------------------------------------------
   1b. hello-theme-child styles (style.css). WordPress loaded the child theme
       after the generated Elementor CSS, so they live here to keep that order.
   -------------------------------------------------------------------------- */
/* Add your custom styles here */
/* `overflow-x: hidden` makes both html and body scroll containers, which the
   rule was never after — it also breaks `position: sticky` for descendants.
   `clip` suppresses horizontal overflow without creating a scrollport. */
html, body {
	overflow-x: clip;
}
h1 {
	text-shadow: 2px 2px 6px rgba(0,0,0,0.6);
}
.nowrap {
	white-space: nowrap;
}
.pr-0 {
	padding-right: 0;
}
.elementor-widget-heading h2.elementor-heading-title {
	font-family: var( --e-global-typography-secondary-font-family ), Sans-serif;
	font-size: var( --e-global-typography-secondary-font-size );
	font-weight: var( --e-global-typography-secondary-font-weight );
	text-transform: var( --e-global-typography-secondary-text-transform );
}

.elementor-widget-heading h3.elementor-heading-title {
  font-family: var( --e-global-typography-text-font-family ), Sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
}
.elementor-widget-theme-post-title h4.elementor-heading-title {
	text-transform: none;
}
.elementor-button-wrapper a.elementor-button {
	text-decoration: none;
	transition: none;
}
.elementor-button-wrapper .elementor-button .elementor-button-content-wrapper {
	padding: 0.5rem 1rem;
	margin: 0.2rem;
	border-top: 1px solid var( --e-global-color-text );
	border-bottom: 1px solid var( --e-global-color-text );
}
.elementor-button-wrapper .elementor-button:hover .elementor-button-content-wrapper,
.elementor-button-wrapper .elementor-button:focus .elementor-button-content-wrapper {
	border-top: 1px solid var( --e-global-color-5be3dba );
	border-bottom: 1px solid var( --e-global-color-5be3dba );
}
.elementor-widget-button.fw .elementor-button-wrapper .elementor-button {
	width: 100%;
}
.elementor-accordion .elementor-accordion-item,
.elementor-accordion .elementor-tab-content {
	border: none!important;
}

.elementor-nav-menu, .elementor-nav-menu li.wpml-ls-item-de,
.elementor-nav-menu, .elementor-nav-menu li.wpml-ls-item-en {
	display: inline-block;
}
.elementor-nav-menu, .elementor-nav-menu li.wpml-ls-item-de > a {
	padding-right: 0!important;
}
.elementor-nav-menu li.wpml-ls-item-de > a > span {
	border-right: 1px solid var( --e-global-color-primary );
	padding-right: 15px;
}
.elementor-nav-menu--dropdown .elementor-item, 
.elementor-nav-menu--dropdown .elementor-sub-item {
	text-transform: uppercase;
}

.elementor-widget-toggle a {
	color: #fff;
}
.elementor-widget-toggle a:hover,
.elementor-widget-toggle a:focus {
	color: var( --e-global-color-primary );
}
#elementor-tab-content-1961 a {
	color: var( --e-global-color-text );
}
#elementor-tab-content-1961 a:hover,
#elementor-tab-content-1961 a:focus {
	color: var( --e-global-color-d51df40 );
}
.elementor-tab-title {
	display:flex;
}
.elementor-toggle-icon {
	order:2;
	padding-left: 1rem
}
.elementor-location-footer .elementor-widget-wpml-language-switcher {
	text-align: left;
}
.elementor-location-footer .wpml-ls-legacy-list-horizontal {
	padding: 0;
}
.elementor-location-footer .wpml-ls-legacy-list-horizontal a {
	padding: 0 10px;
}
.elementor-location-footer .wpml-ls-legacy-list-horizontal li.wpml-ls-item-de a {
	padding-left: 0;
	border-right: 1px solid #fff;
}
.elementor-location-footer a {
	color: #fff;
}
.elementor-location-footer a:hover,
.elementor-location-footer a:focus {
	color: var( --e-global-color-primary );
}
sub, sup {
	font-size: 65%;
}
.e-loop-item * {
	white-space: wrap;
}
.elementor-popup-modal .elementor {
	height: 100%;
}
table td, table th {
	background-color: transparent!important;
	border: none;
	padding: 5px 0!important;
}
/* Extra small devices (phones, 600px and down) 
@media only screen and (max-width: 600px) {...}
*/

/* Small devices (portrait tablets and large phones, 600px and up) 
@media only screen and (min-width: 600px) {...}
*/

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
	h1 {
		text-shadow: 0 4px 2px rgba(0,0,0,0.25);
	}
	.elementor-widget-heading h3.elementor-heading-title {
		font-size: 1.6rem;
	}
	.elementor-nav-menu--main .home-link {
		display: none!important;
	}
	.elementor-nav-menu--main .wpml-ls-item-de,
	.elementor-nav-menu--main .wpml-ls-item-en {
		display: block;
	}
	.elementor-nav-menu--main .wpml-ls-item-de > a {
		margin-inline-end: 7px!important;
	}
	.elementor-nav-menu--main .wpml-ls-item-en > a {
		margin-inline-start: 7px!important;
	}
	.elementor-nav-menu li.wpml-ls-item-de {
		border-right: 1px solid var( --e-global-color-primary );
	}
	.elementor-nav-menu, .elementor-nav-menu li.wpml-ls-item-de > a {
		padding-right: inherit;
	}
	.elementor-nav-menu li.wpml-ls-item-de > a > span {
		border-right: none;
		padding-right: inherit;
	}
	.elementor-location-footer .elementor-widget-wpml-language-switcher {
		text-align: right;
	}
}

/* Extra large devices (large laptops and desktops, 1200px and up) 
@media only screen and (min-width: 1200px) {...} 
*/

/* --------------------------------------------------------------------------
   2. Sticky header — replaces jquery.sticky.min.js + elementor-pro sticky.
      The header container was `position:absolute` and was switched to
      `fixed` by JS on scroll; since it sits at top:0 either way, a plain
      fixed container is visually identical and needs no script.
   -------------------------------------------------------------------------- */
.elementor-149 .elementor-element.elementor-element-60a179d {
	--position: fixed;
	position: fixed;
}

/* --------------------------------------------------------------------------
   3. Desktop dropdown — replaces jquery.smartmenus.min.js.
      Pure CSS hover/focus disclosure; :focus-within keeps it keyboard
      reachable, and the JS layer adds click support for touch devices.
   -------------------------------------------------------------------------- */
.elementor-nav-menu--layout-horizontal .elementor-nav-menu > li:hover > ul,
.elementor-nav-menu li.is-open > ul {
	display: block;
}

/* Elementor hard-codes `width: 12em` on the desktop submenu, which is narrower
   than "Ludwigsburg" and clipped it. smartmenus used to overwrite that inline
   with `width:auto; min-width:10em` once it initialised; this is that rule,
   minus the plugin. */
.elementor-nav-menu--main .elementor-nav-menu ul {
	width: auto;
	min-width: 12em;
	max-width: 90vw;
}

.elementor-nav-menu--main .elementor-nav-menu ul .elementor-sub-item {
	white-space: nowrap;
}

/* The "Restaurants" entry has no destination — it only opens the submenu.
   It stays an <a> so it keeps the anchor-targeted menu styling, and carries
   role="button" + tabindex="0"; main.js supplies Enter/Space activation. */
.elementor-nav-menu [role="button"] {
	cursor: pointer;
}

.elementor-nav-menu .sub-arrow svg {
	transition: transform 0.25s ease;
}

.elementor-nav-menu li.is-open > .elementor-item .sub-arrow svg,
.elementor-nav-menu--layout-horizontal .elementor-nav-menu > li:hover > .elementor-item .sub-arrow svg {
	transform: rotate(90deg);
}

/* --------------------------------------------------------------------------
   4. Toggle widget — replaces the Elementor frontend accordion handler.
      The stylesheet already hides `.elementor-tab-content`; JS only flips
      `.elementor-active`, so give the reveal a height transition here.
   -------------------------------------------------------------------------- */
.elementor-toggle .elementor-tab-content {
	overflow: hidden;
}

/* The tab title is a real <button>, so it collects every generic button style
   on the page: the theme reset's border/colour chrome and, on hover/focus,
   the kit's `.elementor-kit-7 button:hover` (gold fill, white text). The
   original markup used a <div> and never had a hover state — the :hover and
   :focus selectors here are what keep it that way, so do not drop them. */
.elementor-toggle .elementor-tab-title,
.elementor-toggle .elementor-tab-title:hover,
.elementor-toggle .elementor-tab-title:focus {
	appearance: none;
	background: none;
	border-inline: 0;
	border-block-start: 0;
	color: inherit;
	font: inherit;
	text-align: inherit;
	text-decoration: none;
	white-space: normal;
	width: 100%;
}

.elementor-toggle .elementor-tab-title .elementor-toggle-title {
	cursor: pointer;
}

@media (prefers-reduced-motion: no-preference) {
	.elementor-toggle .elementor-tab-content {
		transition: height 0.3s ease;
	}
}

/* --------------------------------------------------------------------------
   5. Motion FX — replaces the elementor-pro scroll handler. `.e-transform`
      already composes the transform chain, so the script only has to feed
      `--e-transform-translateY` from the scroll position.
   -------------------------------------------------------------------------- */
.elementor-motion-effects-element {
	--e-transform-transition-duration: 100ms;
}

@media (prefers-reduced-motion: reduce) {
	.elementor-motion-effects-element {
		--e-transform-translateY: 0px !important;
	}
}

/* --------------------------------------------------------------------------
   6. Misc
   -------------------------------------------------------------------------- */
:focus-visible {
	outline: 2px solid var(--e-global-color-primary, #e9b127);
	outline-offset: 2px;
}