/* RESET */
* {
   margin: 0;
   padding: 0;
   border: 0;
   box-sizing: border-box;
}
html {
   scroll-behavior: smooth;
}
@font-face {
   font-family: "Sofia-Normal";
   src: url("font/sofia-sans_normal_1-1000.ttf");
}
@font-face {
   font-family: "Sofia-Condensed";
   src: url("font/sofia-sans-extra-condensed_normal_1-1000.woff2");
}
:root {
   --logo-braun: #b37c40;
   --hero-headding-yellow: #fcb900;
   --hero-headding-orange: #e5683a;
   --background-brown: #c7a174;
   --background-lighter-brown: #e0c595;
   --background-sand: #ffedd4;
   --background-almost-white: #fffbf2;
   --background-white: #ffffff;
   --button-color-orange: #ff6900;
   --button-color-hover-yellow: #fcb900;
   --pink: #f9d3b9;
   --dirty-pink: #eed7c5;
   --dirty-brown: #edd7ad;
   --piggy-pink: #ffc79f;
   --light-pink: #fdddc4;

   --nav-button-size: 3rem;
   --nav-background-size: 2rem;
   --nav-button-top: 1.45rem;
   --nav-button-right: 1.5rem;
   --nav-background-top: 1.7rem;
   --nav-background-right: 1.7rem;
   --nav-button-color: rgb(44, 1, 1);
   --hamburger-patties-pos: 1.4rem;
   --hamburger-patties-space: 0.5rem;
   --hamburger-patties-space-hover: 0.5rem;
   --hamburger-patties-thick: 3px;
   --hamburger-patties-width: 2rem;
   --menu-background-color: rgb(37, 3, 3);

   --heading-one: clamp(3rem, 3rem + ((1vw - 0.2rem) * 2.054), 4.9rem);
   --heading-three: clamp(2rem, 2rem + ((1vw - 0.2rem) * 0.541), 2.5rem);
   --heading-four: clamp(1.9rem, 1.9rem + ((1vw - 0.2rem) * 0.432), 2.3rem);
   --heading-five: clamp(1.6rem, 1.6rem + ((1vw - 0.2rem) * 0.216), 1.8rem);
   --heading-two-special: clamp(2rem, 2rem + ((1vw - 0.2rem) * 1.297), 3.2rem);
   /* --two-column-left-right-padding: 1.2rem; */

   --font-size--para-big: clamp(1.5rem, 1.5rem + ((1vw - 0.2rem) * 0.757), 2.2rem);
   --font-size--para-mid: clamp(1.4rem, 1.4rem + ((1vw - 0.2rem) * 0.649), 2rem);
   --font-size--para-small: clamp(1.3rem, 1.3rem + ((1vw - 0.2rem) * 0.324), 1.6rem);

   --wrapper-max-width: 1800px;
   --wrapper-padding-left-right: 1.5rem;
   --wrapper-for-cards-padding-left-right: 0rem;

   margin: 0;
   padding: 0;
   font-family: "Sofia-Condensed";
   font-size: 16px;
}
/* ..................................... HILFSMITTEL ............................... */
/* ..................................... HILFSMITTEL ............................... */
/* ..................................... HILFSMITTEL ............................... */
/* ..................................... HILFSMITTEL ............................... */

/*  BACKGROUNDS */

.background-piggy-pink {
   background-color: var(--piggy-pink);
}

.background-light-pink {
   background-color: var(--light-pink);
}

.background-dirty-pink {
   background-color: var(--dirty-pink);
}

.background-pink {
   background-color: var(--pink);
}

.background-dirty-brown {
   background-color: var(--dirty-brown);
}

.background-brown {
   background-color: var(--background-brown);
}

.background-sand {
   background-color: var(--background-sand);
}

.background-almost-white {
   background-color: var(--background-almost-white);
}

.background-lighter-brown {
   background-color: var(--background-lighter-brown);
}
.blank {
   height: 2.6rem;
}

/* POSITIONING  .................................................*/

.card-padding {
   padding: 1.5rem;
}

.to-the-right {
   text-align: left;
}

.center-heading {
   text-align: left;
}
.margin-left-right {
   margin-left: var(--wrapper-padding-left-right);
   margin-right: var(--wrapper-padding-left-right);
}
.bottom-one-rem-down {
   margin-bottom: 1rem;
}
.bottom-two-rem-down {
   margin-bottom: 2rem;
}

.top-bottom-margin {
   margin-top: 2rem;
   margin-bottom: 1rem;
}

.top-bottom-pad {
   padding-top: 3rem;
   padding-bottom: 3rem;
}
.top-pad {
   padding-top: 3rem;
}

.bottom-pad {
   padding-bottom: 3rem;
}

.weniger-top {
   position: relative;
   top: -40px;
}

.headline-weniger-botton {
   margin-bottom: -1rem;
}

.wrapper,
.wrapper-for-cards {
   margin-inline: auto;
   /* padding-top: 3rem;
   padding-bottom: 3rem; */
}

.wrapper {
   width: min(var(--wrapper-max-width), 100% - (var(--wrapper-padding-left-right) * 2));
}
.wrapper-for-cards {
   width: min(var(--wrapper-max-width), 100% - (var(--wrapper-for-cards-padding-left-right) * 2));
}

.wrapper-1400-max {
   max-width: 1400px;
   margin-inline: auto;
}

.wrapper-1200-max {
   max-width: 1200px;
   margin-inline: auto;
}

.wrapper-720-max {
   max-width: 720px;
   margin-inline: auto;
}

.two-columns {
   display: grid;
   grid-template-columns: 1fr;
   /* gap: var(--columns-gap); */
}

.three-columns {
   display: grid;
   grid-template-columns: 1fr;
}

.four-columns {
   display: grid;
   grid-template-columns: 1fr;
}

.border-middle {
   padding-bottom: 2rem;
   border-bottom: 1px dotted var(--background-lighter-brown);
   margin-bottom: 1.1rem;
}

.put-on-second-pos {
   grid-row: 2 / 3;
   border-width: 1px 0px;
   border-style: solid;
   text-align: center;
   padding: 20px 40px;
}

.put-on-second-pos h2 {
   font-size: 2rem;
}

.grid-senkrecht {
   display: grid;
}

/*
card-gaps = small-screen
gaps-immer =  für Tafeln ohne Cards
gaps-manchmal = für Tafeln ohne Cards, die aber auf small screen
                  ohne Lücken dargestellt werden soll  */
.card-gaps {
   gap: 1rem;
}

.kunden-gaps-unten {
   gap: 1rem;
}

.gaps-immer {
   gap: 1rem;
}

.gaps-manchmal {
   gap: 0rem;
}

/*  .............................................................. */

.columns-footer {
   display: grid;
   grid-template-columns: 1fr;
   gap: 2rem;
}

hr {
   --hr-margin-t-b: 1rem;
   height: 1px;
   background-color: black;
   margin-top: var(--hr-margin-t-b);
   margin-bottom: var(--hr-margin-t-b);
}

.dotted-hr {
   width: 100% !important;
   height: 1px !important;
   border: none !important;
   height: 1px !important;
   background-color: none !important;
   background: currentColor !important;
   background: repeating-linear-gradient(90deg, currentColor, currentColor 2px, transparent 2px, transparent 5px) !important;
}

/* ........................ FONT DESIGN .................................. */
/* ........................ FONT DESIGN .................................. */
/* ........................ FONT DESIGN .................................. */
/* ........................ FONT DESIGN .................................. */

h1 {
   font-size: var(--heading-one);
   font-style: normal;
   font-weight: 400;
   text-transform: uppercase;
   line-height: 0.89;
}

h2 {
   font-size: var(--heading-one);
   font-style: normal;
   font-weight: 400;
   text-transform: uppercase;
   line-height: 0.89;
}

h3 {
   font-size: var(--heading-three);
   font-style: normal;
   font-weight: 400;
   text-transform: uppercase;
   line-height: 0.89;
}

h4 {
   font-size: var(--heading-four);
   font-style: normal;
   font-weight: 400;
   text-transform: uppercase;
   line-height: 0.89;
}

h5 {
   font-size: var(--heading-five);
   font-style: normal;
   font-weight: 400;
   text-transform: uppercase;
   line-height: 0.89;
}

.heading-margin {
   margin-top: 0.9rem;
   margin-bottom: 2.5rem;
}
a[href^="tel"] {
   color: inherit;
   text-decoration: none !important;
}

p,
.auflistung {
   font-size: var(--font-size--para-small);
   line-height: 1.3;
   hyphens: auto;
}

p {
   margin-bottom: 1rem;
}

.no-margin {
   margin-bottom: 0rem;
}

.cookie-info {
   margin-top: 1rem;
   font-size: 1.2rem;
}
.cookie-info a {
   text-decoration: none;
   color: var(--button-color-orange);
   text-transform: uppercase;
}
.cookie-info a:hover {
   color: black;
}

.formalitaeten h1 {
   font-size: 3.5rem;
   margin-top: 2.3rem;
   margin-bottom: 0.4rem;
}
.formalitaeten h2 {
   font-size: 3rem;
   margin-top: 2.3rem;
   margin-bottom: 0.4rem;
}
.formalitaeten h3 {
   /* font-size: 3rem; */
   margin-top: 0.5rem;
   margin-bottom: 0.7rem;
}
.formalitaeten h4 {
   font-size: 2rem;
   text-transform: none;
   margin-top: 0.5rem;
   margin-bottom: 0.7rem;
}
.formalitaeten p {
   /* font-size: 3rem; */
   /* margin-top: 0.5rem; */
   margin-bottom: 3rem;
}
.formalitaeten ul {
   font-size: 1.5rem;
   /* margin-top: 0.5rem; */
   margin-bottom: 3rem;
}

.auflistung {
   list-style-type: "- ";
   padding-left: 0.44rem;
}

strong {
   font-weight: 590;
}

ol {
   /* list-style-position: inside; */
   padding-left: 19px;
}

.para-big {
   font-size: var(--font-size--para-big);
}

.cursiv {
   font-style: italic;
}

.teaser-text {
   font-size: clamp(1.352rem, 1.352rem + ((1vw - 0.2rem) * 0.917), 2.2rem);
   letter-spacing: 0.5px;
}

/* .............................. HEADER ...................................... */
/* .............................. HEADER ...................................... */
/* .............................. HEADER ...................................... */
/* .............................. HEADER ...................................... */

header {
   padding-top: 1.3rem;
   padding-bottom: 1rem;
   padding-left: 1.5rem;
   padding-right: 1.5rem;
}

/* .............................. Menu ...................................... */
/* .............................. Menu ...................................... */
/* .............................. Menu ...................................... */
/* .............................. Menu ...................................... */
nav {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   text-transform: uppercase;
   line-height: 1;
   letter-spacing: 1px;
   font-size: 3rem;
   font-weight: 400;
}

.menu a {
   text-decoration: none;
   color: var(--logo-braun);
   position: relative;
   top: -0.2rem;
}

ul {
   list-style: none;
}

.active::after {
   position: absolute;
   content: "";
   top: 90%;
   left: 0;
   width: 100%;
   height: 2px;
   background: var(--logo-braun);
}

.inactive:link::after {
   position: absolute;
   content: "";
   top: 90%;
   left: 0;
   width: 100%;
   height: 2px;
   background: var(--logo-braun);
   transform: scaleX(0);
   transform-origin: right;
   transition: transform 1s;
}

.inactive:visited::after,
.inactive:focus::after {
   transform: scaleX(0);
}

.inactive:hover::after {
   transform: scaleX(1);
   transform-origin: left;
   /* transition: transform 1s; */
}

.nav-list-footer-mitte {
   font-size: var(--heading-four);
   text-transform: uppercase;
   line-height: 1.3;
}

.nav-list-footer-rechts {
   font-size: clamp(1.5rem, 1.146rem + ((1vw - 0.2rem) * 0.707), 1.8rem);
   text-transform: uppercase;
}

.nav-list-footer-mitte a,
.nav-list-footer-rechts a {
   position: relative;
   text-decoration: none;
   color: black;
}

.nav-list-footer-mitte .active::after,
.nav-list-footer-mitte .inactive::after,
.nav-list-footer-rechts .active::after,
.nav-list-footer-rechts .inactive::after {
   background: black;
}

/* .nav-list-footer-mitte .inactive:hover::after,
.nav-list-footer-rechts .inactive:hover::after {
   transform: scaleX(1);
   transform-origin: left;
} */

.navigation__checkbox {
   display: none;
}

.nav-list {
   position: fixed;
   display: flex;
   gap: 15px;
   flex-direction: column;
   list-style: none;
   z-index: 11;
   top: 40px;
   left: 0px;
   margin-left: 1.5rem;
   transform: translateX(-300px);
   opacity: 0;
   transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* .............................. HAMBURGER MENU .................................... */
/* .............................. HAMBURGER MENU .................................... */

.navigation__checkbox:checked ~ .nav-list {
   opacity: 1;
   transform: translateX(0);
}

.navigation__icon {
   position: relative;
   margin-top: var(--hamburger-patties-pos);
}

.navigation__icon,
.navigation__icon::before,
.navigation__icon::after {
   width: var(--hamburger-patties-width);
   height: var(--hamburger-patties-thick);
   background-color: #fff;
   display: inline-block;
}

.navigation__icon::before,
.navigation__icon::after {
   content: "";
   position: absolute;
   left: 0;
   transition: all 0.2s;
}

.navigation__icon::before {
   top: calc((var(--hamburger-patties-space)) * -1);
}

.navigation__icon::after {
   top: var(--hamburger-patties-space);
}

.navigation__button:hover .navigation__icon::before {
   top: var(--hamburger-patties-space-hover);
}

.navigation__button:hover .navigation__icon::after {
   top: calc(var(--hamburger-patties-space-hover) * -1);
}

.navigation__checkbox:checked + .navigation__button .navigation__icon {
   background-color: transparent;
}

.navigation__checkbox:checked + .navigation__button .navigation__icon::before {
   top: 0;
   transform: rotate(135deg);
}

.navigation__checkbox:checked + .navigation__button .navigation__icon::after {
   top: 0;
   transform: rotate(-135deg);
}

.navigation__button {
   position: absolute;
   background-color: var(--logo-braun);
   height: var(--nav-button-size);
   width: var(--nav-button-size);
   top: var(--nav-button-top);
   right: var(--nav-button-right);
   border-radius: 50%;
   z-index: 2000;
   text-align: center;
   cursor: pointer;
   visibility: visible;
}

.navigation__background {
   position: absolute;
   height: var(--nav-background-size);
   width: var(--nav-background-size);
   top: var(--nav-background-top);
   right: var(--nav-background-right);
   border-radius: 50%;
   background: var(--background-almost-white);
   z-index: 10;
   transition: transform 0.8s cubic-bezier(0.86, 0, 0.07, 1);
   visibility: visible;
}

.navigation__checkbox:checked ~ .navigation__background {
   transform: scale(80);
}

/* .............................. BUTTONS ....................................  */
/* .............................. BUTTONS ....................................  */
/* .............................. BUTTONS ....................................  */
/* .............................. BUTTONS ....................................  */

.bw-transparent-button,
.big-button,
.card-button,
.single-button,
.single-button-wider,
.single-button-black,
.single-button-wider-yellow,
.zum-seiten-anfang,
.kalender-button {
   text-transform: uppercase;
   text-decoration: none;
   text-align: center;
   transition: 0.8s;
}

.bw-transparent-button {
   display: inline-block;
   /* font-size: 1.3rem; */
   font-size: clamp(1.3rem, 6vw, 1.5rem);
   letter-spacing: 0.06rem;
   color: black;
   border: 2px solid black;
   border-radius: 0.15rem;
   background-color: transparent;
   padding: 0.8rem 1.3rem;
}

.bw-transparent-button:hover {
   background-color: var(--button-color-hover-yellow);
}

.inline-block {
   display: inline-block;
   margin-top: 20px;
}
.right-1-point-2-rem {
   margin-right: 1.2rem;
}

.big-button {
   display: inline-block;
   width: 100%;
   font-size: clamp(1.551rem, 1.551rem + ((1vw - 0.2rem) * 1.134), 2.6rem);
   letter-spacing: 1px;
   color: white;
   background-color: var(--button-color-orange);
   border-radius: 0.3rem;
   padding: 1rem 1rem;
   margin-top: 2rem;
}

.card-button {
   display: block;
   /* font-size: 1.8rem; */
   font-size: clamp(1.374rem, 7vw, 1.8rem);
   letter-spacing: 0.06rem;
   color: white;
   background-color: var(--button-color-orange);
   border-radius: 0.15rem;
   padding: 0.8rem 0;
   margin: 1rem 0;
}

.single-button {
   display: inline-block;
   /* font-size: 1.8rem; */
   font-size: clamp(1.374rem, 7vw, 1.8rem);
   letter-spacing: 0.06rem;
   color: white;
   background-color: var(--button-color-orange);
   border-radius: 0.15rem;
   padding: 0.8rem 2.5rem;
   margin: 1rem 0;
}
.single-button-wider {
   display: inline-block;
   font-size: clamp(1.374rem, 7vw, 1.8rem);
   letter-spacing: 0.06rem;
   color: white;
   background-color: var(--button-color-orange);
   border-radius: 0.15rem;
   padding: 0.9rem 4.8rem;
}
.single-button-wider-yellow {
   display: inline-block;
   font-size: clamp(1.374rem, 7vw, 1.8rem);
   letter-spacing: 0.06rem;
   color: black;
   background-color: var(--button-color-hover-yellow);
   border-radius: 0.15rem;
   padding: 1rem 2rem;
}

.zum-seiten-anfang {
   display: inline-block;
   font-size: 1.3rem;
   letter-spacing: 0.06rem;
   color: black;
   background-color: var(--button-color-hover-yellow);
   border-radius: 0.15rem;
   padding: 0.9rem 1.8rem;
}

.single-button-wider-yellow:hover,
.zum-seiten-anfang:hover {
   background-color: var(--button-color-orange);
   color: white;
}

.single-button-black {
   display: inline-block;
   font-size: 1.3rem;
   letter-spacing: 0.06rem;
   color: white;
   background-color: black;
   border-radius: 0.15rem;
   padding: 1rem 2rem;
   /* margin: 3rem 0; */
}

.kalender-button {
   display: inline-block;
   font-size: clamp(1.374rem, 7vw, 1.8rem);
   letter-spacing: 0.06rem;
   color: white;
   background-color: var(--button-color-orange);
   border-radius: 0.15rem;
   padding: 0.9rem 2rem;
   cursor: pointer;
}

.pos-relative {
   position: relative;
}

/* .tidycal-embed-gljl2 {
   border: medium;
   width: 1px;
   min-width: 70% m !important;
   height: 785px;
   overflow: hidden;
   min-height: 500px;
   margin-inline: auto !important;
}
.kalender {
   width: 300px !important;
} */

.kalender {
   position: fixed;
   z-index: 2000;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   /* overflow: auto; */
   background-color: rgb(0, 0, 0);
   background-color: rgba(0, 0, 0, 0.6);
   display: none;
}
.modal-content {
   background-color: #ffffff;
   margin: 0 auto;
   /* padding: 20px; */
   width: 80%;
   height: 100%;
   /* overflow: hidden; */
}

.iframe {
   /* border: medium; */
   /* width: 1px; */
   width: 100%;
   height: 90%;
   /* height: 850px;
   min-height: 500px; */
   overflow-x: hidden !important;
   overflow-y: scroll !important;
   /* overflow: hidden; */
   /* min-height: 500px; */
}
.close-x {
   /* margin-top: 3rem; */
   display: flex;
   /* text-align: center; */
   /* margin-inline: auto; */
   margin-left: auto;
   margin-right: auto;
   padding: 2rem;
   font-size: 2rem;
   cursor: pointer;
   color: var(--logo-braun);
   /* text-transform: uppercase; */
}
.kalender-checkbox {
   display: none;
}
.kalender-checkbox:checked ~ .kalender {
   display: block;
}

.lowercase {
   text-transform: lowercase;
}

.telefon-text {
   /* font-size: 2.5rem; */
   font-size: clamp(2.5rem, 2.9vw + 1rem, 3.6rem);
}

/* .kalender-button {
   background-color: var(--button-color-orange);
   border-width: 0;
   color: #fff;
   font-size: clamp(1.4rem, 1.4rem + ((1vw - 0.2rem) * 0.324), 1.7rem);
   line-height: inherit;
   padding: calc(0.667em + 2px) calc(1.333em + 2px) !important;
   text-decoration: none;
   font-style: normal;
   font-weight: 500;
   letter-spacing: 1px;
   text-transform: uppercase;
   border-radius: 3px;
   cursor: pointer;
} */

.big-button:hover,
.card-button:hover,
.single-button:hover,
.single-button-wider:hover,
.kalender-button:hover {
   background-color: var(--button-color-hover-yellow);
   color: black;
}

.button-flex {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 1rem;
   justify-content: center;
}

/* ..................... HERO SECTION .................................... */
/* ..................... HERO SECTION .................................... */
/* ..................... HERO SECTION .................................... */
/* ..................... HERO SECTION .................................... */

.hero {
   position: relative;
   margin: 0;
   padding: 0;
   font-size: 0;
}

.logo-header {
   width: clamp(200px, 30vw, 300px);
   vertical-align: middle;
}

/* START-SEITE */

.hero-image-start {
   object-fit: cover;
   max-height: 75vh;
   width: 100%;
   object-position: 60% 31%;
}

.hero-image-angebot {
   object-fit: cover;
   max-height: 75vh;
   width: 100%;
   object-position: 46% 18%;
}

.hero-image-arbeitsweise {
   object-fit: cover;
   max-height: 75vh;
   width: 100%;
   object-position: 70% 36%;
}

.hero-image-uber-mich {
   object-fit: cover;
   max-height: 75vh;
   width: 100%;
   object-position: 67% 2%;
}

.hero-image-kontakt {
   object-fit: cover;
   max-height: 75vh;
   width: 100%;
   object-position: 50% 50%;
}

/* HERO Text (auf Bild) ....................................................... */
/* HERO Text (auf Bild) ....................................................... */

/* START-SEITE */

.hero-text-start {
   position: absolute;
   bottom: 1rem;
   left: 1rem;
   text-transform: uppercase;
   line-height: 0.659;
   font-size: clamp(4rem, 10vw + 1rem, 12rem);
   /* font-size: 4rem; */
   font-weight: 900;
}

.hero-txt-start-1 {
   color: var(--hero-headding-orange);
}

.hero-txt-start-2 {
   color: var(--hero-headding-yellow);
}

/* START-SEITE KUNDENSTIMMEN */
.kunde {
   margin-top: 1rem;
   font-size: clamp(1.198rem, 1.198rem + ((1vw - 0.2rem) * 0.759), 1.9rem);
}

.beruf {
   font-size: clamp(0.984rem, 0.984rem + ((1vw - 0.2rem) * 0.558), 1.5rem);
}

/* ANGEBOT-SEITE */

.hero-text-angebot {
   position: absolute;
   bottom: 1rem;
   right: 1rem;
   text-transform: uppercase;
   line-height: 0.7;
   /* font-size: clamp(4.4rem, 7.4vw + 1rem, 8.5rem); */
   font-weight: 900;
}

.hero-txt-angebot-1 {
   font-size: clamp(3.3rem, 7vw + 1rem, 8.5rem);

   color: var(--hero-headding-orange);

   /* font-size: 3.8rem; */
}
.hero-txt-angebot-2 {
   display: inline-block;
   line-height: 0.6;
   color: var(--hero-headding-orange);
   font-size: clamp(4.4rem, 8.2vw + 1rem, 10.4rem);
   /* font-size: 4.7rem; */
}
.hero-txt-angebot-3 {
   display: inline-block;
   font-size: clamp(3rem, 7vw + 1rem, 7.9rem);
   color: var(--hero-headding-yellow);
   /* font-size: 7.9rem; */
}
.hero-txt-angebot-4 {
   font-size: clamp(7rem, 14.9vw + 1rem, 18rem);
   color: var(--hero-headding-yellow);
   line-height: 0.66;
   /* font-size: 15vw; */
}

/* ARBEITSWEISE SEITE */

.hero-text-arbeitsweise {
   position: absolute;
   bottom: 1rem;
   left: 1rem;
   text-transform: uppercase;
   line-height: 0.7;
   /* font-size: clamp(4.4rem, 7.4vw + 1rem, 8.5rem); */
   font-weight: 900;
}

.hero-txt-arbeitsweise-1 {
   /* font-size: 5rem; */
   font-size: clamp(5rem, 10vw + 1rem, 12rem);
   line-height: 0.65;
   color: var(--hero-headding-orange);
}
.hero-txt-arbeitsweise-2 {
   /* font-size: 5.6rem; */
   font-size: clamp(5rem, 11.667vw + 1rem, 14rem);
   line-height: 0.66;
   color: var(--hero-headding-yellow);
}
.hero-txt-arbeitsweise-3 {
   /* font-size: 5rem; */
   font-size: clamp(5rem, 10vw + 1rem, 12rem);
   line-height: 0.65;
   color: var(--hero-headding-orange);
}

/* UBER MICH SEITE */

.hero-text-uber-mich {
   position: absolute;
   bottom: 1rem;
   left: 1rem;
   text-transform: uppercase;
   line-height: 0.7;
   /* font-size: clamp(4.4rem, 7.4vw + 1rem, 8.5rem); */
   font-weight: 900;
}

.hero-txt-uber-mich-1 {
   /* font-size: 5rem; */
   font-size: clamp(5rem, 10vw + 1rem, 12rem);
   line-height: 0.65;
   color: var(--hero-headding-orange);
}
.hero-txt-uber-mich-2 {
   /* font-size: 5.6rem; */
   font-size: clamp(5rem, 11.667vw + 1rem, 14rem);
   line-height: 0.66;
   color: var(--hero-headding-yellow);
}
.hero-txt-uber-mich-3 {
   /* font-size: 5rem; */
   font-size: clamp(5rem, 10vw + 1rem, 12rem);
   line-height: 0.65;
   color: var(--hero-headding-orange);
}

/* UBER MICH SEITE */

.hero-text-kontakt {
   position: absolute;
   bottom: 1rem;
   left: 1rem;
   text-transform: uppercase;
   line-height: 0.7;
   /* font-size: clamp(4.4rem, 7.4vw + 1rem, 8.5rem); */
   font-weight: 900;
}

.hero-txt-kontakt-1 {
   /* font-size: 5rem; */
   font-size: clamp(5rem, 10vw + 1rem, 12rem);
   line-height: 0.65;
   color: var(--hero-headding-orange);
}
.hero-txt-kontakt-2 {
   /* font-size: 5.6rem; */
   position: relative;
   font-size: clamp(5rem, 11.667vw + 1rem, 14rem);
   line-height: 0.66;
   color: var(--hero-headding-yellow);
   z-index: 8;
}
.hero-txt-kontakt-3 {
   /* font-size: 5rem; */
   font-size: clamp(4.3rem, 10vw + 1rem, 12rem);
   line-height: 0.65;
   color: var(--hero-headding-orange);
}

/* ................................................................. */

.kurztrip {
   font-size: var(--font-size--para-mid);
   margin-top: var(--wp--preset--spacing--30);
   margin-bottom: var(--wp--preset--spacing--30);
   padding-top: 0;
   padding-right: 0;
   padding-bottom: 0;
   padding-left: 0;
   letter-spacing: 1px;
   line-height: 1.1;
}

/* START-SEITE COACHING-AUFLISTUNG ...............................................*/

.coaching-liste {
   text-align: center;
   font-size: clamp(2rem, 2rem + ((1vw - 0.2rem) * 1.297), 3.2rem);
   text-transform: uppercase;
   line-height: 1.5;
   padding: 3rem 1.5rem 2rem 1.5rem;
}

.coaching-liste a {
   text-decoration: none;
   color: black;
}

.responsive-line-break-one,
.responsive-line-break-two,
.responsive-line-break-three,
.responsive-line-break-four,
.responsive-line-break-five {
   display: inline;
}

.dot-one,
.dot-two,
.dot-three,
.dot-four,
.dot-five {
   display: none;
}

/* .......................... FOOTER ........................................... */
/* .......................... FOOTER ........................................... */
/* .......................... FOOTER ........................................... */
/* .......................... FOOTER ........................................... */

.logo-footer {
   width: clamp(250px, 30vw, 350px);
   filter: brightness(0) saturate(100%);
   margin-bottom: 20px;
}

.footer-adresse {
   font-size: var(--heading-two-special);
}

.hr-linie-footer {
   border-top: 2px dotted black;
   height: 0;
   background-color: transparent;
   margin-bottom: 30px;
}

/* ::::::::::::::::::::::::::: MEDIA QUERY ::::::::::::::::::::::::::::::::::::::: */
/* ::::::::::::::::::::::::::: MEDIA QUERY ::::::::::::::::::::::::::::::::::::::: */
/* ::::::::::::::::::::::::::: MEDIA QUERY ::::::::::::::::::::::::::::::::::::::: */
/* ::::::::::::::::::::::::::: MEDIA QUERY ::::::::::::::::::::::::::::::::::::::: */
/* ::::::::::::::::::::::::::: MEDIA QUERY ::::::::::::::::::::::::::::::::::::::: */
/* ::::::::::::::::::::::::::: MEDIA QUERY ::::::::::::::::::::::::::::::::::::::: */
/* ::::::::::::::::::::::::::: MEDIA QUERY ::::::::::::::::::::::::::::::::::::::: */
/* ::::::::::::::::::::::::::: MEDIA QUERY ::::::::::::::::::::::::::::::::::::::: */
/* ::::::::::::::::::::::::::: MEDIA QUERY ::::::::::::::::::::::::::::::::::::::: */
/* ::::::::::::::::::::::::::: MEDIA QUERY ::::::::::::::::::::::::::::::::::::::: */
/* ::::::::::::::::::::::::::: MEDIA QUERY ::::::::::::::::::::::::::::::::::::::: */
/* ::::::::::::::::::::::::::: MEDIA QUERY ::::::::::::::::::::::::::::::::::::::: */

@media (min-width: 700px) {
   /* ::::::::::::::::::::::::::::: MENU ::::::::::::::::::::::::::::::::::::::::::::  */
   /* ::::::::::::::::::::::::::::: MENU ::::::::::::::::::::::::::::::::::::::::::::  */
   /* ::::::::::::::::::::::::::::: MENU ::::::::::::::::::::::::::::::::::::::::::::  */
   /* ::::::::::::::::::::::::::::: MENU ::::::::::::::::::::::::::::::::::::::::::::  */
   :root {
      --wrapper-for-cards-padding-left-right: var(--wrapper-padding-left-right);
   }

   nav {
      font-size: clamp(0.8rem, 1rem + ((1vw - 0.2rem) * 0.973), 1.5rem);
   }
   .nav-list {
      position: static;
      flex-direction: row;
      opacity: 1;
      transform: translateX(0px);
   }

   .navigation__button {
      visibility: hidden;
   }

   .navigation__background {
      visibility: hidden;
   }

   /* POSITIONING  :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

   .card-padding {
      padding: 1rem;
   }
   .to-the-right {
      text-align: right;
   }

   .center-heading {
      text-align: center;
   }

   .two-columns {
      grid-template-columns: 1fr 1fr;
   }

   .border-middle {
      padding-bottom: 0;
      border: none;
      margin-bottom: 0;
   }

   /*
card-gaps = small-screen
gaps-immer =  für Tafeln ohne Cards
gaps-manchmal = für Tafeln ohne Cards, die aber auf small screen
                  ohne Lücken dargestellt werden soll  */
   .card-gaps {
      gap: 0.7rem;
   }

   .kunden-gaps-unten {
      gap: 0.7rem;
   }

   .gaps-immer {
      gap: 2rem;
   }

   .gaps-manchmal {
      gap: 0rem;
   }

   /*  .............................................................. */
   .four-columns {
      grid-template-columns: 1fr 1fr;
   }

   .columns-footer {
      grid-template-columns: 2fr 1fr 1fr;
   }

   /* BUTTONS :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

   /* START-SEITE COACHING-AUFLISTUNG :::::::::::::::::::::::::::::::::::::::::::::::::*/

   .responsive-line-break-one,
   .responsive-line-break-three,
   .responsive-line-break-five {
      display: none;
   }

   .dot-one,
   .dot-three,
   .dot-five {
      display: inline;
   }
}
@media (min-width: 860px) {
   .three-columns {
      grid-template-columns: 1fr 1fr 1fr;
   }

   .put-on-second-pos {
      grid-row: auto;
      border: none;
      text-align: left;
      padding: 0;
      /* font-size: 2rem !important; */
   }

   .put-on-second-pos h2 {
      font-size: var(--heading-one);
   }
   .gaps-manchmal {
      gap: 1rem;
   }
   .subgrid-seven {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: 1 / 8;
      grid-auto-rows: auto;
      row-gap: 0;
   }
}

@media (min-width: 1100px) {
   .four-columns {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
   }

   .subgrid-three {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: 1 / 4;
      grid-auto-rows: auto;
      row-gap: 0;
   }

   .subgrid-five {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: 1 / 6;
      grid-auto-rows: auto;
      row-gap: 0;
   }

   .card-padding {
      padding: 2rem;
   }

   /*
card-gaps = small-screen
gaps-immer =  für Tafeln ohne Cards
gaps-manchmal = für Tafeln ohne Cards, die aber auf small screen
                  ohne Lücken dargestellt werden soll  */
   .card-gaps {
      gap: 1.5rem;
   }

   .gaps-immer {
      gap: 2.5rem;
   }

   .gaps-manchmal {
      gap: 2.5rem;
   }

   /*  .............................................................. */

   /* START-SEITE COACHING-AUFLISTUNG ...............................................*/

   .responsive-line-break-two,
   .responsive-line-break-four {
      display: none;
   }
   .responsive-line-break-three {
      display: inline;
   }
   .dot-three {
      display: none;
   }
   .dot-one,
   .dot-two,
   .dot-four {
      display: inline;
   }
}