/* ===========================================================
   studio hautnah – Kosmetik & Fußpflege, Gramastetten
   Stil / Design-System · Erstentwurf (Datenstadl / WebKI)
   Farben: Berry + Eukalyptusgrün · Grau/Weiß · runde Formen
   =========================================================== */

/* ---------- Design-Tokens ---------- */
:root {
  /* Berry (Primärfarbe 1) – EIN kräftiger Ton: die exakte Logo-Farbe
     (Beschluss Susanne 24.07.2026, aus Logo.jpeg gemessen) */
  --berry:     #780040;
  --berry-900: var(--berry);
  --berry-800: var(--berry);
  --berry-700: var(--berry);   /* Header, große Headlines */
  --berry-600: var(--berry);
  --berry-500: var(--berry);   /* Primär-Akzent */
  --berry-400: var(--berry);   /* Hover / Glow */
  --berry-100: #F5E4EC;   /* zarter Berry-Hintergrund – bleibt bewusst als heller Hauch */
  --berry-050: #FBF2F6;

  /* Eukalyptusgrün (Primärfarbe 2) */
  --euka-700: #4C6E5E;
  --euka-600: #5F8574;    /* Eukalyptus tief */
  --euka-500: #7BA091;
  --euka-300: #ADCabb;
  --euka-200: #CDE0D6;
  --euka-050: #EBF3EE;    /* sehr helles Grün */

  /* Grau / Weiß (Sekundär) */
  --grau-900: #2E2A2C;    /* Fließtext dunkel */
  --grau-700: #514B4E;
  --grau-500: #7A7377;    /* gedämpfter Text */
  --grau-300: #C9C2C5;
  --grau-200: #E7E1E3;    /* Linien */
  --grau-100: #F2EEEF;
  --weiss:    #FFFFFF;
  --creme:    #FAF7F5;

  /* Rollen */
  --bg:        var(--creme);
  --text:      var(--grau-900);
  --muted:     var(--grau-500);
  --linie:     var(--grau-200);

  /* Typo */
  --serif: "Literata", Georgia, "Times New Roman", serif;
  --sans:  "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Radien (alles rund) */
  --r-s: 14px;
  --r-m: 22px;
  --r-l: 34px;
  --r-xl: 48px;
  --r-pill: 999px;

  /* Schatten */
  --schatten-s: 0 4px 16px rgba(120, 0, 64, 0.06);
  --schatten-m: 0 14px 40px rgba(120, 0, 64, 0.10);
  --schatten-l: 0 30px 70px rgba(120, 0, 64, 0.14);

  --maxbreite: 1160px;
  --tempo: 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Schriften (lokal, DSGVO-konform) ---------- */
@font-face {
  font-family: 'Literata';
  src: url('fonts/literata.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('fonts/nunito.woff2') format('woff2');
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

/* ---------- Reset / Basis ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--text);
  background: var(--bg);
  font-size: clamp(16px, 1rem + 0.15vw, 18px);
  line-height: 1.7;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.1;
  color: var(--berry-700);
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.4rem, 1.8rem + 3vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem); font-weight: 300; }
h3 { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem); }
p  { margin: 0 0 1em; }
.betont { color: var(--euka-600); font-style: italic; }

/* ---------- Layout ---------- */
.wrap { width: min(100% - 2.4rem, var(--maxbreite)); margin-inline: auto; }
.sektion { padding: clamp(4rem, 3rem + 5vw, 8rem) 0; position: relative; }
.sektion--eng { padding: clamp(3rem, 2rem + 3vw, 5rem) 0; }
.mittig { text-align: center; }
.kicker {
  display: inline-block;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--euka-600);
  margin-bottom: 1rem;
}
.blei { font-size: 1.12rem; color: var(--grau-700); max-width: 60ch; }
.mittig .blei { margin-inline: auto; }

/* ---------- Buttons (Pillenform) ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6em;
  padding: 0.9em 1.8em;
  border-radius: var(--r-pill);
  font-family: var(--sans);
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform var(--tempo), box-shadow var(--tempo), background var(--tempo), color var(--tempo);
  will-change: transform;
}
.btn--berry {
  background: var(--berry-500);
  color: var(--weiss);
  box-shadow: 0 10px 26px rgba(120, 0, 64, 0.30);
}
.btn--berry:hover { background: var(--berry-400); transform: translateY(-3px); box-shadow: 0 16px 34px rgba(120, 0, 64, 0.38); }
.btn--euka {
  background: var(--euka-600);
  color: var(--weiss);
  box-shadow: 0 10px 26px rgba(95, 133, 116, 0.28);
}
.btn--euka:hover { background: var(--euka-500); transform: translateY(-3px); }
.btn--rand {
  background: transparent;
  border-color: var(--berry-500);
  color: var(--berry-600);
}
.btn--rand:hover { background: var(--berry-500); color: var(--weiss); transform: translateY(-3px); }
.btn--wa { background: #25D366; color: #063D1E; box-shadow: 0 10px 26px rgba(37, 211, 102, 0.30); }
.btn--wa:hover { background: #1FBE5B; color: #04331a; transform: translateY(-3px); }

/* ---------- Kopf / Navigation ---------- */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 247, 245, 0.82);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--linie);
}
.kopf__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0.75rem 0; min-height: 68px;
}
.marke { display: inline-flex; align-items: center; gap: 0.7rem; }
.marke__kreis {
  width: 42px; height: 42px; border-radius: var(--r-pill);
  background: radial-gradient(circle at 30% 30%, var(--berry-400), var(--berry-700));
  color: var(--weiss); display: grid; place-items: center;
  font-family: var(--serif); font-size: 1.15rem; font-weight: 600;
  box-shadow: var(--schatten-s);
}
.marke__txt { display: flex; flex-direction: column; line-height: 1.05; }
.marke__name { font-family: var(--serif); font-size: 1.32rem; color: var(--berry-700); }
.marke__sub { font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--euka-600); font-weight: 800; }

.nav { display: flex; align-items: center; gap: 0.35rem; }
.nav a {
  padding: 0.5em 1em; border-radius: var(--r-pill);
  font-weight: 700; color: var(--grau-700);
  transition: background var(--tempo), color var(--tempo);
}
.nav a:hover { background: var(--berry-050); color: var(--berry-600); }
.nav a.aktiv { background: var(--berry-100); color: var(--berry-700); }
.nav__cta { margin-left: 0.4rem; }

.burger {
  display: none; width: 46px; height: 46px; border: none; cursor: pointer;
  background: var(--berry-050); border-radius: var(--r-pill);
  position: relative;
}
.burger span, .burger span::before, .burger span::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 20px; height: 2.2px; background: var(--berry-700); border-radius: 2px;
  transform: translate(-50%, -50%); transition: 0.3s;
}
.burger span::before { transform: translate(-50%, -8px); }
.burger span::after  { transform: translate(-50%, 6px); }
.nav-offen .burger span { background: transparent; }
.nav-offen .burger span::before { transform: translate(-50%, -50%) rotate(45deg); }
.nav-offen .burger span::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { position: relative; padding-top: clamp(2rem, 1rem + 3vw, 4rem); overflow: hidden; }
.hero__grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}
.hero h1 span { color: var(--euka-600); }
.hero__aktionen { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.8rem; }
.hero__badges { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.8rem; }
.badge {
  display: inline-flex; align-items: center; gap: 0.45em;
  background: var(--weiss); border: 1px solid var(--linie);
  padding: 0.5em 1em; border-radius: var(--r-pill);
  font-size: 0.85rem; font-weight: 700; color: var(--grau-700);
  box-shadow: var(--schatten-s);
}
.badge b { color: var(--berry-600); }

/* Rundes Portrait mit rotierendem Ring */
.portrait { position: relative; justify-self: center; width: min(420px, 82vw); aspect-ratio: 1; }
.portrait__ring {
  position: absolute; inset: -14px; border-radius: var(--r-pill);
  background: conic-gradient(from 0deg, var(--berry-400), var(--euka-500), var(--berry-400));
  -webkit-mask: radial-gradient(circle, transparent 63%, #000 64%);
          mask: radial-gradient(circle, transparent 63%, #000 64%);
  animation: dreh 18s linear infinite;
  opacity: 0.85;
}
.portrait__bild {
  position: absolute; inset: 0; border-radius: var(--r-pill); overflow: hidden;
  background: linear-gradient(150deg, var(--berry-100), var(--euka-050));
  box-shadow: var(--schatten-l); display: grid; place-items: center;
}
.portrait__bild img { width: 100%; height: 100%; object-fit: cover; }
.portrait__platzhalter { text-align: center; color: var(--berry-600); padding: 2rem; }
.portrait__platzhalter svg { width: 74px; height: 74px; opacity: 0.6; margin-bottom: 0.6rem; }
.portrait__platzhalter span { display: block; font-weight: 800; font-size: 0.9rem; }
.portrait__platzhalter small { color: var(--muted); }
.portrait__chip {
  position: absolute; bottom: 6%; left: -6%;
  background: var(--weiss); border-radius: var(--r-l);
  padding: 0.8rem 1.1rem; box-shadow: var(--schatten-m);
  display: flex; align-items: center; gap: 0.6rem; font-weight: 800; color: var(--berry-700);
  animation: schweben 5s ease-in-out infinite;
}
.portrait__chip small { display: block; font-weight: 600; color: var(--muted); font-size: 0.72rem; }

@keyframes dreh { to { transform: rotate(360deg); } }
@keyframes schweben { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ---------- Dekorative Blobs (runde Formen) ---------- */
.blob {
  position: absolute; z-index: -1; filter: blur(2px);
  border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
  opacity: 0.5; animation: blobmorph 16s ease-in-out infinite;
}
.blob--berry { background: radial-gradient(circle at 40% 40%, var(--berry-100), transparent 72%); }
.blob--euka  { background: radial-gradient(circle at 40% 40%, var(--euka-200), transparent 72%); }
.blob--1 { width: 460px; height: 460px; top: -120px; right: -140px; }
.blob--2 { width: 380px; height: 380px; bottom: -160px; left: -160px; animation-delay: -6s; }
.blob--3 { width: 300px; height: 300px; top: 30%; left: 60%; animation-delay: -3s; }
@keyframes blobmorph {
  0%,100% { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; transform: rotate(0deg) scale(1); }
  50%     { border-radius: 63% 37% 38% 62% / 57% 63% 37% 43%; transform: rotate(18deg) scale(1.06); }
}

/* ---------- Leistungs-Kacheln ---------- */
.karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.4rem; }
.karte {
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--r-l); padding: 2rem 1.8rem;
  box-shadow: var(--schatten-s);
  transition: transform var(--tempo), box-shadow var(--tempo), border-color var(--tempo);
  position: relative; overflow: hidden;
}
.karte:hover { transform: translateY(-8px); box-shadow: var(--schatten-m); border-color: var(--euka-200); }
.karte__icon {
  width: 64px; height: 64px; border-radius: var(--r-pill);
  display: grid; place-items: center; margin-bottom: 1.1rem;
  background: var(--berry-050); color: var(--berry-500);
}
.karte:nth-child(3n+2) .karte__icon { background: var(--euka-050); color: var(--euka-600); }
.karte__icon svg { width: 30px; height: 30px; }
.karte h3 { color: var(--berry-700); margin-bottom: 0.35rem; }
.karte p { color: var(--grau-700); font-size: 0.98rem; margin: 0; }
.karte__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; }
.karte__tags span {
  font-size: 0.74rem; font-weight: 800; color: var(--euka-700);
  background: var(--euka-050); padding: 0.3em 0.8em; border-radius: var(--r-pill);
}

/* ---------- Leistungs-Kategorien (Detailseite) ---------- */
.kategorie { margin-top: 3.5rem; }
.kategorie__kopf { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.6rem; }
.kategorie__nr {
  width: 54px; height: 54px; border-radius: var(--r-pill); flex: none;
  display: grid; place-items: center; font-family: var(--serif);
  font-size: 1.4rem; color: var(--weiss);
  background: linear-gradient(140deg, var(--berry-500), var(--berry-700));
}
.kategorie:nth-child(even) .kategorie__nr { background: linear-gradient(140deg, var(--euka-500), var(--euka-700)); }
.leistung {
  display: grid; grid-template-columns: 1fr; gap: 0.3rem;
  padding: 1.4rem 0; border-bottom: 1px dashed var(--grau-200);
}
.leistung:last-child { border-bottom: none; }
.leistung h4 { font-family: var(--sans); font-weight: 800; color: var(--berry-700); font-size: 1.08rem; margin: 0; }
.leistung p { margin: 0; color: var(--grau-700); font-size: 0.98rem; }

/* ---------- Preisliste ---------- */
.preisgruppe { margin-top: 2.6rem; }
.preisgruppe h3 {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding-bottom: 0.5rem; border-bottom: 3px solid var(--euka-200);
}
.preiszeile {
  display: flex; align-items: baseline; gap: 0.8rem;
  padding: 0.85rem 0; border-bottom: 1px dashed var(--grau-200);
}
.preiszeile__name { font-weight: 700; color: var(--grau-900); }
.preiszeile__name small { display: block; font-weight: 600; color: var(--muted); font-size: 0.82rem; }
.preiszeile__punkte { flex: 1; border-bottom: 2px dotted var(--grau-300); transform: translateY(-4px); }
.preiszeile__preis { font-family: var(--serif); font-size: 1.2rem; color: var(--berry-600); white-space: nowrap; }

/* Hinweis-Banner (Platzhalter-Inhalte) */
.hinweis {
  display: flex; gap: 0.8rem; align-items: flex-start;
  background: var(--euka-050); border: 1px dashed var(--euka-300);
  border-radius: var(--r-m); padding: 1rem 1.2rem; color: var(--euka-700);
  font-size: 0.92rem; margin-bottom: 2rem;
}
.hinweis svg { flex: none; width: 22px; height: 22px; margin-top: 2px; }

/* ---------- Band / Aufruf ---------- */
.band {
  background: linear-gradient(140deg, var(--berry-700), var(--berry-900));
  color: var(--weiss); border-radius: var(--r-xl);
  padding: clamp(2.5rem, 2rem + 3vw, 4.5rem); text-align: center;
  position: relative; overflow: hidden;
}
.band h2 { color: var(--weiss); }
.band p { color: rgba(255,255,255,0.85); }
.band .btn--rand { border-color: rgba(255,255,255,0.6); color: var(--weiss); }
.band .btn--rand:hover { background: var(--weiss); color: var(--berry-700); }
.band__kreis { position: absolute; border-radius: var(--r-pill); background: rgba(255,255,255,0.06); }
.band__kreis--1 { width: 260px; height: 260px; top: -80px; left: -60px; }
.band__kreis--2 { width: 180px; height: 180px; bottom: -70px; right: 8%; }

/* ---------- Vorteile / Werte ---------- */
.werte { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.6rem; }
.wert { text-align: center; }
.wert__kreis {
  width: 78px; height: 78px; border-radius: var(--r-pill); margin: 0 auto 1rem;
  display: grid; place-items: center;
  background: var(--berry-050); color: var(--berry-500);
}
.wert:nth-child(even) .wert__kreis { background: var(--euka-050); color: var(--euka-600); }
.wert__kreis svg { width: 34px; height: 34px; }
.wert h3 { font-size: 1.15rem; }
.wert p { color: var(--grau-700); font-size: 0.95rem; }

/* ---------- Kontakt ---------- */
.kontakt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.info-karte {
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--r-l); padding: 2rem; box-shadow: var(--schatten-s);
}
.info-zeile { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 0; border-bottom: 1px dashed var(--grau-200); }
.info-zeile:last-child { border-bottom: none; }
.info-zeile__icon {
  width: 46px; height: 46px; flex: none; border-radius: var(--r-pill);
  display: grid; place-items: center; background: var(--berry-050); color: var(--berry-500);
}
.info-zeile__icon svg { width: 22px; height: 22px; }
.info-zeile b { color: var(--berry-700); display: block; }
.info-zeile a { color: var(--grau-700); }
.info-zeile a:hover { color: var(--berry-500); }

/* ---------- WhatsApp Schwebe-Button ---------- */
.wa-float {
  position: fixed; right: clamp(1rem, 2vw, 2rem); bottom: clamp(1rem, 2vw, 2rem);
  z-index: 60; width: 62px; height: 62px; border-radius: var(--r-pill);
  background: #25D366; display: grid; place-items: center;
  box-shadow: 0 12px 30px rgba(37, 211, 102, 0.45);
  transition: transform var(--tempo);
  animation: puls 2.6s ease-out infinite;
}
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 32px; height: 32px; fill: #fff; }
@keyframes puls {
  0%   { box-shadow: 0 12px 30px rgba(37,211,102,0.45), 0 0 0 0 rgba(37,211,102,0.5); }
  70%  { box-shadow: 0 12px 30px rgba(37,211,102,0.45), 0 0 0 18px rgba(37,211,102,0); }
  100% { box-shadow: 0 12px 30px rgba(37,211,102,0.45), 0 0 0 0 rgba(37,211,102,0); }
}

/* ---------- Fuß ---------- */
.fuss { background: var(--berry-900); color: rgba(255,255,255,0.78); padding: 3.5rem 0 2rem; }
.fuss__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
.fuss a { color: rgba(255,255,255,0.78); }
.fuss a:hover { color: var(--weiss); }
.fuss h4 { color: var(--weiss); font-family: var(--sans); font-weight: 800; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; }
.fuss ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.fuss__marke { font-family: var(--serif); font-size: 1.5rem; color: var(--weiss); margin-bottom: 0.6rem; }
.fuss__unten {
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.12);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.6rem;
  font-size: 0.85rem; color: rgba(255,255,255,0.6);
}
.fuss__unten a { color: rgba(255,255,255,0.6); }

/* ---------- Scroll-Animationen ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22,1,0.36,1); }
.reveal.sichtbar { opacity: 1; transform: none; }
.reveal[data-verzug="1"] { transition-delay: 0.08s; }
.reveal[data-verzug="2"] { transition-delay: 0.16s; }
.reveal[data-verzug="3"] { transition-delay: 0.24s; }
.reveal[data-verzug="4"] { transition-delay: 0.32s; }

/* ---------- Rechtsseiten ---------- */
.rechtstext { max-width: 760px; }
.rechtstext h2 { margin-top: 2.4rem; font-size: 1.5rem; }
.rechtstext p, .rechtstext li { color: var(--grau-700); }
.rechtstext a { color: var(--berry-500); }

/* ---------- Responsiv ---------- */
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; text-align: center; }
  .hero__aktionen, .hero__badges { justify-content: center; }
  .portrait { order: -1; }
  .kontakt-grid { grid-template-columns: 1fr; }
  .fuss__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .nav { position: fixed; inset: 68px 0 auto 0; flex-direction: column; align-items: stretch;
    background: var(--creme); padding: 1rem 1.2rem 1.6rem; gap: 0.3rem;
    box-shadow: var(--schatten-m); transform: translateY(-140%); transition: transform 0.4s ease;
    border-bottom: 1px solid var(--linie); }
  .nav-offen .nav { transform: translateY(0); }
  .nav a { padding: 0.9em 1em; }
  .burger { display: block; }
  .nav__cta { margin: 0.4rem 0 0; text-align: center; }
  .fuss__grid { grid-template-columns: 1fr; }
  .portrait__chip { left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}