@charset "utf-8";

/* ==========================================================================
   1. FONTS & VARIABLES
   ========================================================================== */
/* ... (Deine Font-Faces hier lassen, unverändert) ... */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/Merriweather-Regular-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/Merriweather-Regular.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Merriweather Sans';
  font-style: normal;
  font-weight: 300 800;
  src: url('../fonts/MerriweatherSans-Regular-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Merriweather Sans';
  font-style: normal;
  font-weight: 300 800;
  src: url('../fonts/MerriweatherSans-Regular.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --xxxxxl: 13.62rem;
  --xxxxl: 9.08rem;
  --xxxl: 6.05rem;
  --xxl: 4.04rem;
  --xl: 2.69rem;
  --l: 1.79rem;
  --m: 1.2rem;
  --s: 0.80rem;
  --xs: 0.53rem;
  --xxs: 0.35rem;
  --xxxs: 0.24rem;
  --xxxxs: 0.16rem;
  --xxxxxs: 0.11rem;
  --semi-light: 300;
  --regular: 400;
  --semi-bold: 500;
  --bold: 600;
  --bolder: 700;
  --extra-bold: 800;
  --border1: 0.25rem;
  --border2: 0.125rem;
  --border3: 0.0625rem;
  --border4: 0.0313rem;
  --color1: rgba(255, 255, 255, 1);
  --color2: rgba(45, 50, 55, 1);
  --color3: rgba(24, 40, 102, 1);
  --color4: rgba(0, 138, 131, 1);
  --color5: rgba(118, 187, 107, 1);
  --color6: rgba(45, 50, 55, .3);
  --header-height1: var(--xxl);
  --header-height2: var(--xxxl);
}

/* ==========================================================================
   2. BASE & RESET
   ========================================================================== */
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
  /*overflow-x: hidden;*/
  /* Snap nur auf HTML, nicht Body */
  overflow-y: scroll; /* Erzwingt Scroll-Verhalten */
  scroll-snap-type: y mandatory;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  font-family: 'Merriweather Sans', sans-serif;
  font-size: var(--s);
  line-height: var(--m);
  font-weight: var(--semi-light);
  background-color: var(--color1);
  color: var(--color2);
  position: relative;
  overflow-x: hidden;
}

/*body {*/
/*  display: flex;*/
/*  flex-direction: column;*/
/*  min-height: 100vh;*/
/*  width: 100vw;*/
/*  font-family: 'Merriweather Sans', sans-serif;*/
/*  font-size: var(--s);*/
/*  line-height: var(--m);*/
/*  font-weight: var(--semi-light);*/
/*  background-color: var(--color1);*/
/*  color: var(--color2);*/
/*  position: relative;*/
/*  overflow-x: hidden;*/
/*}*/


h1, h2 {
  font-family: 'Merriweather', serif;
}

h1 {
  font-size: var(--m);
  line-height: var(--l);
  margin-block: var(--m);
}

h2 {
  font-size: var(--s);
  line-height: var(--m);
  margin-block: var(--s);
}

h3, h4 {
  font-weight: var(--semi-bold);
  line-height: var(--l);
}

h3 {
  margin-block: var(--xl) var(--l);
}

h4 {
  margin-block: var(--l) var(--m);
}

p {
  margin-block: 0;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

i {
  font-style: normal;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

address {
  font-style: normal;
}

footer {
  margin-top: auto;
}


/* ==========================================================================
   3. WHITEBOARD SYSTEM (Sub-Pages)
   ========================================================================== */

#canvas {
  width: 100%;
  min-height: 100vh;
  background-color: var(--color1);
  transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
  z-index: 1;
  position: relative;
  overflow-x: hidden;
  max-width: 100vw;
}

.sub-page {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color1);
  z-index: 10;
  overflow-y: auto; /* WICHTIG: Subpages scrollen selbst! */
  transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
  padding-bottom: var(--xxxl);
  margin-right: calc(var(--s) * -1); /* Ausgleich Gutter */
  scrollbar-gutter: stable;
  /* Subpages brauchen KEIN scroll-snap-type global, nur spezifisch (siehe unten) */
}

#privacy {
  top: 100%;
  left: 0;
}

#appointment {
  top: 0;
  left: 100%;
}

/* States */
body.state-appointment #canvas, body.state-privacy #canvas {
  position: fixed;
  left: 0;
  width: 100%;
  top: var(--top-scroll, 0px);
}

body.state-privacy #canvas {
  transform: translateY(-100vh);
}

body.state-privacy #privacy {
  transform: translateY(-100%);
}

body.state-appointment #canvas {
  transform: translateX(-100vw);
}

body.state-appointment #appointment {
  transform: translateX(-100%);
}

/* Scroll Lock */
body.state-privacy, body.state-appointment {
  overflow: hidden !important;
   /* Wir fügen künstlich den Platz hinzu, der durch den fehlenden Balken frei wird */
  padding-right: var(--s) !important;
}

/* Gleichzeitig müssen wir den Header (fixed) anpassen, sonst springt der auch */
  body.state-appointment .header,
  body.state-privacy .header {
    padding-right: var(--s) !important;
}

/* No Transition Helper */
body.no-transition #canvas, body.no-transition .sub-page {
  transition: none !important;
}

/* Wrapper Subpage */
.sub-page .wrapper {
  position: relative;
  width: 100%;
  min-height: 100%;
  padding-block-start: var(--xxl);
}

/* =========================================
   CRITICAL FIX: Deaktivieren von Scroll-Snap im Hauptfenster,
   wenn eine Unterseite geöffnet ist.
   ========================================= */

html:has(body.state-appointment),
html:has(body.state-privacy) {
    /* Zwingend notwendig, damit die Sub-Page flüssig scrollt */
    scroll-snap-type: none !important;

    /* Zwingend notwendig, damit der Haupt-Scrollbalken verschwindet */
    overflow: auto !important;
    overflow: hidden !important;
    height: 100vh !important;
    touch-action: none;
}

/* ==========================================================================
   4. HEADER
   ========================================================================== */
.header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  background-color: transparent;
  transition: background-color .4s;
  z-index: 100;
}

.bg-header {
  background-color: var(--color1);
  box-shadow: 0 0 var(--xs) rgba(0, 0, 0, 0.05);
}

.nav {
  display: flex;
  height: var(--header-height1);
  justify-content: space-between;
  align-items: center;
}

.nav__logo {
  display: flex;
  align-items: center;
  column-gap: var(--xxs);
}

.nav__logo img {
  width: var(--xxxxl);
  height: auto;
}

/* Mobile Menu */
.nav__menu {
  position: fixed;
  top: 0;
  right: -100%;
  background-color: var(--color1);
  width: 100%;
  height: 100%;
  padding-block-start: var(--header-height1);
  padding-inline-start: var(--l);
  transition: right .4s;
  display: flex;
  flex-direction: column;
}

.show-menu {
  right: 0;
}

.nav__list {
  display: flex;
  flex-direction: column;
  row-gap: var(--xxl);
  align-items: center;
}

.nav__link {
  font-weight: var(--semi-bold);
  color: var(--color3);
  transition: color .4s;
}

.nav__link:hover, .active-link {
  color: var(--color4);
}

.nav__toggle, .nav__close {
  font-size: var(--m);
  cursor: pointer;
  color: var(--color2);
}

.nav__close {
  position: absolute;
  top: var(--m);
  right: var(--l);
}

/* Sub-Page Header */
.sub-header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--color1);
  box-shadow: 0 0 var(--xs) rgba(0, 0, 0, 0.05);
  z-index: 50;
}

.sub-nav {
  display: flex;
  align-items: center;
  height: var(--header-height1);
}


/* ==========================================================================
   5. COMPONENTS
   ========================================================================== */
.button {
  display: inline-flex;
  justify-content: center;
  border: none;
  background-color: var(--color3);
  font-weight: var(--semi-bold);
  color: var(--color1);
  padding: var(--xs) var(--m);
  border-radius: var(--xxs);
  transition: background-color .4s;
  cursor: pointer;
}

.button:hover {
  background-color: var(--color4);
  color: var(--color1);
}

.button__link {
  display: flex;
  align-items: center;
  column-gap: var(--xxs);
  cursor: pointer;
  color: var(--color2);
}

.button__link span {
  font-weight: var(--semi-bold);
}

.button__link-left i, .button__link-right i {
  font-size: var(--m);
  transition: transform .4s;
}

.button__link-right:hover i {
  transform: translateX(var(--xxs));
}

.button__link-left:hover i {
  transform: translateX(calc(var(--xxs) * -1));
}

.container {
  max-width: 1120px;
  margin-inline: var(--s);
}

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

/* Sections Global */
.section {
  scroll-snap-align: start;
  padding-block-start: var(--xxl);
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.section__title, .section__subtitle {
  text-align: center;
}


/* ==========================================================================
   6. SECTIONS CONTENT (MOBILE DEFAULT)
   ========================================================================== */
.home {
  position: relative;
  background: url('../img/harbor_slim.webp') no-repeat center center;
  background-size: cover;
}

.home__container, .home__content {
  row-gap: var(--xxl);
}

.home__data {
  text-align: center;
}

.home__title {
  color: var(--color1);
  font-size: var(--m);
  line-height: var(--l);
  margin-block-end: var(--xxl);
}

.home__subtitle {
  color: var(--color1);
  font-size: var(--xl);
  line-height: var(--xxl);
  margin-block-end: var(--xl);
}

.home__description {
  margin-block-end: var(--xxl);
}

.home__buttons {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--m);
}

.home__info {
  display: flex;
  justify-content: center;
  column-gap: var(--xxxl);
  color: var(--color1);
}

.home__info-title {
  font-size: var(--l);
  margin-block-end: var(--xxs);
}

.home__info-description {
  margin-block-start: 0;
}

.home__images {
  position: relative;
  justify-self: center;
}

.home__img-0, .home__img-1, .home__img-2 {
  display: none;
}

.about__container {
  row-gap: var(--xxl);
}

.about__data {
  text-align: center;
}

.about__description {
  margin-block-end: var(--xxl);
}

.about__list {
  text-align: initial;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  gap: var(--l);
  margin-block-end: var(--xxl);
}

.about__list-item {
  display: flex;
  column-gap: var(--xxs);
  color: var(--color4);
}

.about__list-item span {
  font-weight: var(--regular);
}

.about__list-item i {
  font-size: var(--l);
  color: var(--color4);
}

.about__image {
  position: relative;
  justify-self: center;
}

.about__img {
  width: 100%;
  max-width: 470px;
}

.services {
  background-color: var(--color1);
}

.services__container {
  padding-block: var(--l) var(--xl);
}

.services__card {
  background-color: var(--color3);
  border: var(--border2) solid transparent;
  background-clip: content-box;
  transition: border-color .4s;
  color: var(--color1);
}

.services__card:hover {
  border-color: var(--color3);
}

.services__data {
  padding: var(--l) var(--m);
}

.services__title {
  margin-block: var(--m);
}

.services__description {
  margin-block-end: var(--m);
}

.approach {
  position: relative;
}

.approach__container {
  position: relative;
  row-gap: var(--xl);
}

.approach__data {
  text-align: center;
}

.approach__description {
  margin-block-end: var(--xxl);
}

.approach__card {
  width: 300px !important;
  background-color: var(--color3);
  border: var(--border2) solid transparent;
  padding: var(--xxl) var(--s);
  transition: border-color .4s;
}

.approach__card a {
  color: var(--color1);
}

.approach__card:hover {
  border-color: var(--color3);
}

.approach__icon {
  font-size: var(--xxl);
  width: var(--xxxl);
  height: var(--xxxl);
  background-color: var(--color3);
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-block-end: var(--l);
}

.approach__title {
  font-size: var(--l);
  margin-block-end: var(--xxs);
}

.approach__shape {
  position: absolute;
  width: 100%;
  height: 245px;
  bottom: 0;
  left: 0;
  background-color: var(--color2);
}

.swiper {
  margin-inline: initial !important;
  padding-block-end: var(--xxxl) !important;
}

.swiper-button-prev::after, .swiper-button-next::after {
  content: '' !important;
}

.swiper-button-prev, .swiper-button-next {
  top: initial !important;
  bottom: 0 !important;
  width: var(--l) !important;
  height: var(--l) !important;
  background-color: var(--color2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  border-radius: 50%;
  z-index: 1 !important;
}

.swiper-button-prev {
  left: calc(50% - var(--xxl)) !important;
}

.swiper-button-next {
  right: calc(50% - var(--xxl)) !important;
}

.swiper-button-prev i, .swiper-button-next i {
  font-size: var(--l);
  color: var(--color1);
}

.contact__container {
  row-gap: var(--xl);
  padding-block: var(--l) var(--xl);
}

.contact__img {
  width: 100%;
  max-width: 320px;
  justify-self: center;
}

.contact__data {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  gap: var(--m);
}

.contact__card {
  color: var(--color1);
  background-color: var(--color3);
  border: var(--border2) solid var(--color1);
  padding-block: var(--l) var(--l);
  text-align: center;
  transition: border-color .4s;
}

.contact__card-nofill {
  padding: var(--l) var(--xl);
  text-align: center;
  cursor: pointer;
}

.contact__card:hover {
  border-color: var(--color3);
}

.contact__card-nofill a {
  color: var(--color2);
}

.contact__icon {
  font-size: var(--xxl);
  width: var(--xxxl);
  height: var(--xxxl);
  background-color: var(--color1);
  color: var(--color3);
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto var(--m);
}

.contact__title {
  font-size: var(--m);
  line-height: var(--l);
}

.contact__social {
  display: flex;
  justify-content: center;
  column-gap: var(--s);
}

.contact__social-link {
  font-size: var(--l);
  color: var(--color4);
  transition: transform .4s;
}

.contact__social-link:hover {
  transform: translateY(calc(var(--xxs) * -1));
}

.footer {
  background-color: var(--color2);
  color: var(--color1);
  padding-block: var(--xxl) var(--xl);
  z-index: 2;
  scroll-snap-align: end;
}

.footer__container {
  row-gap: var(--xxl);
  padding-block-end: var(--xl);
  border-bottom: var(--border3) solid var(--color1);
}

.footer__logo {
  display: inline-flex;
  align-items: center;
  column-gap: var(--xxs);
}

.footer__logo i {
  color: var(--color1);
  font-size: var(--l);
}

.footer__logo span {
  font-weight: var(--regular);
  color: var(--color1);
}

.footer__description {
  margin-block: var(--s);
}

.footer__email, .footer__info {
  line-height: var(--l);
}

.footer__content {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--l);
}

.footer__title {
  margin-block-end: var(--s);
}

.footer__links, .footer__list {
  display: grid;
  row-gap: var(--xxs);
}

.footer__link {
  color: var(--color1);
}

.footer__link:hover {
  color: var(--color4);
  transition: color .4s;
}

.footer__social {
  display: flex;
  column-gap: var(--s);
}

.footer__social-link {
  font-size: var(--l);
  color: var(--color4);
  transition: transform .4s;
}

.footer__social-link:hover {
  transform: translateY(calc(var(--xxs) * -1));
}

.footer__copy {
  display: block;
  text-align: center;
  font-size: var(--s);
  margin-block-start: var(--xl);
}


/* ==========================================================================
   7. APPOINTMENT / PRIVACY (Mobile First)
   ========================================================================== */

.appointment__container {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Snap Points & Höhe für Mobile */
.titles__container,
.calendar__container,
.times__container,
.form__container {
  scroll-snap-align: start;
  scroll-margin-top: calc(var(--header-height2));
}

.calendar__container,
.times__container {
  min-height: 85svh;
  margin-block-end: var(--l);
}

.form__container {
  min-height: 100svh;
}

.times__container:empty {
  min-height: 0;
  display: none;
}

/* Smart Flow: Platz sparen wenn erledigt */
.appointment__container:has(.times__items) .calendar__container {
  min-height: auto !important;
  padding-bottom: var(--xl);
  scroll-margin-top: 0;
}

.appointment__container:has(.form__items) .times__container {
  min-height: auto !important;
  padding-bottom: var(--xl);
}

/* Appointment UI */
.appointment__data {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-block-end: var(--s);
}

@media screen and (min-width: 360px) {
  /*.appointment__data {*/
  /*  flex-direction: row;*/
  /*  gap: var(--s);*/
  /*}*/
}

.appointment__place::before {
  content: 'Ort: ';
  font-weight: var(--semi-bold);
}

.appointment__duration::before {
  content: 'Dauer: ';
  font-weight: var(--semi-bold);
}

.appointment__price::before {
  content: 'Preis: ';
  font-weight: var(--semi-bold);
}

.appointment__description {
  text-align: center;
  margin-block-end: var(--xl);
}

.appointment__confirmation {
  text-align: left;
}

.appointment__confirmation button {
  justify-items: center;
}

/* Calendar */
.calendar__container {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  align-items: center;
}

.calendar__table {
  border-collapse: collapse;
  border: none;
  border-spacing: 0;
  width: 100%;
  max-width: 350px;
  justify-self: center;
}

.calendar__th {
  font-weight: var(--semi-bold);
}

.calendar__tr {
  height: var(--xxl);
}

.calendar__td {
  text-align: center;
  justify-items: center;
  border: var(--border1) hidden;
  height: var(--xl);
  width: var(--xl);
}

.calendar__td-today {
  background-color: var(--color6);
}

.calendar__title, .calendar__subtitle, .times__title, .times__subtitle {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.calendar__subtitle, .times__subtitle {
  column-gap: var(--xxs);
  font-size: var(--s);
  margin-block: 0 var(--l);
}

.calendar__subtitle i, .times__subtitle i {
  font-size: var(--l);
}

.calendar__title, .times__title {
  font-size: var(--m);
  margin-block: 0 var(--m);
}

/* Hint Overlay */
.calendar__hint-overlay {
  position: absolute;
  top: var(--xxxl);
  left: 0;
  width: 100%;
  height: auto;
  min-height: 100px;
  color: var(--color6);
  background-color: var(--color1);
  border: var(--border2) solid var(--color6);
  border-radius: var(--xxs);
  padding: var(--xs);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 20;
  pointer-events: none;
}

.calendar__buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--m);
  margin-block: var(--m);
}

.calendar__nogo, .calendar__nv, .calendar__go {
  display: flex;
  width: var(--xl);
  height: var(--xl);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  background-color: var(--color1);
  transition: 0.4s;
  cursor: pointer;
}

.calendar__nogo, .calendar__nv {
  color: var(--color6);
  cursor: default;
}

.calendar__go {
  color: var(--color2);
}

.calendar__nogo:hover, .calendar__nv:hover {
  background-color: var(--color6);
  color: var(--color1);
}

.calendar__go:hover, .calendar__go-active {
  background-color: var(--color5);
  color: var(--color1);
}

.calendar__go-active {
  background-color: var(--color4);
}

/* Times */
.times__container {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  position: relative;
  min-height: 300px;
  align-items: center;
}

.times__items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: var(--s);
  column-gap: var(--xxs);
  justify-self: center;
  margin-top: var(--xxs);
  width: 100%;
  max-width: 400px;
}

.times__item .button {
  background-color: var(--color1);
  color: var(--color2);
  font-weight: var(--semi-light);
  width: 100%;
  min-width: var(--xxl);
}

.times__item .button:hover, .times__item-active {
  background-color: var(--color4) !important;
  color: var(--color1) !important;
}

/* Form */
.form__container {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.form__fieldset {
  border: var(--border2) solid var(--color2);
  border-radius: var(--xxs);
  padding: var(--l);
}

.form-field__legend {
  padding-inline: var(--m);
}

.form-field__legend::before {
  content: 'Ihre Terminwahl: ';
  font-weight: var(--semi-bold);
}

.form__items {
  display: flex;
  flex-direction: column;
  gap: var(--s);
}

.fname-group, .lname-group, .phone-group, .email-group, .wish-group {
  display: flex;
  flex-direction: column;
  row-gap: var(--xs);
}

.check-group {
  display: grid;
  grid-template-columns: min-content auto;
  column-gap: var(--m);
  align-items: start;
}

.submit-button {
  text-align: center;
  margin-top: var(--l);
}

.form-field__label::after {
  content: ':';
}

.form-field, .form-field__textarea {
  font-family: 'Merriweather Sans', sans-serif;
  font-weight: var(--semi-light);
  font-size: var(--s);
  border: var(--border4) solid var(--color2);
  padding: var(--xs) var(--s);
  border-radius: var(--xxs);
  background-color: var(--color1);
  width: 100%;
}

.form-field__textarea {
  resize: none;
  min-height: var(--xxl);
}

.form-field__textarea::placeholder {
  color: var(--color6);
}

.form-checkbox {
  transform: scale(1.25);
  margin-top: var(--xxxxs);
}

/* Validation & Extras */
::-webkit-validation-bubble {
  background: var(--color2);
  border-color: var(--color3);
  box-shadow: 4px 4px 4px rgba(100, 100, 100, 0.5);
}

::-webkit-validation-bubble-message {
  color: #eee;
  background: var(--color2);
  border-color: var(--color3);
  box-shadow: 4px 4px 4px rgba(100, 100, 100, 0.5);
}

::-webkit-validation-bubble-message::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 4px;
}

::-webkit-validation-bubble-arrow {
  background-color: transparent;
  border: none;
}

::-webkit-validation-bubble-arrow::before {
  content: '';
}

.email__body, .email__signature {
  font-family: 'Merriweather Sans', sans-serif;
  font-size: var(--m);
}

.email__signature img {
  width: var(--xxl);
  height: auto;
}

/* Privacy */
.privacy__container {
  display: flex;
  flex-direction: column;
}

.privacy-question {
  font-weight: var(--regular);
  margin-top: var(--l);
}

.privacy__h1:first-of-type {
  margin-block-start: 0;
}

/* ScrollUp & Popup */
.scrollup {
  position: fixed;
  display: none;
  bottom: var(--xxl);
  right: var(--l);
  background-color: var(--color2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: var(--xxs);
  color: var(--color1);
  padding: var(--xxs);
  font-size: var(--l);
  transition: transform .4s;
  z-index: 3;
}

.scrollup:hover {
  transform: translateY(calc(var(--xs) * -1));
}

.show-scrollup {
  display: inline-flex;
}

.cookie-popup {
  display: none;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: var(--xxl);
  width: 20rem;
  border-radius: var(--xxxs);
  background-color: var(--color2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  color: var(--color1);
  padding: var(--m);
  font-size: var(--s);
  z-index: 10;
  text-align: center;
}

.cookie-popup__title {
  font-size: var(--m);
}

.cookie-popup__description {
  margin-block-start: var(--l);
}

.cookie-popup__description a {
  color: var(--color1);
}

.cookie-popup__button {
  margin-block-start: var(--l);
  margin-inline: var(--xs);
}


/* ==========================================================================
   8. SCROLLBARS
   ========================================================================== */

html, body, .sub-page {
  scrollbar-width: none; /* Firefox */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
.sub-page::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}


/* ==========================================================================
   9. MEDIA QUERIES
   ========================================================================== */

/* Tablet & Small Desktop (>= 540px) */
@media screen and (min-width: 540px) {

  html, body, .sub-page {
    scrollbar-width: auto; /* Firefox Reset */
  }

  /* Basis */
  html::-webkit-scrollbar,
  body::-webkit-scrollbar,
  .sub-page::-webkit-scrollbar {
    display: block; /* Wieder anzeigen */
    width: var(--s);
    background-color: var(--color1);
  }

  /* Schieber */
  html::-webkit-scrollbar-thumb,
  body::-webkit-scrollbar-thumb,
  .sub-page::-webkit-scrollbar-thumb {
    background-color: var(--color3);
    border-radius: var(--s);
    border: 3px solid transparent;
    background-clip: content-box;
  }

  /* Hover */
  html::-webkit-scrollbar-thumb:hover,
  body::-webkit-scrollbar-thumb:hover,
  .sub-page::-webkit-scrollbar-thumb:hover {
    background-color: var(--color4) !important;
  }

/*html::-webkit-scrollbar, body::-webkit-scrollbar, .sub-page::-webkit-scrollbar {*/
/*  width: var(--s);*/
/*  background-color: var(--color1);*/
/*}*/

/*html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, .sub-page::-webkit-scrollbar-thumb {*/
/*  background-color: var(--color3);*/
/*  border-radius: var(--s);*/
/*  border: 3px solid transparent;*/
/*  background-clip: content-box;*/
/*}*/

/*html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover, .sub-page::-webkit-scrollbar-thumb:hover {*/
/*  background-color: var(--color4) !important;*/



  .home__buttons {
    flex-direction: row;
  }

  .about__list {
    grid-template-columns: repeat(2, max-content);
  }

  .services__container, .contact__data, .footer__content {
    grid-template-columns: repeat(2, 1fr);
  }

  .times__items {
    grid-template-columns: repeat(4, 1fr);
  }

  .form__items {
    display: grid;
    grid-template-areas: 'fname lname' 'phone email' 'wish wish' 'check check' 'submit submit';
    grid-template-columns: 1fr 1fr;
    gap: var(--s);
  }

  .fname-group {
    grid-area: fname;
  }

  .lname-group {
    grid-area: lname;
  }

  .phone-group {
    grid-area: phone;
  }

  .email-group {
    grid-area: email;
  }

  .wish-group {
    grid-area: wish;
  }

  .check-group {
    grid-area: check;
  }

  .submit-button {
    grid-area: submit;
  }

}



/* Tablet Landscape (>= 768px) */
@media screen and (min-width: 768px) {

  body {
    font-size: var(--m);
    line-height: var(--l);
  }

  h1 {
    font-size: var(--l);
    line-height: var(--xl);
    margin-block: var(--l);
  }

  h2 {
    font-size: var(--m);
    line-height: var(--l);
    margin-block: var(--m);
  }

  .button {
    font-size: var(--m);
  }

  .button__link-left i, .button__link-right i {
    font-size: var(--l);
  }

  .nav__menu {
    width: 40%;
  }

  .nav, .sub-nav {
    height: var(--header-height2);
  }

  .nav__logo img {
    width: var(--xxxxxl);
  }

  .nav__toggle, .nav__close {
    font-size: var(--l);
  }
  .section {
    padding-block-start: var(--xxxl);
  }

  .home__title {
    font-size: var(--l);
    line-height: var(--xl);
    margin-block-end: var(--xxxl);
  }

  .home__subtitle {
    color: var(--color1);
    font-size: var(--xxl);
    line-height: var(--xxxl);
    margin-block-end: var(--xxxl);
  }

  .home__info-title {
    font-size: var(--xl);
    margin-block-end: var(--xxs);
  }

  .footer__container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-content: space-between;
  }

  /* Appointment Layout Side-by-Side */
  .appointment__container {
    display: grid;
    grid-template-areas: 'titles titles' 'calendar times' 'form form';
    grid-template-columns: 1fr 1fr;
  }

  .appointment__data {
    flex-direction: row;
    gap: var(--xl);
  }

  .times__items {
    row-gap: var(--l);
    column-gap: 0;
    padding-block-start: var(--xxxxxs);
  }

  .titles__container {
    grid-area: titles;
  }

  .calendar__container {
    grid-area: calendar;
  }

  .times__container {
    grid-area: times;
  }

  .form__container {
    grid-area: form;
  }

  .form-field, .form-field__textarea {
    font-size: var(--m);
    padding: var(--xs) var(--m);
    border-radius: var(--xxs);
    background-color: var(--color1);
    width: 100%;
  }

  .calendar__subtitle, .times__subtitle {
    column-gap: var(--xxs);
    font-size: var(--m);
    margin-block: 0 var(--l);
  }

  .calendar__subtitle i, .times__subtitle i {
    font-size: var(--l);
  }

  .calendar__title, .times__title {
    font-size: var(--l);
    margin-block: 0 var(--l);
  }

  .cookie-popup {
    width: 20rem;
    bottom: var(--xxxl);
    border-radius: var(--xxs);
    padding: var(--l);
    font-size: var(--m);
  }

  .cookie-popup {
    width: 30rem;
  }

  .cookie-popup__title {
    font-size: var(--l);
    width: 30rem;
  }

  .button__link-left i, .button__link-right i {
    font-size: var(--m);
  }
}
  /* Desktop (>= 1150px) */
  @media screen and (min-width: 1150px) {
    html {
      scroll-snap-type: y mandatory;
    }

    .container {
      margin-inline: auto;
    }

    .section {
      padding-block-start: var(--xxxxl);
    }

    /* Nav Reset */
    .nav__toggle, .nav__close {
      display: none;
    }

    .nav__menu {
      position: static;
      width: auto;
      height: auto;
      background: transparent;
      padding: 0;
      display: block;
    }

    .nav__list {
      flex-direction: row;
      column-gap: var(--xxl);
    }

    .bg-header .nav__link {
      color: var(--color3);
    }

    .bg-header .active-link, .bg-header .nav__link:hover {
      color: var(--color4);
    }

    .bg-header .button {
      color: var(--color1);
    }

    /* Home */
    .home {
      /*background-size: 400% auto;*/
      background-position: top center;
      background-repeat: no-repeat;
      animation: panorama 120s linear infinite alternate;
      background-attachment: scroll;
      overflow: hidden;
      animation-delay: -50s;
    }

    @keyframes panorama {
      0% {
        background-position: top left;
      }
      100% {
        background-position: top right;
      }
    }

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

    .home__data {
      text-align: left;
    }

    .home__buttons {
      justify-content: start;
      flex-direction: row;
    }

    .home__info {
      justify-content: start;
    }

    .home__img-0 {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .home__img-1 {
      display: block;
      width: 550px;
      margin-inline: 0;
    }

    .home__img-2 {
      display: block;
      position: absolute;
      width: 350px;
      border: var(--border1) solid var(--color1);
      left: -7rem;
      bottom: -8rem;
    }

    /* Other Sections */
    .about__container {
      grid-template-columns: repeat(2, 480px);
      column-gap: 9rem;
    }

    .about__image {
      order: -1;
    }

    .approach__container {
      grid-template-columns: 35% 60%;
      padding-bottom: var(--xxxl);
    }

    .approach__data {
      display: block;
      text-align: left;
    }

    .approach__data .section__title {
      margin-bottom: var(--l);
    }

    .approach__card {
      width: 340px !important;
      padding: var(--xxl) var(-xl);
    }

    .approach__shape {
      height: 330px;
    }

    .swiper-button-prev, .swiper-button-next {
      bottom: var(--xxxl) !important;
    }

    .contact__container {
      grid-template-columns: 530px 515px;
      align-items: flex-start;
    }

    .contact__img {
      width: 530px;
      max-width: none;
    }

    .footer__content {
      grid-template-columns: repeat(3, max-content);
      column-gap: 7rem;
    }

    .scrollup {
      right: 3rem;
    }


    /* Desktop Reset für Appointment (Kein Snapping/FullHeight nötig) */
    .titles__container, .calendar__container, .times__container, .form__container {
      scroll-snap-align: none;
      min-height: auto;
      scroll-margin-top: 0;
      display: block; /* Reset Flex centering */
    }
  }