/*
 Theme Name:   liseDESIGN by Elisabeth HÜtter
 Theme URI:    https://lisedesign.de
 Description:  liseCHILD Theme
 Author:       Elisabeth Hütter
 Author URI:   https://lisedesign.de
 Template:     generatepress
 Version:      0.1
*/


/* FONT FAMILY */
.ff-body {
	font-family: var(--gp-font--body);
}

.ff-heading {
	font-family: var(--gp-font--head);
}


/* TYPOGRAPHY SCALE */
h1, .fs-h1 {
    font-size: clamp(3rem, -0.31rem + 6.897vi, 4rem);
    font-family: var(--gp-font--head);
    color: var(--brand-color-01);
    margin-bottom: 0;
}

h2, .fs-h2 {
    font-size: clamp(2.375rem, 0.306rem + 4.31vi, 3rem);
    font-family: var(--gp-font--head);
    color: var(--brand-color-01);
    margin-bottom: 0;
}

h3, .fs-h3 {
    font-size: clamp(2rem, 0.345rem + 3.448vi, 2.5rem);
    font-family: var(--gp-font--head);
    color: var(--brand-color-01);
    margin-bottom: 0;
}

h4, .fs-h4 {
    font-size: clamp(1.625rem, 0.384rem + 2.586vi, 2rem);
    font-family: var(--gp-font--head);
    color: var(--brand-color-01);
    margin-bottom: 0;
}

h5, .fs-h5 {
    font-size: clamp(1.375rem, 0.134rem + 2.586vi, 1.75rem);
    font-family: var(--gp-font--head);
    color: var(--brand-color-01);
    margin-bottom: 0;
}

h6, .fs-h6 {
    font-size: clamp(1.125rem, 0.297rem + 1.724vi, 1.375rem);
    font-family: var(--gp-font--head);
    color: var(--brand-color-01);
    margin-bottom: 0;
}

p, .fs-p-xl {
    font-size: clamp(1.3516rem, 1.2287rem + 0.4915vi, 1.6219rem);
    font-family: var(--gp-font--body);
    font-weight: 400;
    color: var(--brand-color-01);
    margin-bottom: 0;
}

.fs-p-l {
    font-size: clamp(1.2516rem, 1.1378rem + 0.4551vi, 1.5019rem);
    font-family: var(--gp-font--body);
    font-weight: 400;
    color: var(--brand-color-01);
    margin-bottom: 0;
}

.fs-p-m {
    font-size: clamp(1.1563rem, 1.0511rem + 0.4205vi, 1.3875rem);
    font-family: var(--gp-font--body);
    font-weight: 400;
    color: var(--brand-color-01);
    margin-bottom: 0;
}

.fs-p-s {
    font-size: clamp(0.9703rem, 0.8821rem + 0.3528vi, 1.1644rem);
    font-family: var(--gp-font--body);
    font-weight: 400;
    color: var(--brand-color-01);
    margin-bottom: 0;
}

.fs-p-xs {
    font-size: clamp(0.8333rem, 0.7576rem + 0.303vi, 1rem);
    font-family: var(--gp-font--body);
    font-weight: 400;
    color: var(--brand-color-01);
    margin-bottom: 0;
}

/* Framework Variable */
:root {
	--font-size-xxxl: 3rem;
	--font-size-xxl: 2.5rem;
	--font-size-xl: 1.8rem;
	--font-size-l: 1.6rem;
	--font-size-m: 1.4rem;
	--font-size-s: 1.2rem;
	--font-size-xs: 1rem;
	--font-size-xxs:0.85rem;
}

/*Back to Top Button */
.generate-back-to-top {
    position: fixed;
    width: 1.5em;
    height: 1.5em;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    background-color: var(--neutral-white-01) !important; /* Hintergrund */
    color: var(--brand-color-06) !important;              /* Icons */

    font-size: 2.7rem;
    border: 4px solid var(--brand-color-02);              /* Rahmen */
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 3px 4px 8px rgba(0, 0, 0, 0.18);         /* Schatten */
}

.generate-back-to-top:hover {
    background-color: var(--brand-color-05) !important; /* Hintergrund Hover */
    color: var(--neutral-white-01) !important;           /* Icon Hover */
    border: 4px solid var(--brand-color-02);             /* Rahmenfarbe Hover */
    transform: rotate(-12deg);
    box-shadow: 3px 4px 8px rgba(0, 0, 0, 0.18);        /* Schatten Hover */
}

@media (min-width: 1024px) {
    .generate-back-to-top {
        bottom: 40px;
        right: 40px;
    }
}


/* BARRIEREFREIHEIT TASTATUREINGABE */
*:focus:not(:focus-visible) {
outline: none;}
*:focus-visible {
outline: 3px solid grey !important; outline-style: solid !important; color: black !important; background-color: #f0f0f0; border-radius: 0px !important;}

.main-navigation .main-nav ul li a, .site-info a {position: relative; z-index: 10;}


/* CLOSE BOTTON ICON SLIDE OUT MENU */ 
 button.gb-menu-toggle.gb-menu-toggle--toggled svg {
    width: 0.7em;
    height: 0.7em;
    display: block;
	color: var(--brand-color-06);
  }

/* BG SLIDE OUT MENU
@media (max-width: 1235px) {
  .gb-menu-container.gb-menu-container--toggled {
    background-image:
      linear-gradient(rgba(255,255,255,0.75), rgba(255,255,255,0.75)),
      url("https://stein.lisedesign.de/wp-content/uploads/2026/05/20260525_161638-scaled.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
} */