/* SP-Traumschmiede – Targeted overrides for responsiveness and refined Services design */

/* 1) Anchor offset so in-page links don’t hide under fixed header */
section[id] { scroll-margin-top: 110px; }

/* 2) Fix: Hero subtitle under header on ~13" laptops (e.g., 1280–1440px widths)
   Note: Use a more specific selector and !important to override inline <style> in index.php */
@media (min-width: 1024px) and (max-width: 1440px) {
  .hero-split .hero-content { padding-top: 112px !important; }
}

/* 2a) Homepage hero: shift headline block further left on desktop */
@media (min-width: 1024px) {
  /* Push the content block to the left edge of the left panel */
  .hero-left { justify-content: flex-start !important; }
  /* Add modest left margin so text doesn’t touch the edge */
  .hero-split .hero-content { margin-left: 3rem; }
  /* Left-align text elements while keeping overall layout intact */
  .hero-split .hero-content h1 { text-align: left !important; }
  .hero-split .hero-subtitle { text-align: left !important; }
  .hero-split .hero-title { text-align: left !important; }
  .hero-split .hero-cta { justify-content: flex-start !important; }
}

/* 3) Premium Services – unify to black/gold aesthetic and prevent any clipping */
.services-premium { 
  background: #000 !important;
  overflow: visible; /* avoid clipping long text/decor */
  padding-left: 2rem; padding-right: 2rem; /* tighter gutters on smaller laptops */
}

/* Grid: 3 cols desktop, 2 cols tablets, 1 col mobile */
.services-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 2rem !important; }
/* Bleibt bis 1200px dreispaltig; darunter automatisch 2/1 Spalten (siehe Medienabfragen oben) */
@media (max-width: 1200px) { .services-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 768px)  { .services-grid { grid-template-columns: 1fr !important; } }

/* Cards: cleaner, subtle glass effect, no harsh gray */
.service-card {
  background: rgba(0,0,0,0.78) !important;
  border: 1px solid rgba(204,167,56,0.15) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.25) !important;
  min-height: 0 !important; /* allow content to grow naturally */
}

/* Typography: readable, no truncation */
.service-title {
  color: #fff !important;
  /* Ensure single-line titles for the three services on desktop */
  white-space: nowrap;
  hyphens: none !important;
  padding-right: 0.25em; /* visual breathing room to the right edge */
  /* etwas kleiner, damit drei Karten nebeneinander einzeilig bleiben */
  font-size: clamp(1.35rem, 2.2vw, 1.9rem) !important;
  line-height: 1.2 !important;
  /* Reserve height for up to 2 lines so descriptions align */
  min-height: 2.6em !important;
}

/* Allow the long word "KREATIVTECHNIKEN" to wrap when needed so it's fully visible */
.services-grid .service-card:nth-child(2) .service-title {
  white-space: normal !important;      /* allow wrapping */
  overflow-wrap: anywhere;             /* break long word if necessary */
  word-break: break-word;              /* legacy support */
  hyphens: auto !important;            /* allow hyphenation if available */
}
.service-description {
  color: rgba(255,255,255,0.88) !important;
  display: block !important;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
  max-height: none !important;
}
.service-features li { color: rgba(255,255,255,0.9) !important; }

/* Hover: elegant, consistent lift + clean white accents */
.service-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(255,255,255,0.15) !important;
  background: rgba(0,0,0,0.85) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}
.service-card::before { opacity: 0; }

/* 4) About section – ensure no text truncation/clipping */
.about-premium { overflow: visible !important; }

/* Keep "SP‑Traumschmiede" on a single line in the About headline */
.about-title .gold-accent {
  white-space: nowrap;
  hyphens: manual; /* do not break at the hyphen */
}

/* On small screens allow wrapping again to avoid overflow */
@media (max-width: 768px) {
  .service-title { white-space: normal; }
}

/* 5) Consent text links in Contact form: force gold color on homepage */
.contact-premium .checkbox-label a,
.contact-premium .checkbox-label a:visited {
  color: #CCA738 !important; /* gold */
  text-decoration: underline;
}

.contact-premium .checkbox-label a:hover,
.contact-premium .checkbox-label a:focus {
  color: #9C7F2A !important; /* darker gold on hover/focus */
}

/* 6) Testimonials: unify hover effect with Services cards and keep border visible */
.testimonials-premium {
  overflow: visible !important;
  isolation: isolate; /* create new stacking context over neighbors */
  position: relative !important;
  z-index: 20 !important; /* ensure section sits above neighbors when cards hover out */
}

.testimonials-premium .testimonial-container,
.testimonials-premium .testimonials-grid {
  position: relative !important;
  z-index: 5 !important; /* ensure cards render above section overlays */
  overflow: visible !important; /* allow hovered card shadow/border to show */
}

/* Keep the slider scrollable horizontally while allowing hover effects to show */
.testimonials-premium .testimonial-slider {
  position: relative !important;
  z-index: 5 !important;
  overflow-x: auto !important; /* enable horizontal scrolling for slides */
  overflow-y: visible !important; /* allow box-shadows to render */
  -webkit-overflow-scrolling: touch; /* smoother on iOS */
  align-items: stretch !important; /* keep card heights aligned */
  /* Create top/bottom breathing room so scaled cards are not clipped
     by the scroll container when hovering (overflow-y visible may be
     treated as auto in some browsers if overflow-x is scroll). */
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.testimonials-premium .testimonial-card-premium {
  border: 1px solid rgba(204,167,56,0.15) !important; /* ensure border persists */
  background: rgba(0,0,0,0.78) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.25) !important;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1) !important; /* match Services */
  will-change: transform; /* smoother lift; no layout jump */
  height: auto !important; /* allow flex stretch to equalize heights */
  align-self: stretch !important; /* equal height with neighbors */
  transform-origin: center center !important; /* scale from center without shifting layout */
  backface-visibility: hidden; /* improve rendering on Safari */
}

.testimonials-premium .testimonial-card-premium:hover {
  transform: scale(1.02) translateZ(0) !important; /* subtle enlarge like Services */
  border: 1px solid rgba(255,255,255,0.15) !important; /* keep a visible border on hover */
  background: rgba(0,0,0,0.85) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important; /* match Services */
  z-index: 30 !important; /* ensure above backgrounds */
}

/* Remove decorative top-line overlay to match Services */
.testimonials-premium .testimonial-card-premium::before {
  opacity: 0 !important;
}

/* 7) Testimonials nav: force disabled styling when at edges */
.testimonials-premium .testimonial-arrow.disabled,
.testimonials-premium .testimonial-arrow[aria-disabled="true"] {
  opacity: 0.3 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  transform: none !important;
  box-shadow: none !important;
}

/* 8) Author initials: enforce perfect circle even with two letters */
.testimonials-premium .author-initials {
  width: 50px !important;
  height: 50px !important;
  flex: 0 0 50px !important;
  aspect-ratio: 1 / 1 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* 9) Mobile nav: prevent logo overlapping the open menu */
@media (max-width: 1295px) {
  .menu-open .nav-premium .logo-animated {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

/* 10) A11y: Links must not rely on color only */
.footer-credits a,
.footer-legal a,
.footer-links a {
  text-decoration: none !important;
}

/* Keep clear focus styles for accessibility */
.footer-credits a:focus-visible,
.footer-legal a:focus-visible,
.footer-links a:focus-visible {
  outline: 2px solid #CCA738;
  outline-offset: 2px;
}

/* Add a non-farbliches Merkmal für den BMC-Link */
.footer-credits a[href*="bmc.jetzt"]::after {
  content: "↗";
  display: inline-block;
  margin-left: 0.3em;
  font-size: 0.9em;
  line-height: 1;
}

.footer-credits a:hover,
.footer-legal a:hover,
.footer-links a:hover {
  text-decoration: underline;
}

/* 9) Footer: prevent logo overflow; scale logo ~25% smaller globally */
.footer-logo img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Premium footer logo base size (was ~80px → now max 60px) */
.footer-premium .footer-logo img {
  max-height: 60px;
  width: auto;
}

@media (max-width: 479px) {
  .footer-premium .footer-logo img {
    max-height: 56px; /* smaller on very small phones */
    width: auto;
  }
}

/* --- Global responsive safeties --- */
html, body { overflow-x: hidden; }
img, video { max-width: 100%; height: auto; }
/* Standard container gutters on small screens */
.container, .footer-container, .nav-container {
  padding-left: 0px;
  padding-right: 0px;
}

/* Materials/Services grids: ensure wrap on small screens */
.materials-grid.services-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 1200px) { .materials-grid.services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px)  { .materials-grid.services-grid { grid-template-columns: 1fr; } }

/* Prevent flex/grid children from overflowing their containers */
.footer-container,
.nav-container,
.testimonials-grid,
.testimonial-slider,
.services-grid,
.gallery-grid { min-width: 0; }

.footer-container > *,
.nav-container > *,
.testimonials-grid > *,
.testimonial-slider > *,
.services-grid > *,
.gallery-grid > * { min-width: 0; }

/* Robust wrapping for long content without breaking layout */
p, li, .service-description, .about-text, .contact-text, .footer-description {
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

/* Keep philosophy lists aligned when items wrap */
ul.philosophy-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.philosophy-list > li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 1rem;
}

ul.philosophy-list > li::before {
  content: '→';
  position: absolute;
  left: 0;
  top: 0.1rem;
  color: currentColor;
  font-size: 1.1em;
  line-height: 1.2;
}

/* --- Mobile Single-Line Title/Links Adjustments --- */
@media (max-width: 480px) {
  /* Keep key titles on one line and avoid hyphenation */
  .section-title,
  .gallery-title,
  .contact-title {
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    hyphens: manual !important;
    /* scale down slightly on small screens to fit long words */
    font-size: clamp(1.25rem, 6.5vw, 1.75rem) !important;
    letter-spacing: 0.06em;
  }

  /* Ensure nav links stay on one line */
  .mobile-nav-link {
    white-space: nowrap;
  }
}

/* Extra small phones: tighten nav label spacing/sizing */
@media (max-width: 360px) {
  .mobile-nav-link { font-size: 16px; }
}

/* 11) Footer alignment tweaks */
/* Default: do not force alignment globally; rely on layout */

.footer-bottom .footer-copyright,
.footer-bottom .footer-copyright p {
  text-align: left !important;
  margin: 0;
}

/* Desktop: copyright left, credits right */
@media (min-width: 1024px) {
  .footer-bottom { text-align: initial !important; align-items: center !important; }
  .footer-bottom .copyright,
  .footer-bottom .copyright p,
  .footer-bottom .footer-copyright,
  .footer-bottom .footer-copyright p { text-align: left !important; margin: 0; }
  .footer-bottom .footer-credits { margin-left: auto; text-align: right !important; align-items: flex-end; }
}

/* Mobile/tablet: keep footer text left-aligned */
@media (max-width: 992px) {
  .footer-bottom-content { align-items: flex-start !important; text-align: left !important; }
  .footer-bottom-content > * { text-align: left !important; width: 100%; }
  .footer-bottom .footer-legal { justify-content: flex-start; align-items: flex-start; }
}

/* 12) Portfolio mobile: remove top padding on small screens */
@media (max-width: 768px) {
  .portfolio-showcase {
    padding-top: 0 !important; /* keep bottom padding from existing rule */
  }
}

/* 13) Cookie Consent & Modal (premium look) */
.cookie-consent[hidden] { display: block !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; }
.cookie-modal[hidden] { display: none !important; }

.cookie-consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9999;
  padding: 20px;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(204,167,56,0.18);
  box-shadow: 0 -10px 30px rgba(0,0,0,0.35);
}
.cookie-consent .cookie-content { 
  max-width: 1200px; margin: 0 auto; color: #fff; 
  display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.cookie-consent p { margin: 0; color: rgba(255,255,255,0.92); }
.cookie-consent a { color: #CCA738; text-decoration: underline; }
.cookie-consent .cookie-buttons { display: flex; gap: 10px; flex-wrap: wrap; }

/* Premium buttons */
.cookie-consent p { font-size: clamp(0.95rem, 1.1vw, 1.05rem); line-height: 1.65; }
.cookie-consent .btn,
.cookie-modal .btn { 
  /* Unified button sizing to avoid inconsistent heights (e.g., "Notwendige") */
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; line-height: 1.2;
  padding: 10px 16px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.5); color: #fff; cursor: pointer; transition: all .2s ease;
  font-size: clamp(0.92rem, 1vw, 0.98rem); font-weight: 500; letter-spacing: 0.02em; text-transform: none;
}
.cookie-consent .btn:hover,
.cookie-modal .btn:hover { transform: translateY(-1px); border-color: rgba(255,255,255,0.25); }
.cookie-consent .btn-primary, .cookie-modal .btn-primary { background: linear-gradient(135deg, #CCA738, #E5C158); color: #000; border-color: rgba(204,167,56,0.35); font-weight: 700; }
.cookie-consent .btn-secondary, .cookie-modal .btn-secondary { background: rgba(0,0,0,0.65); color: #fff; }
.cookie-consent .btn-light, .cookie-modal .btn-light { background: rgba(255,255,255,0.1); color: #fff; }
.cookie-consent .btn-outline, .cookie-modal .btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,0.35); }

/* Mobile: force identical button heights across rows */
@media (max-width: 600px) {
  .cookie-consent .cookie-buttons { align-items: stretch; }
  .cookie-consent .cookie-buttons .btn,
  .cookie-modal .cookie-modal__actions .btn { 
    height: 48px !important; /* exact height to avoid per-font differences */
    padding-block: 12px !important;
  }
}

/* Modal overlay */
.cookie-modal {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  display: grid; place-items: center;
  padding: 24px;
}
.cookie-modal__dialog {
  width: min(680px, 100%);
  background: rgba(0,0,0,0.85);
  border: 1px solid rgba(204,167,56,0.2);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
  color: #fff;
  padding: 24px;
  position: relative;
}
.cookie-modal__dialog h3 { margin: 0 0 8px; font-weight: 400; letter-spacing: 0.03em; }
.cookie-modal__dialog p { color: rgba(255,255,255,0.9); }
.cookie-modal__close {
  position: absolute; right: 12px; top: 8px;
  background: transparent; color: #fff; border: 0; font-size: 28px; line-height: 1; cursor: pointer;
}
.cookie-groups { display: grid; gap: 14px; margin: 14px 0 18px; }
.cookie-group { border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 14px; background: rgba(0,0,0,0.35); }
.cookie-group__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cookie-group__head label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.cookie-group__desc { margin: 8px 0 0; color: rgba(255,255,255,0.8); }
.badge { font-size: 12px; color: #000; background: linear-gradient(135deg, #CCA738, #E5C158); border-radius: 999px; padding: 4px 8px; font-weight: 700; }
.cookie-modal__actions { display: flex; gap: 10px; justify-content: flex-end; }

/* Consent Embeds */
.consent-embed { position: relative; background: rgba(0,0,0,0.4); border: 1px dashed rgba(255,255,255,0.2); border-radius: 8px; min-height: 160px; display: grid; place-items: center; padding: 20px; }
.consent-embed__message { color: rgba(255,255,255,0.92); text-align: center; margin-bottom: 10px; }

/* Footer cookie settings link style */
.link-like { background: none; border: 0; color: #fff; text-decoration: underline; cursor: pointer; padding: 0; font: inherit; }
.footer-legal .link-like { color: #fff; }

/* 14) Legal pages – refined spacing & typography */
.section-legal { padding: clamp(60px, 6vw, 100px) 0; }
.section-legal .container { max-width: 980px; margin: 0 auto; }
.section-legal .content { color: rgba(255,255,255,0.94); }
.section-legal .content h2 { margin-top: 42px; margin-bottom: 18px; font-weight: 300; letter-spacing: 0.02em; }
.section-legal .content h3 { margin-top: 28px; margin-bottom: 12px; font-weight: 500; letter-spacing: 0.01em; }
.section-legal .content p { margin-bottom: 14px; line-height: 1.7; }
.section-legal .content ul { margin: 8px 0 18px 1.2rem; }
.section-legal .content li { margin: 6px 0; }
.section-legal a { color: #CCA738; text-decoration: underline; }

/* 15) nav-premium – identical header style across pages */
.nav-premium {
  position: fixed;
  top: 0; left: 0; width: 100%;
  padding: 15px 20px;
  z-index: 100;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: linear-gradient(180deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.8) 70%, transparent 100%);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-premium.scrolled {
  padding: 15px 20px;
  background: rgba(0,0,0,0.98);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.4);
}
.nav-container { display: flex; justify-content: space-between; align-items: center; max-width: 1600px; margin: 0 auto; }
.logo-animated { font-size: 1rem; letter-spacing: 0.15em; color: #fff; text-decoration: none; position: relative; overflow: hidden; display: inline-flex; align-items: center; }
.logo-animated img { height: 30px; width: auto; vertical-align: middle; }
.nav-menu { display: flex; gap: 2.5rem; list-style: none; align-items: center; margin: 0; padding: 0; }
.nav-menu li { display: flex; align-items: center; }
.nav-link { color: #fff; text-decoration: none; font-size: 1rem; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; position: relative; transition: color 0.3s ease; display: flex; align-items: center; line-height: 1; }
.nav-link::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 1px; background: #CCA738; transition: width 0.3s ease; }
.nav-link:hover { color: #CCA738; }
.nav-link:hover::after { width: 100%; }
@media (max-width: 1024px) {
  .nav-premium { padding: 12px 20px; }
  .nav-menu { gap: 1.25rem; }
}

/* 16) Hero Split variant for legal pages */
.hero-split { min-height: 70vh; display: flex; position: relative; overflow: hidden; background: linear-gradient(135deg, rgba(0,0,0,0.98) 0%, rgba(0,0,0,0.9) 100%); }
.hero-left { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; z-index: 2; padding: 6rem 2rem; }
.hero-right { flex: 1; position: absolute; right: 0; top: 0; width: 55%; height: 100%; overflow: hidden; z-index: 1; }
.hero-content { max-width: 900px; padding: 32px 16px; position: relative; display: flex; flex-direction: column; gap: 12px; }
.hero-subtitle { font-size: clamp(0.95rem, 1.8vw, 1.25rem); letter-spacing: 0.22em; text-transform: uppercase; color: #CCA738; margin-bottom: 0.75rem; text-align: center; }
.hero-title { font-size: clamp(2.2rem, 5vw, 2.5rem); font-weight: 300; line-height: 1.2; text-align: center; color: #fff; }
.hero-title .gold { color: #CCA738; display: block; font-size: 0.8em; margin-top: 0.2em; }
.hero-image-3d, .image-layer { position: absolute; inset: 0; background-size: cover; background-position: center; }
.image-layer-1 { filter: grayscale(8%) contrast(102%); opacity: 0.45; }
.image-layer-2, .image-layer-3 { display: none; }
@media (min-width: 769px) { .hero-content h1, .hero-title, .hero-subtitle { text-align: center; } }

/* 17) Cookie modal title sizing (avoid wrapping of “-en-”) */
.cookie-modal__dialog #cookieSettingsTitle {
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  white-space: nowrap;
  word-break: keep-all;
  hyphens: manual;
}

/* Make current status slightly smaller and calmer */
.cookie-modal__dialog #cookieStatus {
  font-size: clamp(0.85rem, 1.7vw, 0.95rem);
  color: rgba(255,255,255,0.88);
  margin-top: 2px;
}

/* 18) Cookie banner mobile ordering: Decline + Accept All on top */
@media (max-width: 520px) {
  .cookie-consent .cookie-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  #btnCookiesDecline { order: 1; }
  #btnCookiesAcceptAll { order: 2; }
  #btnCookiesNecessary { order: 3; }
  #btnCookiesSettings { order: 4; }
}

/* 19) Gallery headers: left-align on smartphones across all pages */
@media (max-width: 768px) {
  .gallery-header { text-align: left !important; }
  .gallery-title { text-align: left !important; }
  .gallery-subtitle { text-align: left !important; }
}

/* 20) Gallery title sizing = about-title sizing (global) */
/* Match base clamp used by about titles */
.gallery-title { font-size: clamp(3rem, 6vw, 4.5rem) !important; }
@media (max-width: 768px) { .gallery-title { font-size: 2.5rem !important; } }
@media (max-width: 480px) { .gallery-title { font-size: 2rem !important; } }
@media (max-width: 400px) { .gallery-title { font-size: 1.5rem !important; } }

/* 21) Gallery header horizontal padding: 1rem everywhere */
.gallery-header { padding-left: 1rem !important; padding-right: 1rem !important; }

/* 22) About section: ensure bottom spacing on smartphones */
@media (max-width: 768px) {
  .about-premium { padding-bottom: 30px !important; }
}

/* 23) Gallery filters: 1rem side padding everywhere */
.gallery-filters { padding-left: 1rem !important; padding-right: 1rem !important; }

/* 24) Gallery premium: ensure bottom spacing across pages */
.gallery-premium { padding-bottom: 30px !important; }

/* 24) Testimonials: hide navigation on phones/tablets (no slider there) */
@media (max-width: 1024px) {
  .testimonial-navigation { display: none !important; }
}