@charset "UTF-8";

/************************************************************************************
*
* Theme Name: 		  WP Theme Elmas G Friseur
* Theme URI:		    https://www.elmas-g.de
* Text Domain:      Elmas Genisyürek
* Description:      Custom WordPress-Theme for Irene Kaiser, Barrierefreies Webdesign und WordPress-Webentwicklung Philipp Lindermeir - www.9volt-media.net
* Tested up to:     5.0
* Requiers PHP:     8.0
* Author:		        Elmas Genisyürek
* Author URI:		    https://www.elmas-g.de
* Version:			    1.2
* License:          GNU General Public License V3 or later
* License URI:      https://www.gnu.org/licenses/gpl-3.0
*
************************************************************************************/


:root {
    
    --font-family-myriad-pro: "myriad-pro", sans-serif;
    --font-family-sans: var(--font-family-myriad-pro);

    --font-weight-light: 300;
    --font-weight-regular: 400;

    --font-size-h-1xl: clamp(1.8rem, 1.4rem + 2vw, 2.8rem);
--font-size-h-2xl: clamp(1.5rem, 1.3rem + 1.25vw, 2.1rem);
--font-size-h-lg: clamp(1.4rem, 1.2rem + 1vw, 1.95rem);
--font-size-h-md: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
--font-size-h-sm: clamp(1.1rem, 1rem + 0.4vw, 1.35rem);
--font-size-h-xs: clamp(0.95rem, 0.9rem + 0.3vw, 1.2rem);

    --font-size-base: 1.125rem;
    --font-size-small: .875rem;
        
    --color-theme-100: #F8F4F0;
    --color-theme-900: #131212;
    
    --color-accent-200: #4e2b3e;
    --color-accent-400: #EDE7E3;
    
    --color-box-shadow: 0 2px 4px rgba(19, 18, 18, .2);

    --section-spacing-500: 10rem;
    --section-spacing-400: 7.5rem;
    --section-spacing-300: 5rem;
    --section-spacing-200: 2.5rem;
    --section-spacing-100: 1rem;

    --container-max-width: 80em;

    --z-index-10: 10;
    --z-index-20: 20;
    --z-index-30: 30;
    --z-index-40: 40;

    --ease-standard: cubic-bezier(0.4,0,0.2,1);
    --hover-transform: scale(1.1);
}

/* Create a root stacking context */

#root, #__next {
    isolation: isolate;
}
  
/* Base */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font: inherit
}

:where(ul, ol):where([class]),
:where(ul[role='list']),
:where(ol[role='list']) {
    list-style: none;
    margin: 0;
    padding: 0;
}
  
:target {
  scroll-margin-block: 2em;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

button:not(:disabled) {
  cursor: pointer;
}

/* Set core root defaults */

 html:focus-within {
    scroll-behavior: smooth;
}
  
/* Set core body defaults */
  
html {
    height: 100%;
    scroll-behavior: smooth;
    -moz-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-x: hidden;
}
  
body {
    font-family: "myriad-pro", sans-serif;
    font-variant-ligatures: common-ligatures contextual;
    font-feature-settings: "kern","liga","clig","calt";
    font-kerning: normal;
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
    line-height: calc(1em + 0.5em);
    background-color: var(--color-theme-100);
    color: var(--color-theme-900);
}
  
 /* A elements that don't have a class get default styles */
  
a:not([class]) {
    text-decoration-skip-ink: auto;
}
  
a {
    text-decoration: none;
}
  
 /* Make images easier to work with */
  
img,
picture,
video,
svg {
     max-width: 100%;
     height: auto;
     display: block;
     font-style: italic;
     vertical-align: middle;
     border: 0;
     image-rendering: -webkit-optimize-contrast
 }
   
/* Remove built-in form typography styles */
  
address {
    margin-block-end: 1em;
    font-style: normal;
    line-height: inherit;
}
  
strong {
    font-weight: 700;
}
  
small {
    font-size: var(--fs-100);
}
  
sub,
sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline;
  }
  
sub {
    bottom: -.25em;
  }
  
sup {
    top: -.5em;
}

:focus:not(:focus-visible) {
    outline: 0
}
  
:focus-visible {
    outline: 1px dashed currentColor;
    outline-offset: 4px;
}
  
button,
input,
optgroup,
select,
textarea {
    font: inherit;
    background-color: transparent;
    outline: none;
    border: none;
    border-radius: none;
    margin: 0
}
  
button {
    overflow: visible
}
  
button,
select {
    text-transform: none
}
  
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}
  
button[disabled],
html input[disabled] {
    cursor: default
}
  
button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0
}
  
input {
    line-height: normal
}
  
input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box;
    padding: 0
}
  
textarea {
  resize: vertical;
  overflow: auto;
}
  
::-moz-selection {
    color: #fff;
    background-color: #50575c;
    text-shadow: none
}
  
::selection {
    color:#fff;
    background-color:#50575c;
    text-shadow: none
}

h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin-block-end: 0;
}

/* Avoid text overflows */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-myriad-pro);
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  overflow-wrap: break-word;
  word-break: break-word;
  text-wrap: balance;
  max-inline-size: 60ch;
}

p {
  text-wrap: pretty;
}

p, ul {
  font-family: var(--font-family-myriad-pro);
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-base);
  line-height: 1.7;
}
  
p:not([class]) {
    max-width: 80ch;
}
  
p[data-wide="wide"] {
    max-width: 100%;
}

ul {
    list-style: none;
 line-height: 1.875rem;
}

strong {
  font-size: var(--fs-text-base);
 font-weight: var(--font-weight-bold);
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
  
@media (prefers-reduced-motion: reduce) {
    
html:focus-within {
    scroll-behavior: auto;
}
    
*,
*::before,
*::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}
  
}

.layout {
    position: relative;
    width: 100%;
    overflow: clip;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom);
}
  
/* Accessibility Style */
  
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0
}

.skip-nav {
  position: relative
}

.skip-nav--link {
  background-color: var(--color-accent-200);
  border-radius: 0 0 .25em .25em;
  color: var(--color-theme-100);
  padding: .5em 1em;
  position: absolute;
  left: 1em;
  transform: translateY(-180%);
  transition: transform 325ms ease-in;
  z-index: 100;
}

.skip-nav--link:focus {
    outline: 1px dashed var(--color-theme-900);
    outline-offset: 2px;
    transform: translateY(0);
}

/* Web-Komponenten Container */

.section {
  --max-width: 100%;
  width: min(var(--max-width));
  margin: 0 auto;
  margin-inline: auto;
  position: relative
}

.section[is-container--width="100"] {
  --max-width: 50rem;
  --container--spacing-inline: 1rem;
  width: min(var(--max-width), 100% - var(--container--spacing-inline) * 2);
}

.section[is-container--width="200"] {
  --max-width: 64rem;
  --container--spacing-inline: 1rem;
  width: min(var(--max-width), 100% - var(--container--spacing-inline) * 2);
}

.section[is-container--width="300"] {
  --max-width: 80rem;
  --container--spacing-inline: 1rem;
  width: min(var(--max-width), 100% - var(--container--spacing-inline) * 2);
}

.spacing-50 {
  padding-block: var(--section-spacing-500);
}

.spacing-40 {
  padding-block: var(--section-spacing-400);
}

.spacing-30 {
  padding-block: var(--section-spacing-300);
}

.spacing-20 {
  padding-block: var(--section-spacing-200);
}

.spacing-10 {
  padding-block: var(--section-spacing-100);
}

/* Buttons */

.button {
  min-width: 240px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 1em;
  position: relative;
  font-family: var(--font-family-myriad-pro);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.2;
  border-radius: 100vw;
  padding: .75em;
  cursor: pointer;
}

.button-default {
  background-color: var(--color-theme-900);
  color: var(--color-theme-100);

  &:hover {
    background-color: var(--color-accent-200);
    color: var(--color-theme-100);
  }

  &:focus-visible {
    outline: 1px solid var(--color-theme-900);
    outline-offset: 2px;
  }

}

.button-inverted {
  background-color: var(--color-theme-900);
  color: var(--color-accent-400);

  &:hover {
    background-color: var(--color-accent-200);
    color: var(--color-theme-900);
  }

  &:focus-visible {
    outline: 1px solid var(--color-theme-900);
    outline-offset: 2px;
  }

}

/* Header */

.header {
  width: 100%;
  position: sticky;
  top: 0;
  left: 0;
  background-color: var(--color-theme-100);
  z-index: var(--z-index-20);
  padding-block: 1em;
  box-shadow: var(--color-box-shadow);
}


.header > * {
  display: flex;
  justify-content: space-between;
  align-items: center;
  --max-width: 80em;
  --container--spacing-inline: 1em;
  width: min(var(--max-width), 100% - var(--container--spacing-inline) * 2);
  margin: 0 auto;
  margin-inline: auto;
}

.site-header--logo {
    color: var(--color-theme-900);
    font-size: var(--font-size-h-sm);
}


.nav-toggle,
.nav-close {
  display: none;
}

.nav-menu {
  width: initial;
  display: flex;
  gap: 2em;
}

.nav-menu {
  display: inline-flex;
}

.menu-item {
    position: relative
}

.menu-item a {
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-base);
   color: var(--color-theme-900);
   transition: text-decoration-color .2s ease-in-out;
    padding-block: .5em;
}

.menu-item a:hover { 
    text-decoration-color: var(--color-accent-600);
    text-decoration-line: underline;
    text-decoration-skip: spaces;
    text-underline-offset: 6px;
    text-decoration-thickness: 2px;
}

.menu-item a[aria-current="page"] {
    text-decoration-color: var(--color-accent-600);
    text-decoration-line: underline;
    text-decoration-skip: spaces;
    text-underline-offset: 6px;
    text-decoration-thickness: 2px;
}

.site-header--menu {
  display: none;
}

@media (max-width: 992px) {
  .site-header--menu {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    gap: .5em;
    background-color: var(--color-accent-200);
    border-radius: .5em;
    cursor: pointer;
  }
  
  .button-burger {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5em;
    background-color: var(--clr-accent-600);
    border-radius: 0.25em;
    outline: none;
    height: 20px;
    width: 28px;
    border: none;
    transition: all 250ms ease-out;
    cursor: pointer;
  }
  
  .button-burger::before, .button-burger::after {
    content: '';
    width: 28px;
    height: 2px;
    position: absolute;
    z-index: var(--z-index-20);
    background-color: var(--color-theme-100);
    transition: all 250ms ease-out;
    will-change: transform;
  }
  
  .button-burger::before {
    transform: translateY(-3px);
  }
  
  .button-burger::after {
    transform: translateY(3px);
  }
  
  .active.button-burger::before {
    transform: translateY(0) rotate(45deg);
  }
  
  .active.button-burger::after {
    transform: translateY(0) rotate(-45deg);
  }

  .nav-menu {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    position: fixed;
    top: -100%;
    left: 0;
    transition:  0.5s;
    margin: 0 auto;
    background-color: var(--color-theme-100);
    padding-left: clamp(2em, 3em + 4vw, 8em);
  }

  .menu-item a {
    display: block;
    font-size: var(--font-size-h-lg);
    color: var(--color-theme-900);
    text-align: start;
  }

  .active {
    top: 0;
    z-index: var(--z-index-10);
    transition: 0.5s ease-in-out;
  }
}

@media screen and (max-width: 480px) {
  
  a.nav-link {
    padding: clamp(2em, 2.5em + 3vw, 5em) 0;
  }

}

@media (hover: none) {
      .menu-item a:hover {
    /* Hover-Effekte auf Touch-Geräten neutralisieren */
    color: inherit;
    text-decoration: none;
  }
}

/* Banner */

.banner-image {
  width: 100%;
  min-height: 80vh;
  min-height: 80dvh;
  background-image: linear-gradient(to bottom, rgba(248, 244, 240, 0.9),transparent max(80%, 80vw)), var(--bg-url);
  background-repeat: no-repeat;
  background-size: 100%,cover;
  background-position: 50% 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

@media only screen and (min-width: 40em) {
  
    .banner-image {
        background-image: linear-gradient(to bottom, rgba(248, 244, 240, 0.6),transparent max(60%, 60vw)), var(--bg-url);
    }
    
}

.banner-content {
  display: flex;
  justify-content: flex-start;
  align-items: center;
 --max-width: 64em;
 --container--spacing-inline: 1em;
  width: min(var(--max-width), 100% - var(--container--spacing-inline) * 2);
  margin-inline: auto;
}

.banner-image {
  transform: scale(1.1);
  will-change: transform;
}

.banner-content--claim h1,
.banner-content--claim p {
  opacity: 0;
  transform: translateY(40px);
}

.banner-content--claim {
  color: var(--color-theme-900);
    padding-inline: 1rem;
}

.banner-content--claim h1 {
  font-size: var(--font-size-h-1xl);
}

.banner-content--claim p {
  font-size: var(--font-size-h-lg);
}

.header-banner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.header-banner--bg {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media (width > 600px) {

    .header-banner--bg {
  width: 100%;
  aspect-ratio: 16 / 5;
}

}


.header-banner--bg {
  will-change: transform;
}

/* Main Content */

.block-editable > *:not(:nth-child(2) ~ *) {
  margin-block-end: 1em;
}

.block-editable--headline h1 {
  font-size: var(--font-size-h-1xl);
}

.block-editable--headline h2 {
  font-size: var(--font-size-h-2xl);
}

.block-editable--headline h3 {
  font-size: var(--font-size-h-lg);
}

.block-editable--wysiwyg p {
  margin-block: .5em;
}

.block-editable--list h3 {
  font-size: var(--font-size-h-sm);
  margin-block-end: .5em;
}

.block-editable--list ul {
  font-size: var(--font-size-base);
  padding: 1em;
}

.block-editable--list li {
  list-style-position: outside;
  list-style-type: disc;
}

.block-editable--list li::marker {
  color: var(--clr-accent-200);
}

.switcher-custom {
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
  --threshold: 46em;
}

.switcher-custom > * {
  flex-grow: 1;
  flex-basis: calc((var(--threshold) - 100%) * 999);
}

.switcher-custom--wysiwyg > * {
  margin-block-end: .5em;
}

.switcher-custom--wysiwyg h2 {
  font-size: var(--font-size-h-2xl);
}

.switcher-custom--wysiwyg p {
  font-size: var(--font-size-base);
}

.section-heading {
    display: block;
    position: relative;
    margin-block-end: 1em;
}

.section-heading--before h3 {
    font-size: var(--font-size-h-lg);
}

.section-heading--before p {
    font-size: var(--font-size-base);
}

.website-cards {
    display: flex;
    flex-wrap: wrap;
    align-items: center
    --threshold: 40em;
  }
  
  .website-cards > *  {
    flex: calc((var(--threshold) - 100%) * 999);
    color: var(--color-theme-900);
  }
  
  .website-cards--card {
    justify-content: space-between;
    align-items: flex-start;
    display: flex;
    gap: 1em;
  }


.card-single {
    text-align: center;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 1em;
  display: flex;
  box-shadow: 0 10px 10px #00000008, 0 5px 10px 2px #0000000d;
}

.card-single > * {
    margin-block-end: 1em;
}

.card-single {
  opacity: 0;
  transform: translateY(30px);
}


.card-single--icon svg {
  width: 60px;
  height: 60px;
}

/* CUSTOM GRID CARDS */

.custom-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1em;
}

.custom-cards--card {
    display:flex;
    justify-content: flex-start;
    flex-direction: column;
     border-radius: .5em;
    background-color: var(--color-accent-200);
}

.custom-cards--card:has(img) {
   overflow: hidden;
}

.custom-cards--card img {
    width: 100%;
    max-width:100%;
    height: auto;
    object-fit: cover;
}

.card-content {
   padding: .5em;
}

.card-content:has(h4) {
   margin-block-end: 1em
}

.card-content h4 {
   font-size: var(--font-size-h-sm);
}

.card-content p {
   font-size: var(--font-size-base);
}

/* CONTENT FLEX */

.content-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
}

.content-flex > :first-child {
    flex-basis: 24em;
    flex-grow: 1;
}

.content-flex > :last-child {
    flex-basis: 0;
    flex-grow: 999;
    min-inline-size: 50%;
}

.content-flex--child img {
    width: 280px;
    max-width: 100%;
    height: auto;
}

.website-cta {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 2em;
  text-align: center;
  background-color: var(--color-accent-200);
  border-radius: .5em;
}

.website-cta > *:not(:last-child) {
  padding-block-end: 1em;
}

.website-cta--headline h3 {
  font-size: var(--font-size-h-sm);
}

.website-cta--teaser p {
  font-size: var(--font-size-base);
}

.block-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
  --threshold: 60em;
}

.block-switcher > * {
  flex-grow: 1;
  flex-basis: calc((var(--threshold) - 100%) * 999);
}

.block-switcher--image img {
    width: 100%;
    height:auto;
    object-fit: cover;
}

.wysiwyg-eyebrow {
    font-size: var(--font-size-base);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.wysiwyg-content > * {
    margin-block: .5em;
}

.wysiwyg-content h2 {
  font-size: var(--font-size-h-2xl);
}

.wysiwyg-content p {
  font-size: var(--font-size-base);
}

.section-teaser {
  --max-width: 50em;
  --container--spacing-inline: 1em;
  width: min(var(--max-width), 100% - var(--container--spacing-inline) * 2);
  margin-inline: auto;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.section-teaser--icon {
  width: 64px;
  height: 64px;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.section-teaser--icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.section-teaser--text {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--color-theme-100);
}

.section-teaser--text > * { 
  margin-block-end: .5rem;
  text-align: center;
}

.section-teaser--text h3 {
  font-size: var(--font-size-h-lg);
  margin-block-end: .5em;
}

.section-blockquote {
  --max-width: 50em;
  --container--spacing-inline: 1em;
  width: min(var(--max-width), 100% - var(--container--spacing-inline) * 2);
  margin-inline: auto;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.section-blockquote--icon {
  width: 64px;
  height: 64px;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.section-blockquote--icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.section-blockquote--text {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.section-blockquote--text > * { 
  margin-block-end: .5rem;
  text-align: center;
}

.section-blockquote--text p {
  font-size: var(--font-size-h-lg);
}

.section-blockquote--name small {
  font-size: var(--font-size-base);
}

.section-list li {
    display: flex;
    flex-wrap: wrap;
    gap: 2em;
}

.section-list li > .section-list--image {
    flex-basis: 20rem;
    flex-grow: 1;
}

.section-list--image {
    overflow: hidden;
}

.section-list--image img {
    width: 300px;
    max-width: 100%;
    height: auto;
}

.section-list  li > .section-list--content {
    flex-basis: 0;
    flex-grow: 999;
    min-inline-size: 50%;
}

.section-list--content > * {
    margin-block-end: .5rem;
}

.section-list--content h3 {
    font-size: var(--font-size-h-lg);
}

.section-list--content p {
  font-size: var(--font-size-base);
}

/* Section Banner */

.section-banner {
    display: flex;
    justify-content: center;
    flex-direction: column;
    --max-width: 80em;
  --container--spacing-inline: 1em;
  width: min(var(--max-width), 100% - var(--container--spacing-inline) * 2);
  margin-inline: auto;
}

.block-service--custom {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 2em;
  position: relative;
}

.block-service--custom > :first-child {
    flex-basis: 24em;
    flex-grow: 1;
}

.block-service--custom > :last-child {
    flex-basis: 0;
    flex-grow: 999;
    min-inline-size: 50%;
}

.custom-list {
    display: block;
}

.section-heading {
    position: relative;
    margin-block-end: 2rem;
}

.section-heading--headline h2 {
    font-size: var(--font-size-h-2xl);
}

.custom-list--item {
     border-bottom: 1px solid var(--color-accent-400);
  padding-block: 1em;
  display: flex;
  justify-content: space-between;
    align-items: center
}

.custom-list--headline h3 {
    font-size: var(--font-size-h-sm);
    margin-block: 1rem;
}

.custom-list--item h4 {
     font-size: var(--font-size-base);
}


.custom-list--item .price {
     font-size: var(--font-size-base);
    color: var(--color-theme-900);
}


.block-service--note {
    position: relative;
    margin-block: 1rem;
}

.block-service--note p {
    font-size: var(--font-size-base);
}

.block-container {
    position: relative
}

.block-container--base > * {
    margin-block-end: 1rem;
}

.block-container--base h2 {
    font-size: var(--font-size-h-2xl);
}


.section-intro {
    display: flex;
    justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1em;
    position: relative;
}

.section-intro--block > * {
    margin-block-end: 1rem;
}

.section-intro--block h1 {
   font-size: var(--font-size-h-1xl);
}

.section-intro--block svg {
   width: 100%;
    height: 100%;
    
}

.wysiwyg-list--style:last-child {
    margin-block-start: 1rem;
    border-top: 1px solid var(--color-accent-400);
  padding-block: 1em;
}

/* Default Page */

.wp-block {
    --max-width: 50em;
    --container--spacing-inline: 1em;
    width: min(var(--max-width), 100% - var(--container--spacing-inline) * 2);
    margin: 0 auto;
    margin-inline: auto;
    position: relative; 
}

.wp-block--headline h1 {
    font-size: var(--font-size-h-1xl);
}

.wp-block--editor {
    margin-block: 2.5em;
}

.wp-block-heading {
    margin-block-start: 1em;
    margin-block-end: .5em;
}

h2.wp-block-heading {
    font-size: var(--font-size-h-2xl);
}

h3.wp-block-heading {
    font-size: var(--font-size-h-lg);
}

h4.wp-block-heading {
    
}

ul.wp-block-list {
    margin-block: 1em;
}

.wp-block--editor p {
   font-size: var(--font-size-base);
}

.block-editable {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.block-editable > *:not(:nth-child(2) ~ *) {
  margin-block-end: 1em;
}

.block-editable--eyebrow {
    font-size: var(--font-size-base);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.block-editable--eyebrow {
  opacity: 0;
  transform: translateY(30px);
}

.block-editable--headline h1 {
  font-size: var(--font-size-h-1xl);
}

.block-editable--headline h2 {
  font-size: var(--font-size-h-2xl);
}

.block-editable--headline h3 {
  font-size: var(--font-size-h-lg);
}

.block-editable--wysiwyg p {
  margin-block: 1em;
}

.block-container--announcement {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding: 2em;
}

.block-container--announcement > *:not(:last-child) {
    margin-block-end: .5em;
}

.block-container--announcement h2 {
    font-size: var(--font-size-h-lg);
}

.block-container--announcement p {
    font-size: var(--font-size-h-sm);
    text-align: center;
}

.section-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
  --threshold: 60em;
}

.section-columns > * {
  flex-grow: 1;
  flex-basis: calc((var(--threshold) - 100%) * 999);
}

.section-column--column > *:not(:last-child) {
     margin-block-end: .5rem;
}

.section-column--column h2 {
     font-size: var(--font-size-h-2xl);
}

.section-column--column p,
.section-column--column ul {
     font-size: var(--font-size-base);
}

.section-theme-404 {
    position: relative
}

.section-theme-404 > * {
     margin-block-end: 1rem;
}

.theme-404--headline h1 {
     font-size: var(--font-size-h-1xl);
}

.theme-404--headline h2 {
     font-size: var(--font-size-h-2xl);
}

.theme-404--main p,
.theme-404--main ul {
     font-size: var(--font-size-base);
}

/* Footer */

.site-footer {
  width: 100%;
  padding-block: 5em;
  background-color: var(--color-theme-900);
  color: var(--color-theme-100);
}

.site-footer > * {
  --max-width: 80em;
  --padding: 1em;
  width: min(var(--max-width), 100% - var(--padding) * 2);
  margin: 0 auto;
  margin-inline: auto;
}

.site-footer--content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1em;
}

.footer-block--visual img {
  width: 260px;
  max-width: 100%;
  height: auto;
}

.footer-block--headline h2 {
    font-size: var(--font-size-h-lg);
    margin-block-end: .5em
}

.footer-block--list:last-child {
    margin-block-start: 1rem;
}

.footer-block--list li {
    display: flex;
    align-items: center;
}

.footer-block--list li a {
    color: var(--color-theme-100);
}

.site-footer--meta {
    display: flex; 
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-block-start: 2.5em;
}

.site-footer--meta > * {
  display: inline-flex;
  align-items: center;
  gap: 1em;
}

.menu-meta {
    display: inline-flex;
    gap: 1em;
}

.menu-meta a {
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-base);
  color: var(--color-accent-100);
  transition: text-decoration-color .2s ease-in-out;
}

.menu-meta a:hover { 
    text-decoration-color: var(--color-accent-100);
    text-decoration-line: underline;
    text-decoration-skip: spaces;
    text-underline-offset: 6px;
    text-decoration-thickness: 2px;
}

.menu-meta a[aria-current="page"] {
    text-decoration-color: var(--color-theme-100); 
    text-decoration-line: underline;
    text-decoration-skip: spaces;
    text-underline-offset: 6px;
    text-decoration-thickness: 2px;
}

@media (prefers-contrast: more) {
    :root {
      
    --color-theme-100: #F9F8F7;
    --color-theme-900: #0d0d0d;
    
    --color-accent-200: #c8056f;
    --color-accent-400: #EDE7E3;
    
    --color-box-shadow: 0 2px 2px rgba(19, 18, 18, .8);
        
    }

    .button-burger {
      border: 1px solid var(--color-theme-900);  
    }

    .button {
      letter-spacing: 2px;
    }
    
    .button-default {
        border: 2px solid var(--color-accent-200); 
  background-color: var(--color-theme-900);
  color: var(--color-theme-100);

  &:hover {
      border: 2px solid var(--color-theme-900); 
    background-color: var(--color-accent-200);
    color: var(--color-theme-100);
  }

  &:focus-visible {
    outline: 2px solid var(--color-theme-900);
    outline-offset: 4px;
  }

}

.button-inverted {
  background-color: var(--color-theme-900);
  color: var(--color-accent-400);
    border: 2px solid var(--color-accent-200);

  &:hover {
    background-color: var(--color-accent-200);
    color: var(--color-theme-900);
  }

  &:focus-visible {
    outline: 2px solid var(--color-theme-900);
    outline-offset: 2px;
  }

}
}