/* ==========================================================================
   Handtuch-Profis – Stylesheet
   Abgeleitet aus dem Hero-Bereich (Mint-Grün, Schwarz, Off-White, Grau)
   und um passende Zusatzfarben erweitert.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design Tokens
   -------------------------------------------------------------------------- */
:root {
  /* --- Kernfarben (aus dem Screenshot) --- */
  --hp-black:        #0A0A0A;   /* Buttons, Headlines */
  --hp-white:        #FFFFFF;   /* Header-Karte, Flächen */
  --hp-bg:           #F3F4EE;   /* Seitenhintergrund, wie Huthelden-Redesign (Michi 12.10.) */
  --hp-mint:         #C6EBD1;   /* Top-Bar, Sekundär-Button, Highlight – Mint+ (Michi 13.10., kräftiger auf Beige) */
  --hp-mint-light:   #E5F6EA;   /* Hover / sehr helle Flächen */
  --hp-mint-strong:  #8DE2A6;   /* Hover-Streifen der Kacheln: kräftiges Mint im Mint+-Farbton (Michi 13.10.) */

  /* --- Text / Grau-Skala --- */
  --hp-text:         #0A0A0A;
  --hp-text-muted:   #4B5058;   /* Fließtext unter Headline */
  --hp-text-soft:    #6B7079;   /* Trust-Zeile, Captions */
  --hp-border:       #E2E3DA;
  --hp-gray-100:     #F3F4EE;
  --hp-gray-200:     #E2E3DA;
  --hp-gray-300:     #CBCCC1;
  --hp-gray-400:     #9C9E94;
  --hp-gray-600:     #4B5058;
  --hp-gray-800:     #1F2226;

  /* --- Erweiterte Grün-Familie (passend zum Mint) --- */
  --hp-green-100:    #C6EBD1;   /* = Mint */
  --hp-green-200:    #A3DCB3;
  --hp-green-300:    #94D1A6;
  --hp-green-500:    #4BA064;
  --hp-green-700:    #2C6D40;   /* Links, Icons, Akzent auf hell */
  --hp-green-900:    #173A22;   /* dunkle Sektionen, Footer */

  /* --- Zusatz-Akzente (harmonieren mit Mint + Schwarz) --- */
  --hp-sand:         #EFE3D0;   /* warmes Beige – Kontrast zu Mint */
  --hp-sand-dark:    #C9A978;
  --hp-sky:          #D6E6EE;   /* zartes Blau – Kontrast zu Mint */
  --hp-sky-dark:     #4F7C93;
  --hp-coral:        #E8735A;   /* Aktion, Angebote, Badges */
  --hp-coral-light:  #FBE3DC;
  --hp-gold:         #F2B84B;   /* Sterne / Google-Bewertung */

  /* --- Status --- */
  --hp-success:      #2C6B4B;
  --hp-success-bg:   #DDEEE2;
  --hp-warning:      #B7791F;
  --hp-warning-bg:   #FBEFD2;
  --hp-error:        #C4432B;
  --hp-error-bg:     #FBE3DC;
  --hp-info:         #4F7C93;
  --hp-info-bg:      #D6E6EE;

  /* --- Typografie --- */
  --hp-font:         "Plus Jakarta Sans", "Inter", system-ui, -apple-system,
                     "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --hp-fs-eyebrow:   0.8125rem;                       /* 13px */
  --hp-fs-body:      1rem;
  --hp-fs-lead:      clamp(1.05rem, 1.4vw, 1.3rem);
  --hp-fs-h3:        clamp(1.25rem, 2vw, 1.6rem);
  --hp-fs-h2:        clamp(1.8rem, 3.5vw, 2.75rem);
  --hp-fs-h1:        clamp(2.6rem, 6.5vw, 5.25rem);

  /* --- Abstände / Radien / Schatten --- */
  --hp-space-1: 0.25rem;
  --hp-space-2: 0.5rem;
  --hp-space-3: 1rem;
  --hp-space-4: 1.5rem;
  --hp-space-5: 2.5rem;
  --hp-space-6: 4rem;

  --hp-radius-sm:    10px;
  --hp-radius-md:    20px;
  --hp-radius-lg:    32px;    /* Bildkarte / Header-Karte */
  --hp-radius-pill:  999px;   /* Buttons */

  --hp-shadow-sm:    0 1px 2px rgba(10, 10, 10, .06);
  --hp-shadow-md:    0 6px 20px rgba(10, 10, 10, .08);
  --hp-shadow-lg:    0 16px 40px rgba(10, 10, 10, .12);

  --hp-container:    1240px;
  --hp-transition:   .2s ease;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--hp-font);
  font-size: var(--hp-fs-body);
  line-height: 1.6;
  color: var(--hp-text);
  background: var(--hp-bg);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; } /* display:block weggelassen: würde Inline-Bilder in Flatsome/WooCommerce (Logo, Icons, Zahlungsarten) umbrechen */

a {
  color: var(--hp-black);   /* Michi 01.10.: kein Grün-Akzent, Orange ist die Signalfarbe */
  text-decoration: none;
  transition: color var(--hp-transition);
}
a:hover { color: var(--hp-coral); }

h1, h2, h3, h4 {
  margin: 0 0 var(--hp-space-3);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;      /* enge Laufweite wie im Hero */
  color: var(--hp-black);
}
h1 { font-size: var(--hp-fs-h1); }
h2 { font-size: var(--hp-fs-h2); line-height: 1.1; }
h3 { font-size: var(--hp-fs-h3); line-height: 1.2; letter-spacing: -0.02em; }

p { margin: 0 0 var(--hp-space-3); color: var(--hp-text-muted); }

.hp-container {
  width: min(100% - 2rem, var(--hp-container));
  margin-inline: auto;
}

/* Eyebrow: "HANDTÜCHER MIT LOGO · DIREKT VON DEN PROFIS · AB 25 STÜCK" */
.hp-eyebrow {
  font-size: var(--hp-fs-eyebrow);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hp-black);
  margin-bottom: var(--hp-space-3);
}

.hp-lead {
  font-size: var(--hp-fs-lead);
  font-weight: 300;
  color: var(--hp-text-muted);
  max-width: 34em;
}

/* Marker-Highlight hinter einem Wort ("Logo") */
.hp-highlight {
  background: linear-gradient(transparent 62%, var(--hp-coral) 62%, var(--hp-coral) 96%, transparent 96%); /* Michi 01.10.: Form wie gehabt, Farbe Orange statt Mint */
  padding: 0 .08em;
}

/* --------------------------------------------------------------------------
   3. Top-Bar (Vorteile-Leiste)
   -------------------------------------------------------------------------- */
.hp-topbar {
  background: var(--hp-mint);
  color: var(--hp-black);
  font-weight: 600;
  font-size: .9rem;
}
.hp-topbar__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--hp-space-4);
  padding: .65rem 1rem;
  flex-wrap: wrap;
}
.hp-topbar__item { display: inline-flex; align-items: center; gap: .6rem; }

/* --------------------------------------------------------------------------
   4. Header / Navigation
   -------------------------------------------------------------------------- */
.hp-header {
  background: var(--hp-white);
  border-radius: 0 0 var(--hp-radius-md) var(--hp-radius-md);
  box-shadow: var(--hp-shadow-sm);
}
.hp-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hp-space-4);
  padding: .75rem 2rem;
}
.hp-nav { display: flex; gap: var(--hp-space-5); align-items: center; }
.hp-nav a {
  color: var(--hp-black);
  font-weight: 500;
  font-size: 1.15rem;
}
.hp-nav a:hover { color: var(--hp-green-700); }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.hp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1rem 1.9rem;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  border: 2px solid transparent;
  border-radius: var(--hp-radius-pill);
  cursor: pointer;
  transition: transform var(--hp-transition), background var(--hp-transition),
              color var(--hp-transition), box-shadow var(--hp-transition);
}
.hp-btn:hover { transform: translateY(-1px); box-shadow: var(--hp-shadow-md); }
.hp-btn:active { transform: translateY(0); }
.hp-btn:focus-visible { outline: 3px solid var(--hp-green-500); outline-offset: 3px; }

/* Primär: schwarz */
.hp-btn--primary { background: var(--hp-black); color: var(--hp-white); }
.hp-btn--primary:hover {}

/* Sekundär: mint */
.hp-btn--secondary { background: var(--hp-mint); color: var(--hp-black); }
.hp-btn--secondary:hover {}

/* Outline: weiß mit schwarzem Rand (Telefon-Button) */
.hp-btn--outline { background: var(--hp-white); color: var(--hp-black); border-color: var(--hp-black); }
.hp-btn--outline:hover {}

/* Akzent: Coral für Angebote / besondere Aktionen */
/* Schwarze Schrift: Weiß auf Coral hat nur 3,0:1 Kontrast (zu schwach) */
.hp-btn--accent { background: color-mix(in srgb, var(--hp-coral) 92%, var(--hp-black)); color: var(--hp-white); font-size: 1.17rem; } /* Michi 02.10.: weiße Schrift, groß+fett für WCAG-Großschrift */
.hp-btn--accent:hover {}

/* Dunkelgrün für Kontrastflächen */
.hp-btn--forest { background: var(--hp-green-700); color: var(--hp-white); }
.hp-btn--forest:hover {}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hp-hero { padding: var(--hp-space-6) 0; }
.hp-hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--hp-space-5);
  align-items: center;
}
.hp-hero__cta { display: flex; flex-wrap: wrap; gap: var(--hp-space-3); margin: var(--hp-space-4) 0; }
.hp-hero__image {
  border-radius: var(--hp-radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3.1;
  box-shadow: var(--hp-shadow-md);
}
.hp-hero__image img { width: 100%; height: 100%; object-fit: cover; }

/* Trust-Zeile: ★ Top bei Google bewertet · ✔ OEKO-TEX® · ... */
.hp-trust {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.6rem;
  font-size: .95rem;
  color: var(--hp-text-soft);
  list-style: none;
  padding: 0;
  margin: var(--hp-space-3) 0 0;
}
.hp-trust li::before { content: "✔"; margin-right: .35rem; color: var(--hp-green-700); }
.hp-trust li.hp-trust--star::before { content: "★"; color: var(--hp-gold); }

/* --------------------------------------------------------------------------
   7. Sektionen (Hintergrund-Varianten)
   -------------------------------------------------------------------------- */
.hp-section          { padding: var(--hp-space-6) 0; }
.hp-section--white   { background: var(--hp-white); }
.hp-section--mint    { background: var(--hp-mint); }
.hp-section--sand    { background: var(--hp-sand); }
.hp-section--sky     { background: var(--hp-sky); }
.hp-section--dark    { background: var(--hp-green-900); color: var(--hp-white); }
.hp-section--dark h1,
.hp-section--dark h2,
.hp-section--dark h3 { color: var(--hp-white); }
.hp-section--dark p  { color: var(--hp-green-200); }

/* --------------------------------------------------------------------------
   8. Karten & Badges
   -------------------------------------------------------------------------- */
.hp-card {
  background: var(--hp-white);
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-radius-md);
  padding: var(--hp-space-4);
  box-shadow: var(--hp-shadow-sm);
  transition: box-shadow var(--hp-transition), transform var(--hp-transition);
}
.hp-card:hover { box-shadow: var(--hp-shadow-md); transform: translateY(-2px); }
.hp-card--mint { background: var(--hp-mint); border-color: transparent; }
.hp-card--sand { background: var(--hp-sand); border-color: transparent; }
.hp-card--sky  { background: var(--hp-sky);  border-color: transparent; }

.hp-badge {
  display: inline-block;
  padding: .3rem .8rem;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  border-radius: var(--hp-radius-pill);
  background: var(--hp-mint);
  color: var(--hp-green-900);
}
.hp-badge--coral { background: var(--hp-coral-light); color: #A63A24; }
.hp-badge--sand  { background: var(--hp-sand);        color: #7A5B2C; }
.hp-badge--sky   { background: var(--hp-sky);         color: #2F5A70; }
.hp-badge--dark  { background: var(--hp-black);       color: var(--hp-white); }

/* --------------------------------------------------------------------------
   9. Formulare (Angebotsanfrage)
   -------------------------------------------------------------------------- */
.hp-input,
.hp-select,
.hp-textarea {
  width: 100%;
  padding: .9rem 1.1rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--hp-black);
  background: var(--hp-white);
  border: 1.5px solid var(--hp-gray-300);
  border-radius: var(--hp-radius-sm);
  transition: border-color var(--hp-transition), box-shadow var(--hp-transition);
}
.hp-input:focus,
.hp-select:focus,
.hp-textarea:focus {
  outline: none;
  border-color: var(--hp-green-500);
  box-shadow: 0 0 0 4px var(--hp-mint);
}
.hp-label { display: block; margin-bottom: .35rem; font-weight: 600; font-size: .9rem; }

/* Hinweisboxen */
.hp-alert { padding: 1rem 1.25rem; border-radius: var(--hp-radius-sm); font-weight: 500; }
.hp-alert--success { background: var(--hp-success-bg); color: var(--hp-success); }
.hp-alert--warning { background: var(--hp-warning-bg); color: var(--hp-warning); }
.hp-alert--error   { background: var(--hp-error-bg);   color: var(--hp-error); }
.hp-alert--info    { background: var(--hp-info-bg);    color: var(--hp-info); }

/* --------------------------------------------------------------------------
   10. Utilities
   -------------------------------------------------------------------------- */
.hp-text-green  { color: var(--hp-green-700); }
.hp-text-coral  { color: var(--hp-coral); }
.hp-text-muted  { color: var(--hp-text-muted); }
.hp-bg-mint     { background: var(--hp-mint); }
.hp-bg-sand     { background: var(--hp-sand); }
.hp-bg-sky      { background: var(--hp-sky); }
.hp-bg-white    { background: var(--hp-white); }
.hp-center      { text-align: center; }

/* --------------------------------------------------------------------------
   11. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .hp-hero__grid { grid-template-columns: 1fr; }
  .hp-header__inner { padding: .75rem 1rem; }
  .hp-nav { display: none; }            /* Mobile-Menü separat lösen */
  .hp-topbar__inner { justify-content: center; font-size: .8rem; }
}

/* Go-Live 12.10.: Hauptaktion Anfrage + Kasse in Angebots-Orange */
.wewa-anf__senden,.wc-proceed-to-checkout .checkout-button{background:var(--hp-coral-btn,#D66B54)!important;color:#fff!important;opacity:1!important;font-weight:700}

/* Grautöne seit 13.10. warm, passend zum Beige #F3F4EE (vorher kühl #E3E5E9/#C9CDD3/#9AA0A9) */
/* Einheitliche Button-Hover (Michi 14.10.): alle Buttons heben sich leicht mit Schatten, die Farbe bleibt */
.hp-btn,.hp-lp .btn,.button,.wewa-cfg .wewa-cfg__cta,.wewa-anf__senden,.hf-btn,.hp-xmas .hp-xmas__btn{transition:transform .2s ease,box-shadow .2s ease!important}
.hp-btn:hover,.hp-lp .btn:hover,.button:hover,.wewa-cfg .wewa-cfg__cta:hover,.wewa-anf__senden:hover,.hf-btn:hover,.hp-xmas .hp-xmas__btn:hover{transform:translateY(-2px)!important;box-shadow:0 8px 18px rgba(10,10,10,.18)!important;opacity:1!important;filter:none!important}
/* Flatsome füllt Outline-Buttons beim Hover schwarz, das soll nicht passieren */
.button.is-outline:hover{background-color:transparent!important;color:var(--hp-black)!important;border-color:var(--hp-black)!important}

/* Grünskala seit 13.10. im Mint+-Farbton (138°) statt altem Waldgrün */