/*
 * Apple-Design-Schicht für monuth.co.at
 *
 * Wird nach den seiteneigenen <style>-Blöcken geladen und überschreibt sie.
 * Grundlage: Apple-Designprinzipien (WWDC) – Typografie mit größenabhängiger
 * Laufweite, transluzente Materialien, sofortiges Feedback beim Drücken,
 * räumlich konsistente Übergänge und Rücksicht auf Bewegungs-, Transparenz-
 * und Kontrast-Einstellungen. Farben und Schriften der Marke bleiben erhalten.
 */

:root {
  color-scheme: dark;

  /* Radien – durchgängig weiche, „kontinuierliche“ Ecken */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-pill: 999px;

  /* Bewegung – kritisch gedämpft (keine Überschwinger) als Standard */
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-press: 100ms;
  --dur-fast: 200ms;
  --dur-base: 380ms;
  --dur-slow: 700ms;

  /* Materialien */
  --mat-bar: rgba(15, 17, 23, 0.62);
  --mat-sheet: rgba(20, 23, 32, 0.72);
  --mat-card: rgba(248, 246, 241, 0.035);
  --mat-card-hover: rgba(248, 246, 241, 0.06);
  --mat-edge: rgba(248, 246, 241, 0.08);
  --mat-edge-top: rgba(248, 246, 241, 0.12);
  --mat-blur: blur(22px) saturate(180%);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25), 0 4px 14px rgba(0, 0, 0, 0.18);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.3), 0 24px 60px rgba(0, 0, 0, 0.35);

  --nav-h: 72px;
}

/* ---------------------------------------------------------------------------
   Grundlagen
   ------------------------------------------------------------------------ */

html {
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  line-height: 1.65;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

/* Kein 300-ms-Tap-Delay auf interaktiven Elementen */
a, button, [role="button"], summary, label, input, select, textarea {
  touch-action: manipulation;
}

::selection { background: rgba(201, 168, 76, 0.35); color: var(--white); }

/* Sichtbarer, weicher Fokusring nur für Tastaturnutzung */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
:focus:not(:focus-visible) { outline: none; }

/* ---------------------------------------------------------------------------
   Typografie – Laufweite und Zeilenabstand passen sich der Größe an
   ------------------------------------------------------------------------ */

h1 {
  line-height: 1.04;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
h2 {
  line-height: 1.1;
  letter-spacing: -0.016em;
  text-wrap: balance;
}
h3, h4 {
  line-height: 1.25;
  letter-spacing: -0.006em;
  text-wrap: balance;
}
p, li { text-wrap: pretty; }

.impressum h1 { letter-spacing: -0.02em; }

/* Große Headlines etwas präsenter */
#hero h1 { font-size: clamp(2.6rem, 5.4vw, 5.2rem); }
.page-hero h1 { font-size: clamp(2.3rem, 5.2vw, 4.3rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 3.1rem); }

/* Kleine Versal-Labels: leicht positive Laufweite, aber nicht gesperrt */
.hero-tag, .eyebrow, .section-eyebrow, .section-label, .cta-eyebrow,
.portfolio-card-label, .presse-pub, .diff-label, .subtitle, .privacy-subtitle {
  letter-spacing: 0.14em;
}
.nav-links a, .btn-primary, .btn-ghost, .service-link, .presse-link,
.stat-label, .badge, .service-tag, .portfolio-role, .footer-links a,
.cookie-btn, .breadcrumb-bar, .nav-back, .cta-guarantee {
  letter-spacing: 0.08em;
}

/* Fließtext: ruhiger Zeilenabstand, gut lesbar */
.hero-sub, .lead, .about-body, .section-lead, .cta-sub,
.audience-desc, .service-desc, .feature-desc, .faq-answer {
  line-height: 1.7;
}
.hero-sub, .lead { font-size: clamp(1rem, 1.25vw, 1.12rem); }

/* Zahlen gleichmäßig breit */
.stat-num, .service-num, .feature-num, .step-circle, .step-dot {
  font-variant-numeric: lining-nums tabular-nums;
}

/* ---------------------------------------------------------------------------
   Navigation – transluzente Leiste, Inhalt scrollt darunter
   ------------------------------------------------------------------------ */

nav {
  background: var(--mat-bar);
  -webkit-backdrop-filter: var(--mat-blur);
  backdrop-filter: var(--mat-blur);
  border-bottom: 1px solid transparent !important;
  transition: background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
/* Kante erscheint erst, wenn Inhalt tatsächlich unter der Leiste liegt */
nav.is-scrolled {
  border-bottom-color: var(--mat-edge) !important;
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.6);
}

.nav-monogram {
  border-radius: var(--r-sm);
  transition: transform var(--dur-press) ease-out;
}
.nav-logo:active .nav-monogram { transform: scale(0.94); }

.nav-links a {
  position: relative;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav-links a[aria-current="true"] { color: var(--white); }

.nav-cta {
  border-radius: var(--r-pill) !important;
  padding: 0.5rem 1.25rem !important;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-press) ease-out !important;
}
.nav-cta:active { transform: scale(0.96); }

.nav-back { transition: color var(--dur-fast) var(--ease-out); }

/* Menü-Knöpfe: große Trefferfläche, animiertes Icon */
.hamburger, .nav-hamburger {
  width: 44px;
  height: 44px;
  margin-right: -10px;
  align-items: center;
  justify-content: center;
  gap: 6px !important;
  padding: 0 !important;
  border-radius: var(--r-pill);
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  z-index: 102;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.hamburger:active, .nav-hamburger:active { background: rgba(248, 246, 241, 0.08); }
.hamburger span, .nav-hamburger span {
  width: 20px !important;
  height: 1.5px !important;
  border-radius: 2px;
  background: var(--white) !important;
  transform-origin: center;
  transition: transform var(--dur-base) var(--ease-spring),
              opacity var(--dur-fast) var(--ease-out) !important;
}
.hamburger span:nth-child(2), .nav-hamburger span:nth-child(2) { display: none; }
.hamburger.active span:nth-child(1), .nav-hamburger.active span:nth-child(1) {
  transform: translateY(3.75px) rotate(45deg) !important;
}
.hamburger.active span:nth-child(3), .nav-hamburger.active span:nth-child(3) {
  transform: translateY(-3.75px) rotate(-45deg) !important;
}

/* Mobiles Menü – Material-Sheet, das aus dem Menü-Knopf (oben rechts)
   heraus entsteht und auf demselben Weg wieder verschwindet */
.mobile-nav {
  display: flex !important;
  position: fixed;
  inset: 0;
  z-index: 99;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  padding: calc(var(--nav-h) + 1.5rem) 1.5rem 2rem;
  background: var(--mat-sheet);
  -webkit-backdrop-filter: blur(0px) saturate(100%);
  backdrop-filter: blur(0px) saturate(100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-spring),
              -webkit-backdrop-filter var(--dur-base) var(--ease-spring),
              backdrop-filter var(--dur-base) var(--ease-spring),
              visibility 0s linear var(--dur-base);
}
.mobile-nav.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  -webkit-backdrop-filter: var(--mat-blur);
  backdrop-filter: var(--mat-blur);
  transition: opacity var(--dur-base) var(--ease-spring),
              -webkit-backdrop-filter var(--dur-base) var(--ease-spring),
              backdrop-filter var(--dur-base) var(--ease-spring),
              visibility 0s;
}
.mobile-nav a {
  display: block;
  text-decoration: none;
  padding: 0.95rem 0.25rem;
  border-bottom: 1px solid var(--mat-edge);
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.85rem !important;
  font-weight: 400;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  color: var(--white);
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top right;
  transition: opacity var(--dur-base) var(--ease-spring),
              transform var(--dur-base) var(--ease-spring),
              color var(--dur-fast) var(--ease-out);
}
.mobile-nav.open a { opacity: 1; transform: none; }
.mobile-nav.open a:nth-child(2) { transition-delay: 30ms; }
.mobile-nav.open a:nth-child(3) { transition-delay: 60ms; }
.mobile-nav.open a:nth-child(4) { transition-delay: 90ms; }
.mobile-nav.open a:nth-child(5) { transition-delay: 120ms; }
.mobile-nav.open a:nth-child(6) { transition-delay: 150ms; }
.mobile-nav a:active { color: var(--gold); }
.mobile-nav a.nav-cta,
.mobile-nav a:last-child[href*="kontakt"] {
  margin-top: 1.75rem;
  border: none !important;
  border-radius: var(--r-pill) !important;
  background: var(--gold);
  color: var(--ink) !important;
  text-align: center;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem !important;
  font-weight: 500;
  padding: 1rem 1.5rem !important;
}
@media (min-width: 901px) {
  .mobile-nav { display: none !important; }
}

/* Unterseiten: altes Aufklapp-Verhalten der Link-Liste neutralisieren */
@media (max-width: 900px) {
  nav .nav-links { display: none !important; }
}

/* ---------------------------------------------------------------------------
   Buttons – Feedback beim Drücken, nicht erst beim Loslassen
   ------------------------------------------------------------------------ */

.btn-primary {
  border-radius: var(--r-pill) !important;
  padding: 0.95rem 2rem !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 8px 24px -10px rgba(201, 168, 76, 0.55);
  transition: background-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-press) ease-out !important;
}
.btn-primary:hover { transform: none !important; }
.btn-primary:active {
  transform: scale(0.97) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 4px 12px -8px rgba(201, 168, 76, 0.5);
}

.btn-ghost {
  padding: 0.95rem 0.25rem;
  border-radius: var(--r-pill);
  transition: color var(--dur-fast) var(--ease-out), opacity var(--dur-press) ease-out;
}
.btn-ghost:active { opacity: 0.6; }
.btn-ghost::after { transition: transform var(--dur-base) var(--ease-spring) !important; }

.service-link, .presse-link, .back-link, .nav-back {
  transition: opacity var(--dur-press) ease-out, color var(--dur-fast) var(--ease-out) !important;
}
.service-link:active, .presse-link:active, .back-link:active, .nav-back:active { opacity: 0.5; }

/* ---------------------------------------------------------------------------
   Karten – eigenständige Material-Flächen statt Haarlinien-Raster
   ------------------------------------------------------------------------ */

.services-grid, .portfolio-grid, .presse-grid {
  gap: 1rem !important;
  background: transparent !important;
}

.service-card, .portfolio-card, .presse-card, .audience-card, .skin-card,
.feature-card, .related-card, .cta-box, .section-card {
  background: var(--mat-card) !important;
  border: 1px solid var(--mat-edge) !important;
  border-top-color: var(--mat-edge-top) !important;
  border-radius: var(--r-lg) !important;
  overflow: hidden;
  transition: background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-spring) !important;
}
.skin-card { border-radius: var(--r-md) !important; }

@media (hover: hover) {
  .service-card:hover, .portfolio-card:hover, .presse-card:hover,
  .audience-card:hover, .skin-card:hover, .feature-card:hover, .related-card:hover {
    background: var(--mat-card-hover) !important;
    border-color: rgba(201, 168, 76, 0.28) !important;
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
  }
}
/* Gesamte Karte ist ein Link → direktes Feedback beim Antippen */
.related-card:active { transform: scale(0.985) !important; transition-duration: var(--dur-press) !important; }

.portfolio-card.featured {
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(201, 168, 76, 0.10), transparent 60%),
    var(--mat-card) !important;
}

/* Goldene Unterkante der Leistungskarten: vom Rand her wachsen */
.service-card::before { transition: transform var(--dur-slow) var(--ease-spring) !important; }

.audience-card::after { border-top-right-radius: var(--r-lg); }

.badge, .service-tag {
  border-radius: var(--r-pill) !important;
  padding: 0.3rem 0.8rem !important;
}

.step-circle, .step-dot {
  box-shadow: 0 0 0 6px var(--ink), 0 0 0 7px rgba(201, 168, 76, 0.12);
}

.about-photo, .about-photo-frame::before { border-radius: var(--r-lg) !important; }
.about-quote {
  border-left: none !important;
  border-radius: var(--r-md);
  background: var(--mat-sheet) !important;
  -webkit-backdrop-filter: var(--mat-blur);
  backdrop-filter: var(--mat-blur);
  border: 1px solid var(--mat-edge);
  box-shadow: var(--shadow-lg);
  margin: -3.5rem 1.5rem 0 !important;
}

.stat { border-left-width: 1px !important; }

/* ---------------------------------------------------------------------------
   Marquee – ruhig, pausiert bei Hover
   ------------------------------------------------------------------------ */

.diff-marquee { animation-duration: 48s !important; }
#differentiator:hover .diff-marquee { animation-play-state: paused; }

/* ---------------------------------------------------------------------------
   FAQ – weiches, unterbrechbares Aufklappen (Höhe per JS)
   ------------------------------------------------------------------------ */

.faq-list { gap: 0.75rem !important; }

.faq-item {
  border: 1px solid var(--mat-edge) !important;
  border-radius: var(--r-md) !important;
  background: var(--mat-card);
  transition: background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out) !important;
}
.faq-item.open {
  background: var(--mat-card-hover) !important;
  border-color: rgba(201, 168, 76, 0.3) !important;
}
.faq-question {
  padding: 1.35rem 1.6rem !important;
  transition: color var(--dur-fast) var(--ease-out) !important;
}
.faq-question:active { opacity: 0.7; }

.faq-icon {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: rgba(201, 168, 76, 0.1);
  font-size: 1.2rem !important;
  transition: transform var(--dur-base) var(--ease-spring),
              background-color var(--dur-base) var(--ease-out) !important;
}
.faq-item.open .faq-icon { background: rgba(201, 168, 76, 0.2); }

/* Mit JS: Panel animiert seine Höhe; Antwort bleibt immer im DOM sichtbar */
.faq-js .faq-answer {
  display: block !important;
  border-top: none !important;
  padding: 0 1.6rem 1.4rem !important;
}
.faq-panel {
  height: 0;
  overflow: hidden;
  transition: height var(--dur-base) var(--ease-spring);
}
.faq-panel > .faq-answer {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-spring);
}
.faq-item.open .faq-panel > .faq-answer { opacity: 1; transform: none; }

/* ---------------------------------------------------------------------------
   Formulare
   ------------------------------------------------------------------------ */

.hs-form-wrapper input[type="text"],
.hs-form-wrapper input[type="email"],
.hs-form-wrapper input[type="tel"],
.hs-form-wrapper input[type="number"],
.hs-form-wrapper textarea,
.hs-form-wrapper select {
  border-radius: var(--r-sm) !important;
  border-color: var(--mat-edge) !important;
  font-size: 1rem !important; /* verhindert Zoom auf iOS */
}
.hs-form-wrapper .hs-button,
.hs-form-wrapper input[type="submit"] {
  border-radius: var(--r-pill) !important;
  letter-spacing: 0.1em !important;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-press) ease-out !important;
}
.hs-form-wrapper .hs-button:active,
.hs-form-wrapper input[type="submit"]:active { transform: scale(0.98); }
.hs-form-wrapper iframe, #ticket-form-iframe { border-radius: var(--r-md); }

/* ---------------------------------------------------------------------------
   Cookie-Hinweis – schwebende Material-Karte, rein und raus nach unten
   ------------------------------------------------------------------------ */

.cookie-banner {
  left: 1rem !important;
  right: 1rem !important;
  bottom: 1rem !important;
  max-width: 980px;
  margin: 0 auto;
  padding: 1.25rem 1.5rem !important;
  border: 1px solid var(--mat-edge) !important;
  border-top-color: var(--mat-edge-top) !important;
  border-radius: var(--r-lg);
  background: var(--mat-sheet) !important;
  -webkit-backdrop-filter: var(--mat-blur);
  backdrop-filter: var(--mat-blur) !important;
  box-shadow: var(--shadow-lg);
  transform: translateY(calc(100% + 2rem)) !important;
  transition: transform var(--dur-slow) var(--ease-spring) !important;
}
.cookie-banner.visible { transform: none !important; }
.cookie-banner.hidden { transform: translateY(calc(100% + 2rem)) !important; }
.cookie-btn {
  border-radius: var(--r-pill) !important;
  padding: 0.7rem 1.3rem !important;
  transition: background-color var(--dur-fast) var(--ease-out),
              transform var(--dur-press) ease-out !important;
}
.cookie-btn:active { transform: scale(0.96); }

/* ---------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------ */

footer { border-top-color: var(--mat-edge) !important; }
.footer-monogram { border-radius: var(--r-xs) !important; }

/* ---------------------------------------------------------------------------
   Einblenden beim Scrollen
   ------------------------------------------------------------------------ */

.reveal, .ad-reveal {
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-spring),
              background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out) !important;
}
.reveal { transform: translateY(18px); }
.ad-reveal { opacity: 0; transform: translateY(18px); }
.reveal.visible, .ad-reveal.visible { opacity: 1; transform: none; }

/* Hero: Einstieg etwas kürzer und mit gleicher Kurve */
.hero-tag, #hero h1, .hero-sub, .hero-actions, .hero-stats {
  animation-duration: 0.9s !important;
  animation-timing-function: var(--ease-out) !important;
}

/* ---------------------------------------------------------------------------
   Kleine Bildschirme
   ------------------------------------------------------------------------ */

@media (max-width: 900px) {
  :root { --nav-h: 64px; }
  .about-quote { margin: -2.5rem 0.75rem 0 !important; }
  .cookie-banner { left: 0.75rem !important; right: 0.75rem !important; bottom: 0.75rem !important; }
  .service-card, .portfolio-card, .presse-card, .audience-card,
  .feature-card, .related-card, .cta-box { border-radius: var(--r-md) !important; }
}

/* ---------------------------------------------------------------------------
   Barrierefreiheit – Systemeinstellungen respektieren
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .hero-tag, #hero h1, .hero-sub, .hero-actions, .hero-stats,
  .hero-corner, .hero-corner-br { opacity: 1 !important; animation: none !important; }
  .diff-marquee { animation: none !important; }
  /* Nur sanfte Überblendungen, keine Bewegung */
  .reveal, .ad-reveal { transform: none !important; transition: opacity 250ms ease !important; }
  .mobile-nav a, .faq-panel > .faq-answer { transform: none !important; }
  .faq-panel { transition: none !important; }
  .cookie-banner, .cookie-banner.hidden { transform: none !important; opacity: 0; transition: opacity 250ms ease !important; }
  .cookie-banner.visible { opacity: 1; }
  .cookie-banner:not(.visible) { visibility: hidden; }
  .service-card:hover, .portfolio-card:hover, .presse-card:hover, .audience-card:hover,
  .skin-card:hover, .feature-card:hover, .related-card:hover { transform: none !important; }
}

@media (prefers-reduced-transparency: reduce) {
  nav { background: var(--ink) !important; }
  nav, .mobile-nav, .mobile-nav.open, .cookie-banner, .about-quote {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .mobile-nav, .cookie-banner, .about-quote { background: var(--ink-soft) !important; }
}

@media (prefers-contrast: more) {
  :root {
    --white-dim: rgba(248, 246, 241, 0.88);
    --mat-edge: rgba(248, 246, 241, 0.35);
    --mat-edge-top: rgba(248, 246, 241, 0.45);
  }
  nav, .mobile-nav, .cookie-banner { background: var(--ink) !important; }
  nav { border-bottom-color: var(--mat-edge) !important; }
}