/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme
Template: hello-elementor
*/

/* RESET & GLOBAL BASELINE */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%; 
}

body {
  height: 100%;
  font-family: inherit;
  line-height: 1.5;
  overflow-x: hidden;
  background-color: #fff;
  color: #000;
}

/* MEDIA ELEMENTS */

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

/* TYPOGRAPHY */

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
  line-height: 1.2;
}

p {
  margin-bottom: 1.6rem;
}

strong, b {
  font-weight: 700 !important;
}

/* LISTS */
/* Saubere UL/LI-Ausrichtung – alles schön in einer Flucht */
ul, ol {
  margin: 0;
  padding: 0;
  list-style-position: outside;
}

/* Standard-Indent für die Liste (damit Bullet + Text sauber stehen) */
ul, ol {
  padding-left: 1.25em;
}

/* LI ohne extra Abstände */
li {
  margin: 0;
  padding: 0;
}

/* Optional: gleichmäßiger Abstand zwischen Punkten */
li + li {
  margin-top: 0.0em;
}

/* Verschachtelte Listen: sauber eingerückt, aber nicht „wild“ */
li > ul,
li > ol {
  margin-top: 0.0em;
  padding-left: 1.25em;
}


/* FORMS */

input, button, textarea, select {
  font: inherit;
  border: none;
  outline: none;
  background: none;
}

/* LINKS */

a {
  color: inherit;
  text-decoration: none;
}

/* BUTTONS */

button {
  cursor: pointer;
}

/* TABLES */

table {
  border-collapse: collapse;
  width: 100%;
}


/* ========================================================
 VERSTECKTE SEO H1 ÜBERSCHRIFT
======================================================== */

.seo_h1 {
  position: absolute;
  left: -9999px;
}

/* ========================================================
 HEADER VOLLE HÖHE
======================================================== */

.fullscreen-container {
    min-height: 100vh;   /* Fallback für ältere Browser */
    min-height: 100svh;  /* Moderne Browser – korrekt auf Mobile */
    display: flex;
}


/* ========================================================
 DIAGONALES LINEN-MUSTER (SVG BASED)
======================================================== */

.diagonal-linien-muster {
    position: relative;
}

.diagonal-linien-muster {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 9 9'%3E%3Cline x1='0' y1='9' x2='9' y2='0' stroke='white' stroke-opacity='0.1' stroke-width='1'/%3E%3C/svg%3E");
background-repeat: repeat;
	background-size: 12px 12px;
}

/* ========================================================
 ELEMENTOR BUTTON – 100% BREITE + STATISCHER KREIS RECHTS + FLY-IN OVERLAY
======================================================== */

.btn-anim .elementor-button{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;

  /* ===== TUNING ===== */
  --btn-py: 10px;
  --btn-pl: 22px;
  --btn-pr: 18px;
  --circle-size: 42px;
  --circle-gap: 12px;
  --circle-base: rgba(255,255,255,.20);
  --circle-hover: rgba(255,255,255,.30);
  --fly-start-x: -180%;

  padding: var(--btn-py)
           calc(var(--btn-pr) + var(--circle-size) + var(--circle-gap))
           var(--btn-py)
           var(--btn-pl);
  border-radius: 999px;
  transition: box-shadow .18s ease, filter .18s ease;
}

.btn-anim .elementor-button:hover{
  transform: translateY(0);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  filter: brightness(1.02);
}

.btn-anim .elementor-button:active{
  transform: translateY(0);
  box-shadow: 0 6px 16px rgba(0,0,0,.14);
}

/* Elementor-eigenes Icon aus */
.btn-anim .elementor-button .elementor-button-icon{
  display: none !important;
}

/* volle Breite, damit Text links bleibt */
.btn-anim .elementor-button .elementor-button-content-wrapper{
  width: 100%;
}

.btn-anim .elementor-button .elementor-button-text{
  display: block;
  width: 100%;
}

/* Statischer Kreis Rechts + Pfeil */
.btn-anim .elementor-button::before{
  content:"";
  position:absolute;
  top: 50%;
  right: var(--circle-gap);
  width: var(--circle-size);
  height: var(--circle-size);
  transform: translateY(-50%);
  border-radius: 999px;

  background-color: var(--circle-base);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='rgba(255,255,255,0.95)' d='M13.5 5l7 7-7 7-1.4-1.4 4.6-4.6H3v-2h13.7l-4.6-4.6L13.5 5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px;

  z-index: 3;
  pointer-events: none;

  transition: background-color .22s ease;
}


/* Fly-In Overlay-Kreis */
.btn-anim .elementor-button::after{
  content:"";
  position:absolute;
  top: 50%;
  right: var(--circle-gap);
  width: var(--circle-size);
  height: var(--circle-size);
  transform: translate(var(--fly-start-x), -50%);
  border-radius: 999px;

  background: var(--circle-base);
  opacity: 0;

  z-index: 2;
  pointer-events: none;

  transition:
    transform .55s cubic-bezier(.2,.8,.2,1),
    opacity .10s ease,
    background .55s ease;
}

.btn-anim .elementor-button:hover::after{
  opacity: 1;
  transform: translate(0, -50%);
  background: var(--circle-hover);
}

/* Endzustand: Kreis insgesamt heller */
.btn-anim .elementor-button:hover::before{
  background-color: var(--circle-hover);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .btn-anim .elementor-button,
  .btn-anim .elementor-button::after{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ========================================================
 Custom Main Navigation Klasse: custom-main-nav
======================================================== */

/* Reset */
.custom-main-nav .elementor-nav-menu {
    width: 100%;
    padding: 0;
    margin: 0;
}

/* Horizontales Menu Desktop */


.custom-main-nav .elementor-nav-menu--layout-horizontal .elementor-nav-menu {
    display: flex;
}

.custom-main-nav .elementor-nav-menu--layout-horizontal .menu-item {
    flex: 1 1 0;
}

/* Vertikales Menü Mobil */


.custom-main-nav .elementor-nav-menu--layout-vertical .menu-item {
    width: 100%;
    margin-bottom: 20px;
}

.custom-main-nav .elementor-nav-menu--layout-vertical .menu-item:last-child {
    margin-bottom: 0;
}

/* Link Styling */

.custom-main-nav .elementor-item {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    height: 60px;
    width: 100%;
    padding: 0 0 10px 10px;
    color: #ffffff;
    line-height: 1;
    transform: none;
    transition: background-color 0.2s ease;
}

/* Farben */

.custom-main-nav .menu-item:nth-child(1) .elementor-item { background:#4C4A2A; }
.custom-main-nav .menu-item:nth-child(2) .elementor-item { background:#BBA57A; }
.custom-main-nav .menu-item:nth-child(3) .elementor-item { background:#967246; }
.custom-main-nav .menu-item:nth-child(4) .elementor-item { background:#85837E; }

/* Hover */
.custom-main-nav .menu-item:nth-child(1) .elementor-item:hover { background:#3f3d22;}
.custom-main-nav .menu-item:nth-child(2) .elementor-item:hover { background:#a89367; }
.custom-main-nav .menu-item:nth-child(3) .elementor-item:hover { background:#825f3a; }
.custom-main-nav .menu-item:nth-child(4) .elementor-item:hover { background:#6f6d69; }

/* Mobil Anpassung */

@media (max-width: 767px) {

    /* UL nicht mehr Flex */
    .custom-main-nav .elementor-nav-menu--layout-horizontal .elementor-nav-menu {
        display: block;
    }

    /* LI untereinander mit 20px Abstand */
    .custom-main-nav .elementor-nav-menu--layout-horizontal .menu-item {
        width: 100%;
        margin-bottom: 20px;
    }

    .custom-main-nav .elementor-nav-menu--layout-horizontal .menu-item:last-child {
        margin-bottom: 0;
    }

    /* Padding im Mobile erzwingen */
    .custom-main-nav .elementor-item,
    .custom-main-nav .elementor-item:hover,
    .custom-main-nav .elementor-item:focus {
        padding: 0 0 10px 10px;
    }

}