/* =========================================================
   Men's Care – neues digitales Erscheinungsbild (wie AMNESO)
   Stand 16.10.2026

   Diese Datei wird NACH style.css geladen und überschreibt nur
   Farben, Verläufe, Knöpfe, Karten, Übergänge und Bewegungen.
   Schriftgrößen und Texte bleiben unverändert. Einzige Ausnahme:
   Überschriften auf dunklem Grund sind Medium statt Light (ganz unten).

   Zurück zum alten Aussehen: die Zeile mit "ci-2026.css" im
   <head> der Seiten löschen.
   ========================================================= */

:root {
  /* neue Farben */
  --tannen: #1F3D31;      /* Tannengrün (vorher #4F6354) */
  --wald: #2C5443;        /* Waldgrün */
  --tief: #16302A;        /* Ende der dunklen Verläufe */
  --blatt: #5F9A78;       /* Blattgrün */
  --leucht: #9FE0B6;      /* nur für Leuchten und Glanz */
  --mint: #D9F2E1;
  --champ: #F3E6CF;       /* Champagner */
  --auf-dunkel: #D6E6DC;  /* Fließtext auf Dunkelgrün */
  --fade: 90px;           /* Höhe der weichen Übergänge */

  /* der dunkle Hintergrund, an einer Stelle definiert */
  --gruen-flaeche:
    radial-gradient(ellipse 45% 60% at 85% 10%, rgba(159, 224, 182, 0.28), transparent 70%),
    radial-gradient(ellipse 40% 50% at 0% 100%, rgba(95, 154, 120, 0.35), transparent 70%),
    radial-gradient(ellipse 30% 35% at 45% 0%, rgba(243, 230, 207, 0.12), transparent 70%),
    linear-gradient(135deg, var(--wald) 0%, var(--tannen) 55%, var(--tief) 100%);
}

@media (max-width: 560px) {
  :root { --fade: 60px; }
}

/* ---------- Dunkle Flächen: Anthrazit wird Tannengrün ---------- */
/* Es kommen keine neuen dunklen Flächen dazu. Nur die bisherigen
   anthrazitfarbenen Flächen bekommen das neue Grün. */
.dunkel,
.posten--hervor,
.vergleich > div:last-child,
.buchen-box,
.angebot:first-child {
  background: var(--gruen-flaeche);
  border-color: transparent;
}

.posten--hervor,
.buchen-box,
.angebot:first-child {
  box-shadow: 0 30px 60px -34px rgba(22, 48, 42, 0.75);
}

.dunkel { position: relative; overflow: hidden; isolation: isolate; }
.dunkel > .huelle { position: relative; z-index: 1; }

/* weicher Übergang oben und unten statt harter Kante */
.dunkel::before,
.dunkel::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--fade);
  pointer-events: none;
  z-index: 0;
}
.dunkel::before { top: -1px; background: linear-gradient(180deg, var(--hell) 0%, rgba(246, 248, 245, 0.45) 40%, transparent 100%); }
.dunkel::after { bottom: -1px; background: linear-gradient(0deg, var(--hell) 0%, rgba(246, 248, 245, 0.45) 40%, transparent 100%); }
.dunkel.abschnitt { padding-top: calc(var(--abschnitt) + var(--fade) * 0.5); padding-bottom: calc(var(--abschnitt) + var(--fade) * 0.5); }

/* Preisblatt im Laser-Bereich: Glas statt grauer Kasten */
.preisblatt {
  background: rgba(22, 48, 42, 0.62);
  border: 1px solid rgba(217, 242, 225, 0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.preisblatt dt,
.preisblatt dd { border-bottom-color: rgba(217, 242, 225, 0.16); }
.preisblatt dd,
.posten--hervor .preis,
.angebot:first-child .angebot-preis strong { color: var(--mint); }
.posten--hervor:hover h3 { color: var(--mint); }
.angebot:first-child .nur { background: rgba(217, 242, 225, 0.14); color: var(--mint); }

/* ---------- Fußzeile ---------- */
.fusszeile {
  background:
    radial-gradient(ellipse 40% 60% at 100% 0%, rgba(95, 154, 120, 0.22), transparent 70%),
    linear-gradient(180deg, var(--tief) 0%, #122620 100%);
}
.fuss-unten { border-top-color: rgba(217, 242, 225, 0.14); }
.fuss-buchen {
  background: linear-gradient(180deg, #ffffff 0%, var(--champ) 100%);
  color: var(--tannen);
  box-shadow: 0 12px 30px -10px rgba(159, 224, 182, 0.45);
  transition: transform .25s cubic-bezier(.3, 1.4, .5, 1), box-shadow .25s;
}
.fuss-buchen:hover { background: linear-gradient(180deg, #ffffff 0%, var(--champ) 100%); transform: translateY(-2px); box-shadow: 0 16px 36px -10px rgba(159, 224, 182, 0.7); }

/* ---------- Gutschein-Band: bleibt hell-grün, etwas edler ---------- */
.gutschein {
  background:
    radial-gradient(ellipse 40% 80% at 90% 0%, rgba(217, 242, 225, 0.28), transparent 70%),
    linear-gradient(135deg, #82997F 0%, var(--eukalyptus) 60%, #6C8270 100%);
}
.gutschein .knopf { background: var(--tannen); border-color: var(--tannen); }

/* ---------- Knöpfe ---------- */
.knopf {
  border: 0;
  background: linear-gradient(180deg, #3F7A5C 0%, var(--wald) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 12px 26px -12px rgba(44, 84, 67, 0.8);
  transition: transform .25s cubic-bezier(.3, 1.4, .5, 1), box-shadow .25s, background .25s, color .25s;
}
.knopf:hover {
  background: linear-gradient(180deg, #3F7A5C 0%, var(--wald) 100%);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 16px 32px -10px rgba(95, 154, 120, 0.85), 0 0 0 4px rgba(159, 224, 182, 0.28);
}
.nav .knopf { border: 0; }

/* Rahmen-Knopf auf hellem Grund */
.knopf--hell { background: transparent; color: var(--tannen); border: 1px solid var(--tannen); box-shadow: none; }
.knopf--hell:hover { background: var(--tannen); color: #fff; box-shadow: 0 12px 26px -12px rgba(31, 61, 49, 0.7); }

/* Hauptknopf auf Dunkelgrün: Weiß nach Champagner, mit Glanzstreifen */
.knopf--salbei,
.knopf--weiss,
.gutschein .knopf--weiss {
  position: relative;
  overflow: hidden;
  border: 0;
  color: var(--tannen);
  background: linear-gradient(180deg, #ffffff 0%, var(--champ) 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6) inset, 0 12px 28px -10px rgba(159, 224, 182, 0.55);
}
.knopf--salbei:hover,
.knopf--weiss:hover,
.gutschein .knopf--weiss:hover {
  color: var(--tannen);
  background: linear-gradient(180deg, #ffffff 0%, var(--champ) 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6) inset, 0 16px 36px -8px rgba(159, 224, 182, 0.85), 0 0 40px rgba(159, 224, 182, 0.3);
}
.knopf--salbei::after {
  content: "";
  position: absolute;
  top: 0;
  left: -30%;
  width: 22%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.75), transparent);
  transform: skewX(-20deg);
  animation: mcGlanz 4.5s ease-in-out 2s infinite;
}
@keyframes mcGlanz { 0% { left: -30%; } 35%, 100% { left: 130%; } }

/* zweiter Knopf auf Dunkelgrün: Glas */
.dunkel .knopf--hell,
.buchen-box .knopf--hell,
.angebot:first-child .knopf--hell {
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.dunkel .knopf--hell:hover,
.buchen-box .knopf--hell:hover,
.angebot:first-child .knopf--hell:hover { background: rgba(255, 255, 255, 0.18); }

/* Fokus gut sichtbar */
.knopf:focus-visible { outline: 3px solid var(--blatt); outline-offset: 3px; }
.dunkel .knopf:focus-visible,
.buchen-box .knopf:focus-visible,
.fusszeile a:focus-visible { outline-color: var(--leucht); }

/* Studio-Umschalter */
.umschalter button[aria-pressed="true"] { background: var(--tannen); }

/* ---------- Karten: weicher grüner Schatten, heben sich beim Zeigen ---------- */
.studio,
.preisgruppe,
.angebot,
.checkliste,
.vergleich > div:first-child {
  border-color: #E3EAE5;
  box-shadow: 0 24px 50px -34px rgba(31, 61, 49, 0.5);
  transition: transform .35s cubic-bezier(.3, 1.4, .5, 1), box-shadow .35s;
}
.studio:hover,
.preisgruppe:hover,
.angebot:hover {
  transform: translateY(-4px);
  box-shadow: 0 32px 60px -30px rgba(31, 61, 49, 0.6);
}

/* kleine Kennzeichen */
.nur,
.nav-etikett { background: var(--mint); color: var(--wald); }
.neu { background: var(--blatt); }

/* Linien und Punkte in Blattgrün */
.schritte li { border-top-color: var(--blatt); }
.schritte li::before,
.legende li::before { color: var(--blatt); }
.legende li::before { background: var(--blatt); color: #fff; }
.checkliste li::before { border-color: var(--blatt); }
.status::before { background: var(--blatt); box-shadow: 0 0 0 4px rgba(159, 224, 182, 0.35); }
.nav a:hover,
.nav a[aria-current="page"] { border-bottom-color: var(--blatt); }

/* ---------- Weiche Übergänge Sand -> Hell ---------- */
.hero,
.seitenkopf { background: linear-gradient(180deg, var(--sand) calc(100% - var(--fade)), var(--hell) 100%); }

/* ---------- Bambus ---------- */
.zweig {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  height: auto;
  translate: 0 var(--schweben, 0px);
  will-change: translate;
}
.zweig--oben {
  width: 300px;
  right: -120px;
  top: -10px;
  transform: rotate(8deg);
  opacity: 0.85;
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.3));
}
.zweig--box {
  width: 260px;
  right: -70px;
  bottom: -90px;
  opacity: 0.55;
}
.buchen-box { position: relative; overflow: hidden; isolation: isolate; }
.buchen-box > :not(.zweig) { position: relative; z-index: 1; }

@media (max-width: 860px) {
  .zweig--oben { width: 150px; right: -70px; top: 0; opacity: 0.45; }
  .zweig--box { width: 160px; right: -60px; bottom: -70px; opacity: 0.4; }
}

/* ---------- Hereingleiten beim Scrollen ---------- */
/* Greift nur, wenn bewegung.js läuft. Ohne Skript ist alles sofort sichtbar. */
.mit-bewegung [data-einblenden] {
  opacity: 0;
  transform: translateY(32px) scale(0.98);
  filter: blur(5px);
  transition:
    opacity 1s cubic-bezier(.16, 1, .3, 1) var(--verz, 0s),
    transform 1.1s cubic-bezier(.16, 1, .3, 1) var(--verz, 0s),
    filter .9s ease-out var(--verz, 0s);
}
.mit-bewegung [data-einblenden][data-sichtbar] { opacity: 1; transform: none; filter: none; }
.mit-bewegung [data-einblenden][data-fertig] {
  transition: transform .35s cubic-bezier(.3, 1.4, .5, 1), box-shadow .35s;
}

/* ---------- Weniger Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  .mit-bewegung [data-einblenden] { opacity: 1 !important; transform: none !important; filter: none !important; }
  .zweig { translate: none !important; }
  .knopf--salbei::after { display: none; }
  .knopf:hover, .studio:hover, .preisgruppe:hover, .angebot:hover, .fuss-buchen:hover { transform: none; }
}

/* ---------- Kleine Korrekturen fürs Handy ---------- */
/* Auf sehr schmalen Handys (320 px) war die Laser-Seite etwas zu breit:
   lange Knopftexte dürfen jetzt umbrechen. */
@media (max-width: 400px) {
  .seitenkopf--bild .huelle { grid-template-columns: minmax(0, 1fr); }
  .knopf { white-space: normal; text-align: center; line-height: 1.25; padding-top: 12px; padding-bottom: 12px; }
  .zweig--box { display: none; }
}

/* Preiskarten und Angebote passen auch auf 320 px breite Handys */
.preisgruppen { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
.angebote { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }

/* Lange Wörter in Seitentiteln (z. B. "Datenschutzerklärung") dürfen
   auf dem Handy mit Trennstrich umbrechen. Schriftgröße bleibt gleich. */
@media (max-width: 560px) {
  h1 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
}

/* ---------- Überschriften auf dunklem Grund: Medium statt Light ----------
   Wie bei AMNESO: Auf Dunkelgrün und im grünen Gutschein-Band stehen
   Überschriften in Medium (500), damit sie gut lesbar sind.
   Größe und Text bleiben gleich. Auf hellem Grund bleibt alles Light. */
.dunkel h1, .dunkel h2, .dunkel h3,
.buchen-box h2, .buchen-box h3,
.gutschein h2,
.posten--hervor h3,
.vergleich > div:last-child h2, .vergleich > div:last-child h3,
.angebot:first-child h2, .angebot:first-child h3,
.angebot:first-child .angebot-preis strong {
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* ---------- Auf Dunkelgrün: helle Knöpfe und lesbare Kleinschrift ---------- */
.angebot:first-child .gueltig,
.angebot:first-child s { color: var(--auf-dunkel); }

.dunkel .knopf:not(.knopf--hell),
.buchen-box .knopf:not(.knopf--hell),
.angebot:first-child .knopf:not(.knopf--hell) {
  color: var(--tannen);
  background: linear-gradient(180deg, #ffffff 0%, var(--champ) 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6) inset, 0 12px 28px -10px rgba(159, 224, 182, 0.55);
}
.dunkel .knopf:not(.knopf--hell):hover,
.buchen-box .knopf:not(.knopf--hell):hover,
.angebot:first-child .knopf:not(.knopf--hell):hover {
  color: var(--tannen);
  background: linear-gradient(180deg, #ffffff 0%, var(--champ) 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6) inset, 0 16px 36px -8px rgba(159, 224, 182, 0.85), 0 0 40px rgba(159, 224, 182, 0.3);
}

/* ---------- Handy: Leiste "Termin buchen" erst beim Runterscrollen ----------
   bewegung.js setzt "leiste-zeigen", sobald die Knöpfe oben aus dem Bild sind.
   Ohne Skript bleibt die Leiste wie bisher immer sichtbar. */
@media (max-width: 700px) {
  .leiste-steuern .buchungsleiste {
    transform: translateY(calc(100% + 24px));
    opacity: 0;
    visibility: hidden;
    transition: transform .4s cubic-bezier(.16, 1, .3, 1), opacity .3s, visibility 0s .4s;
  }
  .leiste-steuern.leiste-zeigen .buchungsleiste {
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: transform .4s cubic-bezier(.16, 1, .3, 1), opacity .3s, visibility 0s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .leiste-steuern .buchungsleiste { transition: none; }
}

/* =========================================================
   Startbereich lebendiger (16.10. nachmittags)
   ========================================================= */

/* Logo im Seitenkopf etwas größer */
.kopfzeile .huelle { min-height: 86px; }
.marke img { height: 54px; }
/* Computer: Menü etwas kompakter, damit das größere Logo Platz hat */
@media (min-width: 1261px) {
  .marke img { height: 46px; }
  .kopfzeile .huelle { gap: 16px; }
  .nav { gap: 12px; }
  .nav a { font-size: 14px; }
  .nav .knopf { padding: 0 18px; }
}
/* Ab 1300 px Bildschirmbreite: Seite etwas breiter, Logo groß */
@media (min-width: 1300px) {
  :root { --breite: 1280px; }
  .marke img { height: 54px; }
  .nav { gap: 20px; }
}
@media (max-width: 520px) { .marke img { height: 40px; } .kopfzeile .huelle { min-height: 72px; } }

/* Großer Lotus als Wasserzeichen in der Mitte des Startbereichs */
.hero { position: relative; isolation: isolate; }
.hero > .huelle { position: relative; z-index: 1; }
.wasserzeichen {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: min(760px, 80vw);
  height: auto;
  translate: -50% -52%;
  opacity: 0.07;
  pointer-events: none;
  animation: mcAtmen 12s ease-in-out infinite alternate;
}
@keyframes mcAtmen {
  from { transform: scale(0.97) rotate(-1.5deg); opacity: 0.06; }
  to   { transform: scale(1.03) rotate(1.5deg);  opacity: 0.09; }
}
@media (max-width: 860px) {
  .wasserzeichen { width: 110vw; top: 34%; opacity: 0.06; }
}

/* Bildbereich: Bögen schweben leicht, kommen beim Laden nacheinander */
.boegen { isolation: isolate; }
.boegen::before {
  content: "";
  position: absolute;
  inset: 10% -6% -4% 8%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(159, 224, 182, 0.45), rgba(217, 242, 225, 0.25) 55%, transparent);
  filter: blur(20px);
  animation: mcLicht 10s ease-in-out infinite alternate;
}
@keyframes mcLicht {
  from { transform: translate(-3%, 2%) scale(0.95); opacity: 0.7; }
  to   { transform: translate(3%, -2%) scale(1.05); opacity: 1; }
}

.boegen > * {
  box-shadow: 0 30px 60px -32px rgba(31, 61, 49, 0.55);
  animation:
    mcHoch 0.9s cubic-bezier(.2, .8, .2, 1) both,
    mcSchweben 7s ease-in-out 1s infinite alternate;
}
.boegen > :nth-child(1) { animation-delay: .15s, 1s; }
.boegen > :nth-child(2) { animation-delay: .3s, 2.2s; }
.boegen > :nth-child(3) { animation-delay: .45s, 3.4s; }
@keyframes mcHoch { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes mcSchweben { from { translate: 0 0; } to { translate: 0 -10px; } }

.bogen img { transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); }
.bogen:hover img { transform: scale(1.04); }

/* Lotus-Kachel: Tannengrün mit schimmerndem Lotus und Bambus */
.boegen .blatt {
  position: relative;
  overflow: hidden;
  background: var(--gruen-flaeche);
}
.boegen .blatt .blatt-lotus { position: relative; z-index: 1; width: 62%; height: auto; }
.boegen .blatt .zweig--kachel {
  width: 95%;
  right: -32%;
  top: -12%;
  opacity: 0.75;
  transform: rotate(12deg);
}

@media (prefers-reduced-motion: reduce) {
  .wasserzeichen, .boegen::before, .boegen > * { animation: none !important; }
  .bogen:hover img { transform: none; }
}

/* Kopfzeile auf großen Bildschirmen etwas breiter, damit Logo und Menü
   nebeneinander Platz haben (vorher ragte das Menü ab 1600 px über den Rand). */
@media (min-width: 1261px) {
  .marke-ort { display: none !important; }
}