/* =============================================================================
   HAJJ UMRAH CHECK – Global Stylesheet
   Kadence Child Theme  |  Version 1.0.0
   Mobile First · WCAG AA · BEM naming
   ============================================================================= */

/* ─── 0. CUSTOM PROPERTIES ───────────────────────────────────────────────── */
:root {
  /* Brand */
  --huc-blue:        #003B95; /* Primärblau – Header, Flächen, Headlines */
  --huc-blue-bright: #016CE4; /* Akzentblau – Links, Hover, Verläufe */
  --huc-blue-dark:   #002a6b; /* dunkleres Blau für Hover/Verläufe */
  --huc-blue-light:  #E8F1FB;
  --huc-gold:        #D8B561;
  --huc-gold-light:  #E8CD92;
  --huc-gold-subtle: #FBF6E9;

  /* Neutral */
  --huc-black:       #1A1A1A;
  --huc-grey-900:    #2D2D2D;
  --huc-grey-700:    #4A4A4A;
  --huc-grey-500:    #6B7F94;
  --huc-grey-300:    #CBD5E1;
  --huc-grey-100:    #F4F6FA;
  --huc-white:       #FFFFFF;

  /* Semantic */
  --huc-text:        var(--huc-black);
  --huc-text-muted:  var(--huc-grey-500);
  --huc-bg:          var(--huc-white);
  --huc-bg-alt:      var(--huc-grey-100);
  --huc-border:      #DDE3ED;
  --huc-success:     #1A8F4E;
  --huc-warning:     #C67C0D;

  /* Typography */
  --huc-font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --huc-font-display: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --huc-text-xs:   .72rem;   /*  ~11.5px */
  --huc-text-sm:   .8125rem; /*  ~13px   */
  --huc-text-base: .9375rem; /*  ~15px   */
  --huc-text-md:   1rem;     /*  ~16px   */
  --huc-text-lg:   1.125rem;
  --huc-text-xl:   1.375rem;
  --huc-text-2xl:  1.625rem;
  --huc-text-3xl:  2rem;
  --huc-text-4xl:  2.5rem;

  /* Spacing */
  --huc-space-1: .25rem;
  --huc-space-2: .5rem;
  --huc-space-3: .75rem;
  --huc-space-4: 1rem;
  --huc-space-5: 1.25rem;
  --huc-space-6: 1.5rem;
  --huc-space-8: 2rem;
  --huc-space-10: 2.5rem;
  --huc-space-12: 3rem;
  --huc-space-16: 4rem;
  --huc-space-20: 5rem;

  /* Layout */
  --huc-max-w:       1200px;
  --huc-max-w-sm:    720px;
  --huc-radius-sm:   6px;
  --huc-radius:      10px;
  --huc-radius-lg:   16px;
  --huc-radius-full: 9999px;

  /* Shadows */
  --huc-shadow-sm:  0 1px 4px rgba(0,0,0,.06);
  --huc-shadow:     0 4px 20px rgba(0,0,0,.09);
  --huc-shadow-lg:  0 8px 40px rgba(0,0,0,.13);
  --huc-shadow-blue: 0 6px 24px rgba(0,59,149,.25);

  /* Transitions */
  --huc-transition: 180ms ease;
}

/* ─── 1. RESET / BASE ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--huc-font-body);
  font-size: var(--huc-text-base);
  color: var(--huc-text);
  background: var(--huc-bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--huc-blue-bright); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { padding-left: 1.25rem; }
button { cursor: pointer; font-family: inherit; }

/* Screen-reader only */
.huc-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ─── 2. TYPOGRAPHY ──────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--huc-font-display);
  color: var(--huc-black);
  line-height: 1.2;
  margin: 0 0 var(--huc-space-4);
}
h1 { font-size: var(--huc-text-2xl); font-weight: 700; }
h2 { font-size: var(--huc-text-xl);  font-weight: 700; }
h3 { font-size: var(--huc-text-lg);  font-weight: 600; font-family: var(--huc-font-body); }
h4 { font-size: var(--huc-text-md);  font-weight: 600; font-family: var(--huc-font-body); }

p { margin: 0 0 var(--huc-space-4); }

.huc-section-label {
  display: block;
  font-size: var(--huc-text-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--huc-blue);
  margin-bottom: var(--huc-space-2);
}
.huc-section-title {
  font-family: var(--huc-font-display);
  font-size: var(--huc-text-2xl);
  font-weight: 700;
  color: var(--huc-black);
  margin-bottom: var(--huc-space-3);
  line-height: 1.2;
}
.huc-section-sub {
  font-size: var(--huc-text-base);
  color: var(--huc-text-muted);
  max-width: 520px;
  margin-bottom: var(--huc-space-8);
}

@media (min-width: 768px) {
  h1 { font-size: var(--huc-text-3xl); }
  h2 { font-size: var(--huc-text-2xl); }
  .huc-section-title { font-size: var(--huc-text-3xl); }
}
@media (min-width: 1024px) {
  h1 { font-size: var(--huc-text-4xl); }
  .huc-section-title { font-size: var(--huc-text-3xl); }
}

/* ─── 3. LAYOUT UTILITIES ────────────────────────────────────────────────── */
.huc-container {
  width: 100%;
  max-width: var(--huc-max-w);
  margin-inline: auto;
  padding-inline: var(--huc-space-4);
}
@media (min-width: 600px)  { .huc-container { padding-inline: var(--huc-space-6); } }
@media (min-width: 1024px) { .huc-container { padding-inline: var(--huc-space-8); } }

.huc-section {
  padding-block: var(--huc-space-12);
}
@media (min-width: 768px)  { .huc-section { padding-block: var(--huc-space-16); } }
@media (min-width: 1024px) { .huc-section { padding-block: var(--huc-space-20); } }

.huc-section--alt  { background: var(--huc-grey-100); }
.huc-section--dark { background: var(--huc-black); color: var(--huc-white); }
.huc-section--blue { background: var(--huc-blue);   color: var(--huc-white); }

/* ─── 4. BUTTONS ─────────────────────────────────────────────────────────── */
.huc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--huc-space-2);
  border: 2px solid transparent;
  border-radius: var(--huc-radius);
  font-family: var(--huc-font-body);
  font-size: var(--huc-text-base);
  font-weight: 600;
  line-height: 1;
  padding: .75rem 1.5rem;
  text-decoration: none;
  transition: background var(--huc-transition), color var(--huc-transition),
              border-color var(--huc-transition), box-shadow var(--huc-transition),
              transform var(--huc-transition);
  white-space: nowrap;
  cursor: pointer;
}
.huc-btn:hover { text-decoration: none; transform: translateY(-1px); }
.huc-btn:active { transform: translateY(0); }
.huc-btn:focus-visible { outline: 3px solid var(--huc-blue); outline-offset: 3px; }

/* Primary */
.huc-btn--primary {
  background: var(--huc-blue);
  color: var(--huc-white);
  border-color: var(--huc-blue);
}
.huc-btn--primary:hover {
  background: var(--huc-blue-bright);
  border-color: var(--huc-blue-bright);
  box-shadow: var(--huc-shadow-blue);
}

/* Gold / CTA */
.huc-btn--gold {
  background: var(--huc-gold);
  color: var(--huc-black);
  border-color: var(--huc-gold);
}
.huc-btn--gold:hover {
  background: var(--huc-gold-light);
  border-color: var(--huc-gold-light);
}

/* Ghost / outline */
.huc-btn--ghost {
  background: transparent;
  color: var(--huc-blue);
  border-color: var(--huc-blue);
}
.huc-btn--ghost:hover {
  background: var(--huc-blue-light);
}

/* Ghost on dark bg */
.huc-btn--ghost-white {
  background: transparent;
  color: var(--huc-white);
  border-color: rgba(255,255,255,.5);
}
.huc-btn--ghost-white:hover {
  border-color: var(--huc-white);
  background: rgba(255,255,255,.08);
}

.huc-btn--lg { padding: .9rem 2rem; font-size: var(--huc-text-md); border-radius: var(--huc-radius); }
.huc-btn--sm { padding: .5rem 1rem; font-size: var(--huc-text-sm); }
.huc-btn--full { width: 100%; }

/* ─── 5. BADGES ──────────────────────────────────────────────────────────── */
.huc-badge {
  display: inline-flex; align-items: center;
  font-size: var(--huc-text-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .25rem .65rem;
  border-radius: var(--huc-radius-full);
}
.huc-badge--blue   { background: var(--huc-blue);        color: var(--huc-white); }
.huc-badge--gold   { background: var(--huc-gold);        color: var(--huc-black); }
.huc-badge--green  { background: #1A8F4E;                 color: var(--huc-white); }
.huc-badge--grey   { background: var(--huc-grey-100);    color: var(--huc-grey-700); border: 1px solid var(--huc-border); }
.huc-badge--outline-blue { background: var(--huc-blue-light); color: var(--huc-blue); }

/* ─── 6. TOPBAR ──────────────────────────────────────────────────────────── */
.huc-topbar {
  background: var(--huc-blue-dark);
  color: rgba(255,255,255,.88);
  font-size: var(--huc-text-xs);
  font-weight: 500;
  text-align: center;
  padding: .45rem var(--huc-space-4);
  letter-spacing: .03em;
}
.huc-topbar a {
  color: var(--huc-gold-light);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ─── 7. HEADER ──────────────────────────────────────────────────────────── */
.huc-header {
  position: sticky;
  top: 0; left: 0; right: 0;
  z-index: 200;
  background: var(--huc-blue);
  border-bottom: none;
  transition: box-shadow var(--huc-transition);
}
.huc-header.is-scrolled {
  box-shadow: 0 4px 20px rgba(0,59,149,.35);
}
.huc-header__inner {
  max-width: var(--huc-max-w);
  margin-inline: auto;
  padding-block: .4rem;
  padding-inline: var(--huc-space-4);
  display: flex;
  align-items: center;
  gap: var(--huc-space-4);
  min-height: 44px;
}
@media (min-width: 600px)  { .huc-header__inner { padding-inline: var(--huc-space-6); } }
@media (min-width: 1024px) { .huc-header__inner { padding-inline: var(--huc-space-8); min-height: 48px; } }

/* ── Logo ── */
.huc-header__logo {
  display: flex; align-items: center;
  text-decoration: none; flex-shrink: 0;
  /* Hard size cap – works for img, svg, and Kadence custom-logo output */
  max-width: 105px;
  height: 28px;
}
.huc-header__logo:hover { opacity: .88; text-decoration: none; }

/* Every img/svg Kadence or WP might output inside the logo link */
.huc-header__logo img,
.huc-header__logo svg,
.huc-header__logo .custom-logo,
.huc-header__logo-img-wrap img,
.huc-header__logo-img-wrap .custom-logo {
  display: block !important;
  height: 28px !important;
  width: auto !important;
  max-width: 105px !important;
  max-height: 28px !important;
  object-fit: contain;
}

/* Kadence wraps logo in a <figure> – flatten it */
.huc-header__logo figure,
.huc-header__logo-img-wrap figure {
  margin: 0; padding: 0; line-height: 0;
  display: flex; align-items: center;
}

/* Fallback text logo (when no custom logo set) */
.huc-header__logo-text { display: flex; flex-direction: column; line-height: 1.15; }
.huc-header__logo-text strong {
  font-family: var(--huc-font-display); font-size: .95rem;
  color: var(--huc-white);
}
.huc-header__logo-text span {
  font-size: var(--huc-text-xs); color: rgba(255,255,255,.7);
  letter-spacing: .05em; text-transform: uppercase;
}

/* ── Primary nav ── */
.huc-header__nav { display: none; flex: 1; }
@media (min-width: 900px) { .huc-header__nav { display: flex; } }

.huc-nav__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: .125rem;
}
.huc-nav__list a {
  display: block;
  padding: .5rem .8rem;
  font-size: var(--huc-text-sm);
  font-weight: 500;
  color: rgba(255,255,255,.88);
  border-radius: var(--huc-radius-sm);
  transition: background var(--huc-transition), color var(--huc-transition);
  text-decoration: none;
  white-space: nowrap;
}
.huc-nav__list a:hover { color: var(--huc-white); background: rgba(255,255,255,.12); }
.huc-nav__list .current-menu-item > a {
  color: var(--huc-white);
  background: rgba(255,255,255,.18);
}

/* ── Header actions ── */
.huc-header__actions {
  margin-left: auto;
  display: flex; align-items: center;
  gap: var(--huc-space-2);
  flex-shrink: 0;
}

/* ── Button 1: Kostenfreies Angebot (white filled) ── */
.huc-header__btn-offer {
  display: none;
  align-items: center; gap: .4rem;
  background: var(--huc-white);
  color: var(--huc-blue);
  border: 2px solid var(--huc-white);
  border-radius: var(--huc-radius);
  font-family: var(--huc-font-body);
  font-size: .78rem;
  font-weight: 700;
  padding: .4rem .75rem;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--huc-transition), box-shadow var(--huc-transition);
  line-height: 1;
}
.huc-header__btn-offer:hover {
  background: rgba(255,255,255,.92);
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
  text-decoration: none;
}
.huc-header__btn-offer svg { flex-shrink: 0; }
@media (min-width: 540px) { .huc-header__btn-offer { display: inline-flex; } }

/* ── Button 2: Jetzt anrufen (ghost/outline) ── */
.huc-header__btn-call {
  display: none;
  align-items: center; gap: .4rem;
  background: transparent;
  color: var(--huc-white);
  border: 2px solid rgba(255,255,255,.55);
  border-radius: var(--huc-radius);
  font-family: var(--huc-font-body);
  font-size: .78rem;
  font-weight: 600;
  padding: .4rem .75rem;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--huc-transition), background var(--huc-transition);
  line-height: 1;
}
.huc-header__btn-call:hover {
  border-color: var(--huc-white);
  background: rgba(255,255,255,.1);
  text-decoration: none;
}
.huc-header__btn-call svg { flex-shrink: 0; }
@media (min-width: 760px) { .huc-header__btn-call { display: inline-flex; } }

/* On small screens: show only icon for call button */
.huc-header__btn-call-icon {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  background: transparent;
  color: rgba(255,255,255,.85);
  border: 2px solid rgba(255,255,255,.4);
  border-radius: var(--huc-radius);
  text-decoration: none;
  transition: border-color var(--huc-transition), background var(--huc-transition);
}
.huc-header__btn-call-icon:hover { border-color: var(--huc-white); background: rgba(255,255,255,.1); }
@media (min-width: 760px) { .huc-header__btn-call-icon { display: none; } }

/* ── Burger (white lines on blue) ── */
.huc-header__burger {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 32px; height: 32px; padding: .5rem;
  background: none; border: none; border-radius: var(--huc-radius-sm);
  transition: background var(--huc-transition);
}
.huc-header__burger span {
  display: block; height: 2px; border-radius: 2px;
  background: var(--huc-white);
  transition: transform var(--huc-transition), opacity var(--huc-transition);
}
.huc-header__burger:hover { background: rgba(255,255,255,.12); }
@media (min-width: 900px) { .huc-header__burger { display: none; } }

/* burger → X state */
.huc-nav-open .huc-header__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.huc-nav-open .huc-header__burger span:nth-child(2) { opacity: 0; }
.huc-nav-open .huc-header__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ─── 8. MOBILE NAV ──────────────────────────────────────────────────────── */
.huc-mobile-nav {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(320px, 85vw);
  background: var(--huc-white);
  z-index: 300;
  transform: translateX(100%);
  transition: transform .25s ease;
  overflow-y: auto; padding: var(--huc-space-6) var(--huc-space-5);
  display: flex; flex-direction: column;
}
.huc-mobile-nav.is-open  { transform: translateX(0); }
.huc-mobile-nav__list    { list-style: none; margin: var(--huc-space-8) 0 var(--huc-space-6); padding: 0; }
.huc-mobile-nav__list li { border-bottom: 1px solid var(--huc-border); }
.huc-mobile-nav__list a  {
  display: block; padding: var(--huc-space-3) 0;
  font-size: var(--huc-text-md); font-weight: 500; color: var(--huc-black);
  text-decoration: none;
}
.huc-mobile-nav__list a:hover { color: var(--huc-blue); }
.huc-mobile-nav__cta    { margin-top: var(--huc-space-4); }
/* Button stack inside mobile nav */
.huc-mobile-nav__btns {
  display: flex; flex-direction: column; gap: var(--huc-space-3);
  margin-top: var(--huc-space-5);
}
.huc-mobile-nav__btn-full {
  display: inline-flex !important;
  width: 100%;
  justify-content: center;
  background: var(--huc-blue) !important;
  color: var(--huc-white) !important;
  border-color: var(--huc-blue) !important;
}
.huc-mobile-nav__btn-full:hover {
  background: var(--huc-blue-dark) !important;
  box-shadow: none !important;
}
.huc-mobile-nav__whatsapp {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  text-align: center; margin-top: 0;
  color: var(--huc-text-muted); font-size: var(--huc-text-sm);
  text-decoration: none; padding: var(--huc-space-3);
  border: 1.5px solid var(--huc-border); border-radius: var(--huc-radius);
  transition: border-color var(--huc-transition), color var(--huc-transition);
}
.huc-mobile-nav__whatsapp:hover { border-color: #25D366; color: #25D366; }

.huc-mobile-nav__overlay {
  position: fixed; inset: 0; z-index: 299;
  background: rgba(0,0,0,.45);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.huc-mobile-nav__overlay.is-visible { opacity: 1; pointer-events: all; }

/* ─── 9. HERO SECTION ────────────────────────────────────────────────────── */
.huc-hero {
  position: relative;
  background: var(--huc-blue-dark);
  min-height: 480px;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
}
.huc-hero__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  background-image: linear-gradient(135deg, var(--huc-blue-dark) 0%, #02305E 100%);
  /* Replace with: background-image: url(your-hero.jpg); */
  z-index: 0;
}
.huc-hero__bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(2,48,94,.25) 0%, rgba(2,48,94,.80) 55%, rgba(2,48,94,.97) 100%);
}
.huc-hero__content {
  position: relative; z-index: 1;
  padding: var(--huc-space-10) var(--huc-space-4) var(--huc-space-10);
  max-width: var(--huc-max-w); margin-inline: auto; width: 100%;
}
.huc-hero__eyebrow {
  display: inline-flex; align-items: center; gap: var(--huc-space-2);
  background: rgba(214,175,83,.15);
  border: 1px solid rgba(214,175,83,.4);
  color: var(--huc-gold-light);
  font-size: var(--huc-text-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding: .3rem .85rem; border-radius: var(--huc-radius-full);
  margin-bottom: var(--huc-space-4);
}
.huc-hero h1 {
  color: var(--huc-white);
  font-size: var(--huc-text-2xl);
  max-width: 520px; margin-bottom: var(--huc-space-3);
}
.huc-hero h1 em { color: var(--huc-gold-light); font-style: normal; }
.huc-hero__sub { color: rgba(255,255,255,.75); font-size: var(--huc-text-base); max-width: 440px; margin-bottom: var(--huc-space-8); }

@media (min-width: 600px) {
  .huc-hero { min-height: 580px; }
  .huc-hero__content { padding-inline: var(--huc-space-6); }
  .huc-hero h1 { font-size: var(--huc-text-3xl); }
}
@media (min-width: 1024px) {
  .huc-hero { min-height: 680px; }
  .huc-hero__content { padding-inline: var(--huc-space-8); padding-block: var(--huc-space-16); }
  .huc-hero h1 { font-size: var(--huc-text-4xl); }
}

/* ─── 10. BOOKING / SEARCH BAR (Booking.com style) ──────────────────────── */
.huc-search-bar {
  background: var(--huc-white);
  border-radius: var(--huc-radius);
  box-shadow: var(--huc-shadow-lg);
  padding: var(--huc-space-4);
  max-width: 900px;
  border-top: 3px solid var(--huc-gold);
}
.huc-search-bar__title {
  font-family: var(--huc-font-display);
  font-size: var(--huc-text-lg);
  font-weight: 700;
  color: var(--huc-black);
  margin-bottom: var(--huc-space-4);
  display: flex; align-items: center; gap: var(--huc-space-2);
}
.huc-search-bar__title span { color: var(--huc-gold); }

.huc-search-bar__fields {
  display: grid;
  gap: var(--huc-space-3);
}
@media (min-width: 640px) {
  .huc-search-bar__fields { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .huc-search-bar__fields { grid-template-columns: 1fr 1fr 1fr 1fr auto; align-items: end; }
}

.huc-field {
  display: flex; flex-direction: column; gap: .3rem;
  position: relative;
}
.huc-field__label {
  font-size: var(--huc-text-xs);
  font-weight: 600;
  color: var(--huc-text-muted);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.huc-field__icon {
  position: absolute;
  left: .75rem; bottom: .7rem;
  color: var(--huc-grey-500);
  pointer-events: none;
}
.huc-field select,
.huc-field input {
  appearance: none; -webkit-appearance: none;
  border: 1.5px solid var(--huc-border);
  border-radius: var(--huc-radius-sm);
  padding: .7rem .9rem .7rem 2.25rem;
  font-family: var(--huc-font-body);
  font-size: var(--huc-text-base);
  color: var(--huc-text);
  background: var(--huc-white);
  width: 100%;
  transition: border-color var(--huc-transition), box-shadow var(--huc-transition);
}
.huc-field select:focus,
.huc-field input:focus {
  outline: none;
  border-color: var(--huc-blue);
  box-shadow: 0 0 0 3px rgba(0,59,149,.12);
}
.huc-field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7F94' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9rem center; padding-right: 2.25rem; }

.huc-search-bar__submit {
  background: var(--huc-blue);
  color: var(--huc-white);
  border: none; border-radius: var(--huc-radius-sm);
  font-family: var(--huc-font-body);
  font-size: var(--huc-text-md);
  font-weight: 700;
  padding: .75rem 1.75rem;
  width: 100%;
  transition: background var(--huc-transition), box-shadow var(--huc-transition);
  white-space: nowrap;
}
.huc-search-bar__submit:hover {
  background: var(--huc-blue-dark);
  box-shadow: var(--huc-shadow-blue);
}
@media (min-width: 900px) { .huc-search-bar__submit { width: auto; align-self: end; height: 46px; } }

.huc-search-bar__trust {
  margin-top: var(--huc-space-3);
  font-size: var(--huc-text-xs);
  color: var(--huc-text-muted);
  display: flex; flex-wrap: wrap; gap: var(--huc-space-4);
}
.huc-search-bar__trust span { display: flex; align-items: center; gap: var(--huc-space-1); }
.huc-search-bar__trust .ok { color: var(--huc-success); font-weight: 700; }

/* ─── 11. TRUST STRIP ────────────────────────────────────────────────────── */
.huc-trust {
  background: var(--huc-blue);
  padding: var(--huc-space-6) var(--huc-space-4);
}
.huc-trust__inner {
  max-width: var(--huc-max-w); margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--huc-space-5);
}
@media (min-width: 600px)  { .huc-trust__inner { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 600px)  { .huc-trust { padding-inline: var(--huc-space-6); } }
@media (min-width: 1024px) { .huc-trust { padding-inline: var(--huc-space-8); } }

.huc-trust__item {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .3rem;
}
.huc-trust__icon { font-size: 1.5rem; }
.huc-trust__value { font-family: var(--huc-font-display); font-size: var(--huc-text-xl); font-weight: 700; color: var(--huc-white); }
.huc-trust__label { font-size: var(--huc-text-xs); color: rgba(255,255,255,.72); }

/* ─── 12. PRODUCT CARDS ──────────────────────────────────────────────────── */
.huc-products__grid {
  display: grid;
  gap: var(--huc-space-5);
}
@media (min-width: 640px)  { .huc-products__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px)  { .huc-products__grid { grid-template-columns: repeat(3, 1fr); } }

.huc-product-card {
  background: var(--huc-white);
  border: 1.5px solid var(--huc-border);
  border-radius: var(--huc-radius-lg);
  overflow: hidden;
  transition: border-color var(--huc-transition), box-shadow var(--huc-transition), transform var(--huc-transition);
}
.huc-product-card:hover {
  border-color: var(--huc-blue);
  box-shadow: var(--huc-shadow-lg);
  transform: translateY(-3px);
}
.huc-product-card--featured {
  border-color: var(--huc-blue);
  box-shadow: var(--huc-shadow-blue);
}

.huc-product-card__img {
  height: 180px;
  overflow: hidden;
  position: relative;
  background: var(--huc-grey-100);
}
.huc-product-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.huc-product-card:hover .huc-product-card__img img { transform: scale(1.04); }
.huc-product-card__badge-wrap { position: absolute; top: var(--huc-space-3); left: var(--huc-space-3); z-index: 1; }

.huc-product-card__body { padding: var(--huc-space-5); }
.huc-product-card__head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--huc-space-2); }
.huc-product-card__title { font-family: var(--huc-font-display); font-size: var(--huc-text-lg); font-weight: 700; color: var(--huc-black); }
.huc-product-card__desc  { font-size: var(--huc-text-sm); color: var(--huc-text-muted); margin-bottom: var(--huc-space-4); line-height: 1.6; }

.huc-product-card__features {
  list-style: none; margin: 0 0 var(--huc-space-5); padding: 0;
}
.huc-product-card__features li {
  display: flex; align-items: flex-start; gap: var(--huc-space-2);
  font-size: var(--huc-text-sm); color: var(--huc-grey-700);
  padding: .2rem 0;
}
.huc-product-card__features li::before {
  content: '✓';
  color: var(--huc-blue);
  font-weight: 700; font-size: .8rem;
  flex-shrink: 0; margin-top: 1px;
}

.huc-product-card__footer {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: var(--huc-space-4);
  border-top: 1px solid var(--huc-grey-100);
}
.huc-product-card__price-label { font-size: var(--huc-text-xs); color: var(--huc-text-muted); }
.huc-product-card__price {
  font-size: var(--huc-text-xl); font-weight: 700; color: var(--huc-black);
}
.huc-product-card__price small { font-size: var(--huc-text-xs); font-weight: 400; color: var(--huc-text-muted); }
.huc-product-card--featured .huc-product-card__footer .huc-btn { background: var(--huc-blue); color: var(--huc-white); }

/* ─── 13. HOW IT WORKS ───────────────────────────────────────────────────── */
.huc-steps {
  display: grid; gap: var(--huc-space-6);
  counter-reset: huc-steps;
  max-width: 680px;
}
@media (min-width: 768px) { .huc-steps { grid-template-columns: 1fr 1fr; } }

.huc-step {
  display: flex; gap: var(--huc-space-4); align-items: flex-start;
}
.huc-step__num {
  flex-shrink: 0;
  width: 40px; height: 40px;
  background: var(--huc-blue-light);
  color: var(--huc-blue);
  border-radius: var(--huc-radius-full);
  font-weight: 700; font-size: var(--huc-text-base);
  display: flex; align-items: center; justify-content: center;
}
.huc-step--active .huc-step__num { background: var(--huc-blue); color: var(--huc-white); }
.huc-step__title { font-size: var(--huc-text-md); font-weight: 700; color: var(--huc-black); margin-bottom: var(--huc-space-1); }
.huc-step__desc  { font-size: var(--huc-text-sm); color: var(--huc-text-muted); }

/* ─── 14. GALLERY ────────────────────────────────────────────────────────── */
.huc-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--huc-space-3);
}
@media (min-width: 640px) { .huc-gallery { grid-template-columns: repeat(3, 1fr); } }

.huc-gallery__item {
  border-radius: var(--huc-radius);
  overflow: hidden;
  background: var(--huc-grey-100);
  aspect-ratio: 4/3;
}
.huc-gallery__item--tall { grid-row: span 2; aspect-ratio: unset; }
.huc-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.huc-gallery__item:hover img { transform: scale(1.04); }

/* ─── 15. TESTIMONIALS ───────────────────────────────────────────────────── */
.huc-reviews {
  display: grid; gap: var(--huc-space-4);
}
@media (min-width: 640px)  { .huc-reviews { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .huc-reviews { grid-template-columns: repeat(4, 1fr); } }

.huc-review {
  background: var(--huc-white);
  border: 1.5px solid var(--huc-border);
  border-radius: var(--huc-radius);
  padding: var(--huc-space-5);
  transition: border-color var(--huc-transition), box-shadow var(--huc-transition);
}
.huc-review:hover { border-color: var(--huc-blue); box-shadow: var(--huc-shadow); }
.huc-review__stars { color: var(--huc-gold); font-size: .9rem; letter-spacing: .05em; margin-bottom: var(--huc-space-3); }
.huc-review__text  { font-size: var(--huc-text-sm); color: var(--huc-grey-700); font-style: italic; margin-bottom: var(--huc-space-4); line-height: 1.65; }
.huc-review__author { display: flex; align-items: center; gap: var(--huc-space-3); }
.huc-review__avatar {
  width: 36px; height: 36px; border-radius: var(--huc-radius-full);
  background: var(--huc-blue-light); color: var(--huc-blue);
  font-weight: 700; font-size: var(--huc-text-base);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.huc-review__name { font-size: var(--huc-text-sm); font-weight: 700; color: var(--huc-black); }
.huc-review__meta { font-size: var(--huc-text-xs); color: var(--huc-text-muted); }

/* ─── 16. FAQ ─────────────────────────────────────────────────────────────── */
.huc-faq { max-width: 760px; }
.huc-faq__item {
  border: 1.5px solid var(--huc-border);
  border-radius: var(--huc-radius);
  margin-bottom: var(--huc-space-3);
  overflow: hidden;
  transition: border-color var(--huc-transition);
}
.huc-faq__item:hover,
.huc-faq__item.is-open { border-color: var(--huc-blue); }

.huc-faq__question {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; background: none; border: none;
  text-align: left; padding: var(--huc-space-4) var(--huc-space-5);
  font-family: var(--huc-font-body);
  font-size: var(--huc-text-base); font-weight: 600; color: var(--huc-black);
  cursor: pointer;
  transition: background var(--huc-transition);
}
.huc-faq__question:hover { background: var(--huc-grey-100); }
.huc-faq__question:focus-visible { outline: 2px solid var(--huc-blue); outline-offset: -2px; }
.huc-faq__icon {
  width: 28px; height: 28px; flex-shrink: 0;
  border-radius: var(--huc-radius-full);
  background: var(--huc-grey-100); color: var(--huc-blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; font-weight: 400;
  transition: background var(--huc-transition), transform var(--huc-transition);
}
.huc-faq__item.is-open .huc-faq__icon { background: var(--huc-blue); color: var(--huc-white); transform: rotate(45deg); }
.huc-faq__answer {
  display: none;
  padding: 0 var(--huc-space-5) var(--huc-space-5);
  font-size: var(--huc-text-base); color: var(--huc-text-muted); line-height: 1.7;
}
.huc-faq__item.is-open .huc-faq__answer { display: block; }

/* ─── 17. FINAL CTA BANNER ───────────────────────────────────────────────── */
.huc-cta-banner {
  background: linear-gradient(135deg, var(--huc-blue) 0%, var(--huc-blue-dark) 100%);
  padding: var(--huc-space-16) var(--huc-space-4);
  text-align: center;
}
.huc-cta-banner__inner { max-width: 600px; margin-inline: auto; }
.huc-cta-banner h2 { font-family: var(--huc-font-display); font-size: var(--huc-text-2xl); color: var(--huc-white); margin-bottom: var(--huc-space-3); }
.huc-cta-banner h2 em { color: var(--huc-gold-light); font-style: normal; }
.huc-cta-banner p { color: rgba(255,255,255,.75); margin-bottom: var(--huc-space-8); }
.huc-cta-banner__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--huc-space-3); }
@media (min-width: 768px) { .huc-cta-banner h2 { font-size: var(--huc-text-3xl); } }

/* ─── 18. FOOTER ─────────────────────────────────────────────────────────── */
.huc-footer {
  background: var(--huc-blue);
  color: rgba(255,255,255,.78);
  font-size: var(--huc-text-sm);
}
.huc-footer__top { padding: var(--huc-space-12) var(--huc-space-4) var(--huc-space-10); }
.huc-footer__inner {
  max-width: var(--huc-max-w); margin-inline: auto;
  display: grid; gap: var(--huc-space-8);
  grid-template-columns: 1fr;
}
@media (min-width: 600px)  { .huc-footer__top { padding-inline: var(--huc-space-6); } }
@media (min-width: 640px)  { .huc-footer__inner { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px)  { .huc-footer__inner { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }
@media (min-width: 1024px) { .huc-footer__top { padding-inline: var(--huc-space-8); } }

.huc-footer__logo {
  display: flex; align-items: center; gap: var(--huc-space-2);
  text-decoration: none; margin-bottom: var(--huc-space-3);
}
.huc-footer__logo-mark { font-size: 1.4rem; }
.huc-footer__logo strong { font-family: var(--huc-font-display); font-size: var(--huc-text-lg); color: var(--huc-gold-light); }
.huc-footer__logo img { height: 32px; filter: brightness(0) invert(1); }
.huc-footer__tagline { color: rgba(255,255,255,.55); margin-bottom: var(--huc-space-5); line-height: 1.6; }
.huc-footer__social { display: flex; gap: var(--huc-space-3); }
.huc-footer__social a {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--huc-radius-sm);
  background: rgba(255,255,255,.07); color: rgba(255,255,255,.7);
  transition: background var(--huc-transition), color var(--huc-transition);
  text-decoration: none;
}
.huc-footer__social a:hover { background: var(--huc-blue-bright); color: var(--huc-white); }

.huc-footer-widget__title {
  font-family: var(--huc-font-body);
  font-size: var(--huc-text-sm); font-weight: 700;
  color: var(--huc-white); letter-spacing: .05em; text-transform: uppercase;
  margin-bottom: var(--huc-space-4);
}
.huc-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--huc-space-2); }
.huc-footer__links a { color: rgba(255,255,255,.65); text-decoration: none; transition: color var(--huc-transition); }
.huc-footer__links a:hover { color: var(--huc-gold-light); text-decoration: none; }
.huc-footer__contact { list-style: none; margin: 0 0 var(--huc-space-5); padding: 0; display: flex; flex-direction: column; gap: var(--huc-space-3); }
.huc-footer__contact li { display: flex; align-items: center; gap: var(--huc-space-2); color: rgba(255,255,255,.65); }
.huc-footer__contact svg { flex-shrink: 0; }
.huc-footer__contact a { color: rgba(255,255,255,.65); text-decoration: none; }
.huc-footer__contact a:hover { color: var(--huc-gold-light); text-decoration: none; }
.huc-footer__cta { margin-top: var(--huc-space-4); }

.huc-footer__bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: var(--huc-space-5) var(--huc-space-4);
}
.huc-footer__bottom .huc-footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--huc-space-3); }
.huc-footer__copy { color: rgba(255,255,255,.35); font-size: var(--huc-text-xs); margin: 0; }
.huc-footer__legal { display: flex; flex-wrap: wrap; gap: var(--huc-space-4); }
.huc-footer__legal a { color: rgba(255,255,255,.4); font-size: var(--huc-text-xs); text-decoration: none; transition: color var(--huc-transition); }
.huc-footer__legal a:hover { color: rgba(255,255,255,.8); }

/* ─── 18b. LOGO SIZE & MISC FIXES ───────────────────────────────────────── */

/* Fallback SVG icon in header */
.huc-header__logo-icon { flex-shrink: 0; color: var(--huc-white); }

/* Kadence wraps custom logo in .custom-logo-link > figure > img
   We target every possible combination with !important to win specificity wars */
.huc-header .custom-logo-link,
.huc-header .custom-logo-link figure,
.huc-header__logo-img-wrap { display: flex !important; align-items: center !important; line-height: 0; }

.huc-header .custom-logo-link img,
.huc-header .custom-logo,
.huc-header__logo-img-wrap img,
.huc-header__logo-img-wrap .custom-logo {
  display: block !important;
  height: 28px !important;
  max-height: 28px !important;
  width: auto !important;
  max-width: 105px !important;
  object-fit: contain !important;
}

/* SVG logos need explicit dimensions too */
.huc-header .custom-logo-link svg,
.huc-header__logo svg {
  height: 28px !important;
  max-height: 28px !important;
  width: auto !important;
  max-width: 105px !important;
}

/* Footer logo – hardcoded external URL */
.huc-footer__logo-img {
  height: 52px;
  width: auto;
  max-width: 210px;
  display: block;
  /* Logo appears dark on light bg: invert for dark footer */
  filter: brightness(0) invert(1);
}

/* Topbar SVG icon vertical align */
.huc-topbar__icon {
  display: inline-block;
  vertical-align: middle;
  margin-right: .3rem;
  margin-top: -2px;
}

/* Mobile nav close button */
.huc-mobile-nav__close {
  display: flex; align-items: center; justify-content: center;
  position: absolute; top: var(--huc-space-4); right: var(--huc-space-4);
  width: 36px; height: 36px;
  background: var(--huc-grey-100); border: none; border-radius: var(--huc-radius-sm);
  color: var(--huc-grey-700);
  transition: background var(--huc-transition);
}
.huc-mobile-nav__close:hover { background: var(--huc-border); }
.huc-mobile-nav__inner { position: relative; padding-top: var(--huc-space-4); }

/* ─── 19. KADENCE OVERRIDES ──────────────────────────────────────────────── */

/* Remove default Kadence header when our custom one is active */
.huc-theme .site-header-wrap:not(.huc-header),
.huc-theme .site-top-header-wrap { display: none !important; }

/* Force blue background on ANY Kadence header wrapper that might render */
.huc-theme #masthead,
.huc-theme .site-header,
.huc-theme .site-header-wrap,
.huc-theme header.huc-header {
  background-color: var(--huc-blue) !important;
  background: var(--huc-blue) !important;
  border-bottom: none !important;
}

/* Kill any Kadence logo sizing that overrides ours */
.huc-theme .huc-header .site-logo img,
.huc-theme .huc-header .site-branding img,
.huc-theme .huc-header .kadence-logo img,
.huc-theme .huc-header [class*="logo"] img,
.huc-theme .huc-header .custom-logo-link img {
  height: 28px !important;
  max-height: 28px !important;
  width: auto !important;
  max-width: 105px !important;
}

/* Kadence sets width:100% on images – override for logos */
.huc-theme .huc-header img {
  width: auto;
}

/* Kadence page title area */
.huc-homepage .entry-hero { display: none; }

/* Kadence buttons global align */
.huc-theme .wp-block-button__link,
.huc-theme .kb-btn {
  border-radius: var(--huc-radius) !important;
  font-family: var(--huc-font-body) !important;
  font-weight: 600 !important;
}

/* Kadence WooCommerce product cards reset */
.huc-theme .products .product .woocommerce-loop-product__title {
  font-family: var(--huc-font-display) !important;
  font-weight: 700 !important;
}

/* ─── 20. WP BLOCK EDITOR / GUTENBERG ────────────────────────────────────── */
.wp-block-cover__inner-container h1,
.wp-block-cover__inner-container h2 { color: var(--huc-white); }

/* ─── 21. ACCESSIBILITY & MOTION ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

:focus-visible {
  outline: 3px solid var(--huc-blue);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ─── 23. HERO / POSITIONIERUNG ──────────────────────────────────────────── */
.huc-hero {
  background: linear-gradient(135deg, var(--huc-blue) 0%, var(--huc-blue-bright) 100%);
  color: var(--huc-white);
  padding: var(--huc-space-16) var(--huc-space-4);
  text-align: center;
}
.huc-hero__inner { max-width: 760px; margin-inline: auto; }
.huc-hero__eyebrow {
  display: inline-block;
  font-size: var(--huc-text-xs); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--huc-gold-light);
  margin-bottom: var(--huc-space-3);
}
.huc-hero h1 {
  color: var(--huc-white);
  font-size: var(--huc-text-3xl);
  margin-bottom: var(--huc-space-4);
}
.huc-hero p {
  color: rgba(255,255,255,.85);
  font-size: var(--huc-text-lg);
  max-width: 620px;
  margin-inline: auto;
  margin-bottom: var(--huc-space-8);
}
.huc-hero__options {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--huc-space-3);
  margin-bottom: var(--huc-space-8);
}
.huc-hero__option {
  display: flex; align-items: center; gap: var(--huc-space-2);
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: var(--huc-radius-full);
  padding: .5rem 1.1rem;
  font-size: var(--huc-text-sm); font-weight: 600;
}
.huc-hero__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--huc-space-3); }
@media (min-width: 768px) { .huc-hero h1 { font-size: var(--huc-text-4xl); } }

/* ─── 24. SUBMENU "UMRAH 2026" (Monate) ──────────────────────────────────── */
.huc-nav__list li { position: relative; }
.huc-nav__list ul {
  list-style: none; margin: 0; padding: var(--huc-space-2);
  position: absolute; top: 100%; left: 0;
  min-width: 200px;
  background: var(--huc-white);
  border-radius: var(--huc-radius);
  box-shadow: var(--huc-shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--huc-transition), transform var(--huc-transition), visibility var(--huc-transition);
  z-index: 50;
}
.huc-nav__list li:hover > ul,
.huc-nav__list li:focus-within > ul {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.huc-nav__list ul a {
  color: var(--huc-text); padding: .55rem .8rem; border-radius: var(--huc-radius-sm);
}
.huc-nav__list ul a:hover { background: var(--huc-blue-light); color: var(--huc-blue); }
.huc-nav__list > li > a.menu-item-has-children-icon::after,
.huc-nav__list li.menu-item-has-children > a::after {
  content: '▾'; font-size: .65em; margin-left: .35em; opacity: .8;
}

.huc-mobile-nav__list .sub-menu {
  list-style: none; margin: 0 0 var(--huc-space-3); padding-left: var(--huc-space-4);
}
.huc-mobile-nav__list .sub-menu a { font-size: var(--huc-text-sm); }

/* ─── 25. PINTEREST ICON (Footer) ────────────────────────────────────────── */
.huc-footer__social a svg { display: block; }

/* ─── 26. SUPPORT-MITARBEITER KARTE ──────────────────────────────────────── */
.huc-support-card {
  display: flex; align-items: center; gap: var(--huc-space-4);
  background: var(--huc-white);
  border: 1.5px solid var(--huc-border);
  border-radius: var(--huc-radius-lg);
  padding: var(--huc-space-5);
  max-width: 420px;
}
.huc-support-card__img {
  width: 64px; height: 64px; border-radius: var(--huc-radius-full);
  object-fit: cover; flex-shrink: 0; border: 2px solid var(--huc-gold);
}
.huc-support-card__name { font-weight: 700; color: var(--huc-black); margin-bottom: 2px; }
.huc-support-card__role { font-size: var(--huc-text-xs); color: var(--huc-text-muted); margin-bottom: var(--huc-space-2); }
.huc-support-card__actions { display: flex; gap: var(--huc-space-2); }

/* ─── 27. PRINT (Patch) ──────────────────────────────────────────────────── */

@media print {
  .huc-topbar, .huc-header, .huc-hero, .huc-footer { display: none; }
  body { color: #000; background: #fff; }
}

/* ─── WooCommerce Produktkarten – Booking.com Style ─────────────────────── */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: var(--huc-space-5) !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
@media (min-width: 640px) {
  .woocommerce ul.products { grid-template-columns: 1fr 1fr !important; }
}
@media (min-width: 960px) {
  .woocommerce ul.products { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (min-width: 1280px) {
  .woocommerce ul.products { grid-template-columns: repeat(4, 1fr) !important; }
}

.woocommerce ul.products li.product {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--huc-white);
  border: 1.5px solid var(--huc-border);
  border-radius: var(--huc-radius-lg);
  overflow: hidden;
  transition: border-color var(--huc-transition), box-shadow var(--huc-transition), transform var(--huc-transition);
  float: none !important;
  position: relative;
}
.woocommerce ul.products li.product:hover {
  border-color: var(--huc-blue);
  box-shadow: var(--huc-shadow-lg);
  transform: translateY(-3px);
}

/* Bild */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link img {
  width: 100% !important;
  height: 200px !important;
  max-width: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
  border-radius: 0 !important;
  transition: transform .4s ease;
}
.woocommerce ul.products li.product:hover img {
  transform: scale(1.04);
}

/* "Angebot!"-Badge wie bei Booking oben rechts/links */
.woocommerce ul.products li.product .onsale {
  position: absolute !important;
  top: var(--huc-space-3) !important;
  left: var(--huc-space-3) !important;
  right: auto !important;
  min-height: auto !important;
  margin: 0 !important;
  background: var(--huc-blue) !important;
  color: var(--huc-white) !important;
  font-family: var(--huc-font-body) !important;
  font-size: var(--huc-text-xs) !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .3rem .7rem !important;
  border-radius: var(--huc-radius-full) !important;
  line-height: 1 !important;
  z-index: 2;
}

/* Inhalt */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--huc-font-display) !important;
  font-size: var(--huc-text-lg) !important;
  font-weight: 700 !important;
  color: var(--huc-black) !important;
  margin: 0 !important;
  padding: var(--huc-space-4) var(--huc-space-4) 0 !important;
  line-height: 1.3;
}

/* Sterne / Rating ausblenden falls vorhanden und nicht gewünscht */
.woocommerce ul.products li.product .star-rating {
  margin: var(--huc-space-2) var(--huc-space-4) 0 !important;
}

/* Preis */
.woocommerce ul.products li.product .price {
  display: block !important;
  font-family: var(--huc-font-body) !important;
  font-size: var(--huc-text-md) !important;
  color: var(--huc-text) !important;
  padding: var(--huc-space-2) var(--huc-space-4) var(--huc-space-5) !important;
  margin: 0 !important;
}
.woocommerce ul.products li.product .price ins {
  text-decoration: none;
  font-weight: 700;
  color: var(--huc-black);
}
.woocommerce ul.products li.product .price del {
  color: var(--huc-text-muted);
  font-size: var(--huc-text-sm);
  margin-right: var(--huc-space-2);
  opacity: .7;
}
.woocommerce ul.products li.product .huc-ab-prefix {
  font-size: var(--huc-text-xs);
  color: var(--huc-text-muted);
  font-weight: 400;
  margin-right: .25rem;
  text-transform: lowercase;
}

/* ═══════════════════════════════════════════════════════════════
   ERSETZT die alte Regel:
   .woocommerce ul.products li.product .button,
   .woocommerce ul.products li.product .add_to_cart_button {
     display: none !important;
   }

   Diesen Block stattdessen im Abschnitt "WooCommerce Produktkarten
   – Booking.com Style" einsetzen (an derselben Stelle).
═══════════════════════════════════════════════════════════════ */

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button {
  display: block !important;
  width: calc(100% - 2 * var(--huc-space-4)) !important;
  margin: 0 var(--huc-space-4) var(--huc-space-4) !important;
  background: var(--huc-blue) !important;
  color: var(--huc-white) !important;
  border: none !important;
  border-radius: var(--huc-radius-sm) !important;
  font-family: var(--huc-font-body) !important;
  font-size: var(--huc-text-sm) !important;
  font-weight: 700 !important;
  text-align: center !important;
  padding: .7rem 1rem !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
  transition: background var(--huc-transition), transform var(--huc-transition);
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover {
  background: var(--huc-blue-bright) !important;
  transform: translateY(-1px);
}

/* Preis-Block bekommt dadurch etwas weniger Abstand nach unten,
   da direkt darunter jetzt der Button folgt */
.woocommerce ul.products li.product .price {
  padding-bottom: var(--huc-space-3) !important;
}

/* Sortier-/Ergebnis-Leiste etwas an Design anpassen */
.woocommerce-result-count,
.woocommerce-ordering select {
  font-family: var(--huc-font-body);
  font-size: var(--huc-text-sm);
  color: var(--huc-text-muted);
}
.woocommerce-ordering select {
  border: 1.5px solid var(--huc-border);
  border-radius: var(--huc-radius-sm);
  padding: .5rem .9rem;
  color: var(--huc-text);
}

/* ─── 28. WOOCOMMERCE SINGLE-PRODUCT "JETZT BUCHEN"-BUTTON ──────────────── */
.woocommerce div.product form.cart .single_add_to_cart_button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: var(--huc-space-2);
  background: var(--huc-blue) !important;
  color: var(--huc-white) !important;
  border: 2px solid var(--huc-blue) !important;
  border-radius: var(--huc-radius) !important;
  font-family: var(--huc-font-body) !important;
  font-size: var(--huc-text-md) !important;
  font-weight: 700 !important;
  letter-spacing: 0;
  padding: .95rem 2rem !important;
  width: 100%;
  text-transform: none !important;
  box-shadow: none;
  transition: background var(--huc-transition), box-shadow var(--huc-transition), transform var(--huc-transition);
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover {
  background: var(--huc-blue-bright) !important;
  border-color: var(--huc-blue-bright) !important;
  box-shadow: var(--huc-shadow-blue);
  transform: translateY(-1px);
}
.woocommerce div.product form.cart .single_add_to_cart_button:active {
  transform: translateY(0);
}
.woocommerce div.product form.cart .single_add_to_cart_button:focus-visible {
  outline: 3px solid var(--huc-blue);
  outline-offset: 3px;
}

/* Lade-Spinner-Zustand von WooCommerce (Klasse "loading") dezent halten */
.woocommerce div.product form.cart .single_add_to_cart_button.loading {
  opacity: .75;
  pointer-events: none;
}

/* Auf größeren Screens Button nicht auf volle Breite ziehen, sondern an Variation-Form ausrichten */
@media (min-width: 640px) {
  .woocommerce div.product form.cart .single_add_to_cart_button {
    width: auto;
    min-width: 260px;
  }
}

/* Mengen-Feld (falls sichtbar) optisch angleichen */
.woocommerce div.product form.cart .quantity .qty {
  border: 1.5px solid var(--huc-border);
  border-radius: var(--huc-radius-sm);
  padding: .7rem .9rem;
  font-family: var(--huc-font-body);
  font-size: var(--huc-text-base);
  height: auto;
}

/* ═══════════════════════════════════════════════════════════════
   NOTFALL-OVERRIDE: Logo-Größe erzwingen
   Falls der Kadence Header Builder Logo-Breite-Regler nicht
   gefunden werden kann oder nicht ausreicht. Ganz ans ENDE von
   global.css anhängen (muss nach Kadences eigener CSS-Ausgabe
   geladen werden, um zu gewinnen).
═══════════════════════════════════════════════════════════════ */

html body .site-header .site-logo img,
html body .site-header .custom-logo-link img,
html body header .custom-logo-link img,
html body .huc-header img,
html body .huc-header svg,
html body .site-logo-img,
html body img.header-image,
html body img.custom-logo {
  height: 28px !important;
  max-height: 28px !important;
  width: auto !important;
  max-width: 105px !important;
  min-height: 0 !important;
  min-width: 0 !important;
}

/* Falls Kadence dem Logo-Link selbst eine feste Höhe gibt */
html body .site-header .site-logo,
html body .site-header .custom-logo-link {
  height: 28px !important;
  max-height: 28px !important;
  line-height: 28px !important;
}