/**
 * Theme Name:     CV Hello Elementor Child
 * Author:         CONVOTIS Lübeck
 * Template:       hello-elementor
 * Text Domain:	   CV Hello Elementor Child
 * Description:    Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
 */


html {
  scroll-padding-top: 150px; /* Höhe des Sticky Headers + etwas Luft */
}

.text-break {
	hyphens: auto;
}

.elementor-widget-theme-post-content a {
	color: var(--accent);
}

.elementor-widget-theme-post-content a:focus-visible,
.e-accordion-base .e-accordion-item-base summary:focus-visible,
.e-form-base label a:focus-visible,
header .elementor-nav-menu .elementor-item:focus-visible,
header #Site-logo:focus-visible, 
.elementor-element a.link-news:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 5px;
	border-radius: 5px;
}

header button.elementor-element-86229fa:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 5px;
}

footer a:focus-visible,
.elementor-element a.link-job:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 5px;
	border-radius: 5px;
}

.elementor-widget-theme-post-content a:hover,
.e-form-base label a:hover {
	color: var(--accent);
	text-decoration: underline!important;
}

.elementor-element a.link-news:hover h4,
.elementor-element a.link-job:hover h3 {
	text-decoration: underline;
}

.elementor .H2.e-heading-base strong {
	font-weight: 600;
	color: var(--secondary);
}

footer.elementor-location-footer a {
	text-decoration: underline;
}

footer.elementor-location-footer a:hover {
	text-decoration: none;
}

/* Headline sizes for editor content */

.elementor-element .elementor-widget-theme-post-content h2 {
	font-size: clamp(1.5rem, 0.5886rem + 1.8987vw, 2.25rem);
}

.elementor-element .elementor-widget-theme-post-content h3 {
	font-size: 1.5rem;
}

.elementor-element .elementor-widget-theme-post-content h4 {
	font-size: 1.25rem;
}

/* Normal list styling */

ul:not([class]), 
ul.acf-repeater-list {
  list-style: none;
  padding-left: 0;
  margin: 1.5rem 0 2.5rem 0;
}

ul:not([class]) li,
ul.acf-repeater-list li{
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

ul:not([class]) li::before,
ul.acf-repeater-list li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background-color: var(--accent);
  position: absolute;
  left: 0.25em;
  top: 0.5em;
}

/* Form fixes */

.elementor .e-form-input-base.form-input:focus,
.elementor .e-form-textarea-base.form-input:focus,
.elementor .e-form-textarea-base.form-input:focus,
.elementor .e-form-checkbox-base.e-default-input:focus
{
	outline: 3px solid var(--accent);
}

.f12-atomic-form-captcha {
	flex: 0!important;
}

.e-form-base label a {
	color: var(--accent);
}

/* Accordion fix */

.e-accordion-item-base[open] > summary .e-accordion-item-icon-base svg {
	transform: none!important;
}

.e-accordion-item-base > summary .e-accordion-item-icon-base svg .icon-vertical {
  transform-origin: 128px 128px;
  transition: transform 0.3s ease;
}

.e-accordion-item-base[open] > summary .e-accordion-item-icon-base svg .icon-vertical {
  transform: rotate(90deg) scaleX(0);
}


@media (max-width: 768px) {
	.e-accordion-item-base > summary .e-accordion-item-icon-base svg .icon-vertical,
	.e-accordion-item-base > summary .e-accordion-item-icon-base svg .icon-horizontal {
		stroke-width: 2px;
	}
}

/* Nav Menu Fix */

@media (max-width: 768px) {
	.elementor-nav-menu--dropdown.elementor-nav-menu__container {
		height: 100vh;
	}
}

.elementor-widget-nav-menu .elementor-menu-toggle {
	padding: 0;
}

span.elementor-menu-toggle__icon--close, 
span.elementor-menu-toggle__icon--open {
  height: 40px;
}

/* Nav Search */

/* Elementor rendert das Menü zweimal (Desktop + Dropdown): im Desktop-Menü ausblenden */
.elementor-nav-menu--main .menu-item-search {
    display: none;
}

/* Dropdown: Abstand um das Suchfeld */
.elementor-nav-menu--dropdown .menu-item-search {
    padding: 1.5rem;
    border: 0;
}

/* Keine Trennlinie unter dem letzten echten Menüpunkt (Kontakt) */
.elementor-nav-menu--dropdown li.menu-item:nth-last-child(2) > a {
    border-bottom: 0 !important;
}

/* Suchfeld */
.mobile-search {
    position: relative;
    margin: 0;
}
.mobile-search svg {
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
    color: #3a4556;
    pointer-events: none;
}
.mobile-search input[type="search"] {
    width: 100%;
    height: 52px;
    padding: 0 20px 0 56px;
    border: 0;
    border-radius: 999px;
    background: var(--grey-lighter);
    font-size: 16px;
    color: #3a4556;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
}
.mobile-search input[type="search"]::placeholder {
    color: #c4c8ce;
}
.mobile-search input[type="search"]::-webkit-search-cancel-button {
    display: none;
}
.mobile-search input[type="search"]:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

@media (min-width: 769px) {
  .menu-item-search {
    display: none !important;
  }
}

/* Blog Cards */

.card-blog:hover {
	background-color: var(--accent)!important;
	color: #fff;
}

.card-blog:hover span.e-paragraph-base, .card-blog:hover p {
	color: #fff;
}

.card-blog:hover .H4 {
	text-decoration: underline;
	color: #fff;
}

.card-blog:hover .card-read-more {
	text-decoration: underline;
	color: #fff;
}

.card-blog .card-read-more svg {
	transition: transform .3s ease;
}

.card-blog:hover .card-read-more svg {
	transform: translatex(5px);
}

/* Elementor Loop Grid Navigation - Variablen: hier Farben und Größen anpassen */
.elementor-widget-loop-grid .elementor-pagination {
  --pg-size: 44px;             /* Durchmesser der Kreise */

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start; /* center, falls zentriert gewünscht */
}

/* Zahlen-Kreise */
.elementor-widget-loop-grid .elementor-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: var(--pg-size);
  height: var(--pg-size);
  margin: 0;
  padding: 0;
  border: 1px solid var(--grey-light);
  border-radius: 50%;
  background: #fff;
  color: var(--primary);
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* Hover */
.elementor-widget-loop-grid .elementor-pagination a.page-numbers:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Aktive Seite */
.elementor-widget-loop-grid .elementor-pagination .page-numbers.current {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* "Weiter" / "Zurück" als Pill-Button */
.elementor-widget-loop-grid .elementor-pagination .page-numbers.next,
.elementor-widget-loop-grid .elementor-pagination .page-numbers.prev {
  gap: 10px;
  padding: 0 28px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: transparent;
  color: var(--accent);
}

.elementor-widget-loop-grid .elementor-pagination a.page-numbers.next:hover,
.elementor-widget-loop-grid .elementor-pagination a.page-numbers.prev:hover {
  background: var(--accent);
  text-decoration: underline;
  color: #fff;
}

/* Pfeil per CSS (übernimmt die Textfarbe) */
.elementor-widget-loop-grid .elementor-pagination .page-numbers.next::after,
.elementor-widget-loop-grid .elementor-pagination .page-numbers.prev::before {
  content: "";
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Pfeil bei "Zurück" nach links drehen */
.elementor-widget-loop-grid .elementor-pagination .page-numbers.prev::before {
  transform: scaleX(-1);
}

/* Auslassungspunkte (…) ohne Kreis */
.elementor-widget-loop-grid .elementor-pagination .page-numbers.dots {
  border: 0;
  background: transparent;
  min-width: auto;
}

/* Skip-Link: sichtbar nur bei Tastaturfokus */
a.skip-link:focus,
a.skip-link:focus-visible {

  position: fixed !important;
  top: 1.5rem !important;
  left: 1.5rem !important;
  z-index: 100000 !important;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
  clip-path: none !important;
  overflow: visible !important;

  padding: 0.75em 1.75em !important;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent);
  color: #fff !important;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
  outline-offset: 3px;
}

/* Hover: invertiert, passend zu den übrigen Buttons */
a.skip-link:focus:hover {
  background: #fff;
  color: var(--accent) !important;
}

/* Beitrags-Navigation */

/* Beitrag Navigation als Buttons (Abstände wie .button-primary) */
.elementor-widget-post-navigation .elementor-post-navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;  /* flex-start, falls beide links stehen sollen */
  gap: var(--spacing-s);
  border: 0;
  padding: 0;
}

/* Linien und Trenner ausblenden */
.elementor-widget-post-navigation .elementor-post-navigation__separator-wrapper {
  display: none;
}

.elementor-widget-post-navigation.elementor-post-navigation-borders-yes .elementor-post-navigation {
  border: 0;
  padding: 0;
}

/* Container dürfen schrumpfen, damit lange Titel gekürzt werden */
.elementor-widget-post-navigation .elementor-post-navigation__link {
  flex: 0 1 auto;
  min-width: 0;
  width: auto!important;
  margin: 0;
}

/* Die Links als Pill-Buttons */
.elementor-widget-post-navigation .elementor-post-navigation__link a {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  box-sizing: border-box;
  max-width: 100%;
  padding-block-start: var(--spacing-s);
  padding-block-end: var(--spacing-s);
  padding-inline-start: 2rem;
  padding-inline-end: 2rem;
  border: 1px solid var(--accent);
  border-radius: var(--spacing-l);
  background: transparent;
  color: var(--accent);
  font-family: var(--base-font);
  font-weight: 400;
  font-size: var(--font-size-button);
  line-height: 1.2;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.elementor-widget-post-navigation span.post-navigation__prev--title, 
.elementor-widget-post-navigation span.post-navigation__next--title,
.elementor-post-navigation .post-navigation__arrow-wrapper {
	color: inherit!important;
}

.elementor-post-navigation,
.elementor-post-navigation .elementor-post-navigation__link {
	overflow: visible!important;
}

/* Hover und Tastaturfokus (wie .button-primary) */
.elementor-widget-post-navigation .elementor-post-navigation__link a:hover,
.elementor-widget-post-navigation .elementor-post-navigation__link a:focus-visible {
  background-color: var(--red-light);
  border-color: var(--red-light);
  color: var(--white);
  text-decoration: underline;
}

.elementor-widget-post-navigation .elementor-post-navigation__link a:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

/* Pfeile: Elementor-Abstände entfernen, Farbe vom Link erben */
.elementor-widget-post-navigation .post-navigation__arrow-wrapper {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
  color: inherit;
}

.elementor-widget-post-navigation .post-navigation__arrow-wrapper svg {
  width: 1.125rem;
  height: 1.125rem;
  fill: currentColor;
}

.elementor-widget-post-navigation .elementor-post-navigation__link__prev,
.elementor-widget-post-navigation .elementor-post-navigation__link__next {
  min-width: 0;
  overflow: visible;
  color: inherit;
}

.elementor-widget-post-navigation .post-navigation__prev--title,
.elementor-widget-post-navigation .post-navigation__next--title {
  display: block;
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
  overflow-wrap: anywhere;
  color: inherit;
}

.elementor-widget-post-navigation .post-navigation__arrow-wrapper {
  flex-shrink: 0;
}

/* Mobil: Buttons untereinander, Padding wie .button-primary */
@media (max-width: 767px) {
  .elementor-widget-post-navigation .elementor-post-navigation {
    flex-direction: column;
    align-items: stretch;
  }

  .elementor-widget-post-navigation .elementor-post-navigation__link a {
    justify-content: center;
    padding-block-start: 0.75rem;
    padding-block-end: 0.75rem;
  }
}