/* ===== Salon template design tokens ===== */
:root {
  /* Warm cream-toned palette */
  --bg: oklch(0.972 0.012 78);
  --bg-2: oklch(0.955 0.014 75);
  --surface: oklch(0.99 0.006 78);
  --beige: oklch(0.88 0.024 70);
  --beige-2: oklch(0.82 0.030 65);
  --rose: oklch(0.86 0.038 22);
  --rose-2: oklch(0.78 0.050 22);
  --ink: oklch(0.22 0.008 60);
  --ink-2: oklch(0.38 0.010 60);
  --muted: oklch(0.58 0.010 60);
  --line: oklch(0.88 0.010 70);
  --line-2: oklch(0.82 0.014 70);
  --gold: oklch(0.62 0.060 75);

  --display: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --ui: "Manrope", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  --radius-s: 6px;
  --radius-m: 12px;
  --radius-l: 22px;

  --shadow-s: 0 1px 2px oklch(0.2 0.01 60 / 0.05);
  --shadow-m: 0 12px 40px -18px oklch(0.2 0.01 60 / 0.18);
  --shadow-l: 0 30px 80px -30px oklch(0.2 0.01 60 / 0.22);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--ui);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* ===== Type ===== */
.display { font-family: var(--display); font-weight: 300; letter-spacing: -0.01em; line-height: 1.02; }
.display em { font-style: italic; font-weight: 300; color: var(--rose-2); }
.eyebrow {
  font-family: var(--ui);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 500;
}
.serif-italic { font-family: var(--display); font-style: italic; font-weight: 400; }
.kicker { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 500;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--ink); color: var(--bg); }
.btn-primary:hover { background: oklch(0.30 0.01 60); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { background: var(--bg-2); border-color: var(--ink); }
.btn-light { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-light:hover { background: white; }
.btn-rose { background: var(--rose); color: var(--ink); }
.btn-rose:hover { background: var(--rose-2); }
.btn-text { background: none; border: none; padding: 6px 0; color: var(--ink); border-bottom: 1px solid var(--ink); border-radius: 0; }
.btn-sm { padding: 9px 16px; font-size: 12.5px; }

/* ===== Image placeholders — subtle stripes ===== */
.imgph {
  position: relative;
  background:
    linear-gradient(135deg, transparent 0%, transparent 49.5%, oklch(0.78 0.015 70 / 0.45) 49.5%, oklch(0.78 0.015 70 / 0.45) 50.5%, transparent 50.5%) 0 0 / 14px 14px,
    linear-gradient(180deg, oklch(0.90 0.020 65), oklch(0.84 0.030 60));
  color: oklch(0.35 0.015 60);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 14px;
  overflow: hidden;
}
.imgph.rose {
  background:
    linear-gradient(135deg, transparent 0%, transparent 49.5%, oklch(0.74 0.045 22 / 0.45) 49.5%, oklch(0.74 0.045 22 / 0.45) 50.5%, transparent 50.5%) 0 0 / 14px 14px,
    linear-gradient(180deg, oklch(0.90 0.035 22), oklch(0.83 0.050 22));
}
.imgph.ink {
  background:
    linear-gradient(135deg, transparent 0%, transparent 49.5%, oklch(0.35 0.01 60 / 0.5) 49.5%, oklch(0.35 0.01 60 / 0.5) 50.5%, transparent 50.5%) 0 0 / 14px 14px,
    linear-gradient(180deg, oklch(0.30 0.008 60), oklch(0.22 0.008 60));
  color: oklch(0.85 0.02 70);
}
.imgph .tag {
  background: oklch(1 0 0 / 0.7);
  backdrop-filter: blur(6px);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10px;
}
.imgph.ink .tag { background: oklch(0 0 0 / 0.4); color: oklch(0.95 0.005 70); }

/* ===== Layout helpers ===== */
.container { max-width: 1400px; margin: 0 auto; padding: 0 40px; }
.section { padding: 110px 0; }
.section-tight { padding: 70px 0; }
.divider { height: 1px; background: var(--line); }

/* ===== Cards ===== */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: 24px;
}
.card-flat {
  background: var(--bg-2);
  border-radius: var(--radius-l);
  padding: 28px;
}

/* ===== Pill chips ===== */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 12px;
  color: var(--ink-2);
}
.chip.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* ===== Form ===== */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field label {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}
.input, .textarea, .select {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  font: inherit;
  color: var(--ink);
  transition: border 0.15s ease;
}
.input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--ink); }
.textarea { resize: vertical; min-height: 100px; }

/* ===== Utility ===== */
.flex { display: flex; }
.col { display: flex; flex-direction: column; }
.center { display: flex; align-items: center; justify-content: center; }
.between { display: flex; align-items: center; justify-content: space-between; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; } .gap-8 { gap: 32px; }
.mt-2 { margin-top: 8px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; }

/* Mid-range (laptops 881–1180px): collapse secondary actions */
@media (max-width: 1180px) {
  .hide-md { display: none !important; }
  .shrink-md { max-width: 240px !important; width: 240px !important; }
}

/* Mobile */
@media (max-width: 880px) {
  .container { padding: 0 22px; }
  .section { padding: 70px 0; }
  .hide-mobile { display: none !important; }
}
@media (min-width: 881px) {
  .show-mobile { display: none !important; }
}

/* ===== Mobile-Optimierung Template One =====
   Die Sektionen nutzen Inline-Grids; deshalb hier mit !important auf die
   Klassen-Hooks (t1-*) zugreifen, um die Spalten mobil sauber zu stapeln. */

/* Kein horizontales Scrollen (clip statt hidden → sticky-Header bleibt intakt). */
html, body { overflow-x: clip; max-width: 100%; }

/* Burger-Button (mobiles Menü) */
.t1-burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 999px;
  background: transparent; border: 1px solid var(--line-2); color: var(--ink);
}
.t1-mobile-drawer {
  border-top: 1px solid var(--line);
  background: var(--bg);
  padding: 18px 22px 26px;
  /* Langes Menü auf kleinen Screens scrollt im Drawer statt über den Viewport hinaus. */
  max-height: calc(100dvh - 64px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.t1-mobile-nav { display: flex; flex-direction: column; }
.t1-mobile-nav a {
  padding: 14px 4px; font-size: 17px; color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.t1-mobile-actions { display: grid; gap: 10px; margin-top: 18px; }
.t1-mobile-actions .btn { width: 100%; min-height: 48px; }

@media (max-width: 880px) {
  /* Größere, gut tappbare Buttons */
  .btn { min-height: 44px; }
  .btn-sm { min-height: 42px; padding: 11px 18px; }

  /* Header kompakter */
  .t1-header-inner { padding: 14px 0 !important; }

  /* Abschnitts-Köpfe mit seitlicher Aktion → untereinander */
  .t1-head { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; }

  /* Hero: stapeln, dekorative Float-Karten ausblenden */
  .t1-hero { grid-template-columns: 1fr !important; gap: 30px !important; }
  .t1-hero-visual { height: 60vw !important; max-height: 440px !important; min-height: 280px; }
  .t1-hero-detail, .t1-hero-aicard { display: none !important; }

  /* Inhalts-Grids → eine Spalte */
  .t1-services-grid { grid-template-columns: 1fr !important; }
  .t1-about { grid-template-columns: 1fr !important; gap: 32px !important; }
  .t1-about-images { grid-template-columns: 1fr 1fr !important; grid-template-rows: 130px 130px !important; }
  .t1-gallery-grid { grid-template-columns: 1fr 1fr !important; grid-auto-rows: 170px !important; }
  .t1-ba-grid { grid-template-columns: 1fr !important; }
  .t1-reviews-grid { grid-template-columns: 1fr !important; }
  .t1-contact { grid-template-columns: 1fr !important; gap: 34px !important; }
  .t1-faq { grid-template-columns: 1fr !important; gap: 30px !important; }
  .t1-newsletter { grid-template-columns: 1fr !important; gap: 22px !important; padding: 36px 24px !important; }
  .t1-team-grid { grid-template-columns: 1fr 1fr !important; }
  .t1-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 30px !important; }
}

@media (max-width: 520px) {
  .section { padding: 48px 0 !important; }
  .section-tight { padding: 40px 0 !important; }
  .container { padding: 0 16px; }
  .t1-team-grid,
  .t1-gallery-grid,
  .t1-contact-cards,
  .t1-footer-grid { grid-template-columns: 1fr !important; }
  .t1-form-names { grid-template-columns: 1fr !important; }
}

/* ── Leistungs-Kategorie-Filter (modern, Template One) ── */
.t1-cat-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 36px;
}
.t1-cat-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.t1-cat-tab:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-1px); }
.t1-cat-tab.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.t1-cat-count {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  opacity: 0.55;
}
.t1-cat-tab.active .t1-cat-count { opacity: 0.75; }
@media (max-width: 720px) {
  .t1-cat-filter { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -24px 28px; padding: 0 24px 4px; }
  .t1-cat-tab { flex: 0 0 auto; }
}