/*--------------------------- FONTS (lokal, keine Google-Verbindung) --------------------------------*/
@font-face {
  font-family: "Great Vibes";
  src: url("img/fonts/great-vibes-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Saira Condensed";
  src: url("img/fonts/saira-condensed-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Saira Condensed";
  src: url("img/fonts/saira-condensed-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

/*--------------------------- FARBEN (aus Flyer & Visitenkarte) --------------------------------*/
:root {
  --creme: #f4f3ed;
  --rosa: #e18bae;
  --rosa-dunkel: #b8527f;  /* dunkler für besseren Kontrast mit weißer Schrift */
  --rosa-hell: #f6dbe6;
  --rosa-link: #a14a72;  /* Links: Kontrast 5:1 auf Creme */
  --gruen: #b5cc9f;
  --text: #3d3638;

  /* SCHRIFTGRÖSSEN – Handy (Desktop-Werte unten im @media-Bereich) */
  --schrift-h1: 2.6rem;      /* Hero-Überschrift */
  --schrift-h2: 3rem;        /* Abschnitts-Überschriften */
  --schrift-slogan: 2rem;    /* Schreibschrift-Slogan */
  --schrift-gross: 1.15rem;  /* Preise, Adresse */
  --schrift-text: 1.15rem;   /* Fließtext */
  --schrift-label: 1.05rem;  /* Großbuchstaben: Menü, Buttons, Untertitel, Kachel-Titel */
  --schrift-klein: 0.95rem;  /* Hinweise, Kleingedrucktes */
}

/*--------------------------- ALLGEMEIN --------------------------------*/
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  font-family: "Saira Condensed", Arial, Helvetica, sans-serif;
  font-size: var(--schrift-text);
  line-height: 1.5em;
  color: var(--text);
  background-color: var(--creme);
}

h1,
h2 {
  font-family: "Great Vibes", cursive;
  font-weight: 400;
  color: var(--rosa-dunkel);
  line-height: 1.2em;
  margin: 0 0 0.5rem;
}

h1 {
  font-size: var(--schrift-h1);
}

h2,
.unterseite h1 {
  font-size: var(--schrift-h2);
}

h3,
h2.zwischentitel {
  font-size: var(--schrift-label);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 1rem;
}

/* Zwischentitel im Impressum: h2 für die Gliederung, Optik wie h3 */
h2.zwischentitel {
  font-family: inherit;
  font-weight: 700;
  color: var(--text);
  line-height: 1.5em;
}

a {
  color: var(--rosa-link);
}

/* Sichtbarer Fokus für Tastatur-Bedienung */
a:focus-visible {
  outline: 3px solid var(--text);
  outline-offset: 3px;
}

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

.untertitel {
  font-size: var(--schrift-label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--text);
  margin-top: 0;
}

.klein {
  font-size: var(--schrift-klein);
  line-height: 1.4em;
}

.gross {
  font-size: var(--schrift-gross);
  font-weight: 600;
  text-decoration: none;
}

.button {
  display: inline-block;
  background-color: var(--rosa-dunkel);
  color: white;
  font-size: var(--schrift-label);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.6rem 1.4rem;
  border-radius: 2rem;
  margin: 0.25rem 0.5rem 0.25rem 0;
}

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

.button-hell {
  background-color: var(--gruen);
  color: var(--text);
}

/*--------------------------- HERO --------------------------------*/
.hero {
  padding: 3rem 1rem 9rem;
  text-align: center;
  /* Ebenen von oben nach unten: Welle, heller Schleier, Foto */
  background:
    url("img/welle.svg") bottom / 100% 8rem no-repeat,
    linear-gradient(rgba(244, 243, 237, 0.8), rgba(244, 243, 237, 0.9)),
    url("img/web/massage-hero.jpg") center / cover;
}

.hero-logo {
  width: 720px;
  margin: 0 auto 1.5rem;
}

.slogan {
  font-family: "Great Vibes", cursive;
  font-size: var(--schrift-slogan);
  color: var(--text);
}

/*--------------------------- SEKTIONEN --------------------------------*/
.section {
  padding: 2rem 1rem;
  background: var(--creme);
  margin: 0 auto;
}

.zweispaltig {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.zweispaltig img {
  border-radius: 1rem;
}

/* Preisbox wie am Flyer */
.preisbox {
  background-color: var(--rosa-dunkel);
  color: white;
  padding: 1.25rem;
  border-radius: 1rem;
  margin: 1.5rem 0;
}

.preis {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: var(--schrift-gross);
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  padding: 0.6rem 0;
}

.preis span:last-child {
  white-space: nowrap;
}

.hinweise {
  padding-left: 1.2rem;
}

.hinweise li::marker {
  color: var(--rosa);
}

/* Kontakt-Kacheln: Anrufen, WhatsApp, E-Mail */
.kontakt-karten {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1.5rem 0 2.5rem;
}

.karte {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.3rem;
  padding: 1.5rem 1rem;
  background-color: white;
  border-top: 0.4rem solid var(--rosa);
  border-radius: 1rem;
  color: var(--text);
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  overflow-wrap: anywhere;
}

.karte:hover {
  background-color: var(--rosa-hell);
}

.karte img {
  width: 40px;
  height: 40px;
  padding: 12px;
  background-color: var(--rosa);
  border-radius: 50%;
  margin-bottom: 0.5rem;
}

.karte-titel {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  font-size: var(--schrift-label);
  color: var(--rosa-dunkel);
}

/* WhatsApp-Kachel in Grün aus der Visitenkarte */
.karte-gruen {
  border-top-color: var(--gruen);
}

.karte-gruen img {
  background-color: #8fae76;
}

.karte-gruen:hover {
  background-color: #e9f0e1;
}

/* Anfahrt: eine große Kachel mit Foto links und Adresse rechts */
.anfahrt {
  flex-direction: row;
  padding: 0;
  overflow: hidden;
  align-items: stretch;
}

.anfahrt:hover {
  background-color: white;
}

.anfahrt .anfahrt-foto {
  width: 45%;
  height: auto;
  object-fit: cover;
  object-position: top;
  padding: 0;
  margin: 0;
  border-radius: 0;
  background: none;
}

.anfahrt-inhalt {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 1.25rem 0.75rem;
}

/* Handy: etwas kleinere Schrift, damit alles nebeneinander Platz hat */
.anfahrt-inhalt img {
  width: 28px;
  height: 28px;
  padding: 10px;
}

.anfahrt .karte-titel {
  font-size: 1rem;
  letter-spacing: 0.04em;
}

.anfahrt .adresse {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3em;
  margin: 0.3rem 0 0.8rem;
}

.anfahrt .button {
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  padding: 0.5rem 0.9rem;
  margin: 0;
}

/* 404-Seite zentriert */
.fehlerseite {
  text-align: center;
}

/* Abstand beim Anspringen, damit Überschriften nicht unter dem Menü liegen */
.hero,
.section {
  scroll-margin-top: 60px;
}

/* Trennlinie mit Farbe aus der Visitenkarte */
#leistungen,
#kontakt {
  border-top: 0.4rem solid var(--gruen);
}

/*--------------------------- FOOTER --------------------------------*/
.footer {
  background-color: var(--rosa-dunkel);
  color: white;
  padding: 2rem 1rem;
  text-align: center;
}

.footer a {
  font-size: var(--schrift-label);
  text-decoration: none;
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.footer-logo {
  width: 260px;
  margin: 0 auto;
}

.footer-kontakt a,
.footer-credit a {
  font-size: inherit;
  text-transform: none;
  letter-spacing: normal;
  text-decoration: underline;
}

/*---------------------------TOPNAV --------------------------------*/
/* Navigation in dunklem Rosa (wie Preisbox und Footer) */
.topnav {
  background-color: var(--rosa-dunkel);
  overflow: hidden;
  border-bottom: 0.4rem solid var(--gruen);
  /* Menü bleibt beim Scrollen oben */
  position: sticky;
  top: 0;
  z-index: 10;
}

/* Logo im Menü nur am Handy */
.nav-logo {
  display: none;
  height: 34px;
  width: auto;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: var(--schrift-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: rgba(0, 0, 0, 0.12);
  color: white;
}

/* Fokus im Menü nach innen, sonst schneidet overflow: hidden ihn ab */
.topnav a:focus-visible {
  outline: 3px solid white;
  outline-offset: -5px;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: rgba(0, 0, 0, 0.2);
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {
    display: none;
  }

  .topnav a.icon {
    float: right;
    display: block;
    font-size: 22px;
  }

  /* Handy: Logo statt "Home" */
  .topnav a:first-child {
    padding: 6px 16px;
    background-color: transparent;
  }

  .topnav a:first-child .nav-logo {
    display: block;
  }

  .topnav a:first-child .nav-text {
    display: none;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {
    position: sticky;
  }

  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }

  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

/*--------------------------- @media Bereich --------------------------------*/
@media(min-width: 700px) {
  .zweispaltig {
    flex-direction: row;
    align-items: center;
  }

  .zweispaltig>* {
    flex: 1;
    min-width: 0;
  }

  .kontakt-karten {
    flex-direction: row;
  }

  .preisbox {
    padding: 1.5rem 2rem;
  }

  .kontakt-karten .karte {
    flex: 1;
  }

  /* Anfahrt am Desktop: größere Schrift und Foto */
  .anfahrt .anfahrt-foto {
    width: 50%;
    min-height: 400px;
  }

  .anfahrt-inhalt {
    padding: 2.5rem 1.5rem;
  }

  .anfahrt-inhalt img {
    width: 40px;
    height: 40px;
    padding: 12px;
  }

  .anfahrt .karte-titel {
    font-size: var(--schrift-label);
    letter-spacing: 0.08em;
  }

  .anfahrt .adresse {
    font-size: calc(var(--schrift-gross) * 1.3);
    margin: 0.5rem 0 1rem;
  }

  .anfahrt .button {
    font-size: var(--schrift-label);
    letter-spacing: 0.08em;
    padding: 0.6rem 1.4rem;
  }

  :root {
    --schrift-h1: 3.2rem;
  }
}

@media(min-width: 900px) {

  /* SCHRIFTGRÖSSEN – Desktop */
  :root {
    --schrift-h1: 3.8rem;
    --schrift-h2: 4rem;
    --schrift-slogan: 2.6rem;
    --schrift-gross: 1.6rem;
    --schrift-text: 1.35rem;
    --schrift-label: 1.2rem;
    --schrift-klein: 1.05rem;
  }

  body {
    display: grid;
    grid-template-columns: 1fr minmax(600px, 1100px) 1fr;
    grid-template-areas: "nav nav nav"
      "hero hero hero"
      ". inhalt ."
      "footer footer footer";
  }

  /* Unterseiten (Impressum, 404): gleiche Aufteilung */
  body.unterseite {
    grid-template-areas: "nav nav nav"
      ". inhalt ."
      "footer footer footer";
  }

  .topnav {
    grid-area: nav;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 2rem;
  }

  .hero {
    grid-area: hero;
  }

  /* Inhalt (<main>): auf der Startseite die drei Abschnitte, auf Unterseiten der Text */
  #inhalt {
    grid-area: inhalt;
  }

  .footer {
    grid-area: footer;
  }

  .section {
    box-sizing: border-box;
    width: 100%;
    max-width: 1100px;
    min-width: 600px;
    padding: 4rem 1.5rem;
  }
}