/* =====================================================================
   Heide Kälte- & Klimatechnik – Design-Tokens & Basis-Stile
   ---------------------------------------------------------------------
   Diese Werte wurden 1:1 aus der Lovable-Vorlage
   https://heide-kaelteklima.lorz.dev/ ausgelesen.
   ===================================================================== */

:root {
  --background: 240 20% 98%;
  --foreground: 222 30% 12%;

  --card: 0 0% 100%;
  --card-foreground: 222 30% 12%;
  --popover: 0 0% 100%;
  --popover-foreground: 222 30% 12%;

  --primary: 222 56% 43%;
  --primary-foreground: 0 0% 100%;

  --secondary: 358 86% 53%;
  --secondary-foreground: 0 0% 100%;

  --muted: 222 15% 93%;
  --muted-foreground: 222 15% 40%;

  --accent: 284 30% 94%;
  --accent-foreground: 284 62% 34%;

  --destructive: 358 86% 53%;
  --destructive-foreground: 0 0% 100%;

  --border: 222 15% 88%;
  --input: 222 15% 88%;
  --ring: 222 56% 43%;

  --radius: 0.75rem;

  /* Verläufe & Schatten aus der Vorlage */
  --hero-gradient: linear-gradient(135deg, hsl(222 56% 43% / .95) 0%, hsl(284 62% 34% / .9) 50%, hsl(358 86% 53% / .85) 100%);
  --hero-gradient-overlay: linear-gradient(180deg, hsl(222 56% 43% / .95) 0%, hsl(284 62% 34% / .87) 50%, hsl(358 86% 53% / .9) 100%);
  --section-gradient: linear-gradient(180deg, hsl(240 20% 98%) 0%, hsl(222 25% 95%) 100%);
  --trust-gradient: linear-gradient(135deg, hsl(222 56% 43%) 0%, hsl(284 62% 34%) 50%, hsl(358 86% 53%) 100%);
  --card-shadow: 0 4px 20px -4px hsl(222 56% 30% / .08);
  --card-shadow-hover: 0 12px 40px -8px hsl(222 56% 30% / .15);

  /* Sidebar-Tokens (für eingefügte shadcn-Komponenten) */
  --sidebar-background: 0 0% 98%;
  --sidebar-foreground: 222 25% 26%;
  --sidebar-primary: 222 56% 43%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 284 30% 95%;
  --sidebar-accent-foreground: 222 56% 43%;
  --sidebar-border: 222 13% 91%;
  --sidebar-ring: 222 56% 50%;
}

/* --------------------------------------------------------------------
   Basis-Typografie
   -------------------------------------------------------------------- */
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  color: hsl(var(--foreground));
  background-color: hsl(var(--background));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  color: hsl(var(--foreground));
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

a { color: inherit; }

:where(a, button, input, textarea, select):focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* --------------------------------------------------------------------
   Komfort-Klassen für den Seiteninhalt
   -------------------------------------------------------------------- */
.hk-prose { max-width: 70ch; line-height: 1.7; }
.hk-prose > * + * { margin-top: 1rem; }
.hk-prose h2 { margin-top: 2.25rem; font-size: 1.6rem; }
.hk-prose h3 { margin-top: 1.75rem; font-size: 1.25rem; }
.hk-prose ul { list-style: disc; padding-left: 1.25rem; }
.hk-prose ol { list-style: decimal; padding-left: 1.25rem; }
.hk-prose a { color: hsl(var(--primary)); text-decoration: underline; text-underline-offset: 2px; }
.hk-prose img { border-radius: var(--radius); height: auto; }

/* Site-Logo im Header begrenzen */
.custom-logo-link { display: inline-block; }
.custom-logo-link img.custom-logo {
  height: 44px;
  width: auto;
  max-width: 260px;
  display: block;
}

/* Footer-Logo: gleiche Form, aber weiß auf dem Verlauf */
.hk-footer-logo {
  height: 56px;
  width: auto;
  max-width: 320px;
  display: block;
  filter: brightness(0) invert(1);
}

/* Wiederverwendbarer Button im Markenstil */
.hk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .7rem 1.25rem; border-radius: var(--radius); font-weight: 600;
  font-family: 'Plus Jakarta Sans', sans-serif; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
  text-decoration: none;
}
.hk-btn:hover { transform: translateY(-1px); }
.hk-btn--primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.hk-btn--ghost { background: transparent; color: hsl(var(--foreground)); border: 1px solid hsl(var(--border)); }

/* --------------------------------------------------------------------
   Kontaktformular (CF7)
   -------------------------------------------------------------------- */
.hk-form .hk-form__row { margin: 0 0 1rem; }
.hk-form .hk-form__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.hk-form .hk-form__grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1rem; }
@media (min-width: 640px) { .hk-form .hk-form__grid { grid-template-columns: 1fr 1fr; } .hk-form .hk-form__grid .hk-form__row { margin: 0; } }
.hk-form .hk-input {
	width: 100%;
	padding: 0.85rem 1rem;
	font-size: 0.95rem;
	font-family: inherit;
	color: hsl(var(--foreground));
	background: hsl(var(--muted) / 0.45);
	border: 1px solid hsl(var(--border));
	border-radius: var(--radius);
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
	box-sizing: border-box;
}
.hk-form .hk-input::placeholder { color: hsl(var(--muted-foreground)); }
.hk-form .hk-input:focus { outline: none; border-color: hsl(var(--primary)); background: hsl(var(--card)); box-shadow: 0 0 0 3px hsl(var(--primary) / 0.15); }
.hk-form textarea.hk-input { resize: vertical; min-height: 120px; }
.hk-form select.hk-input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }
.hk-form .hk-form__submit { margin: 1.25rem 0 0.75rem; }
.hk-form .hk-submit {
	width: 100%;
	display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
	padding: 0.95rem 1.25rem;
	font-size: 0.95rem;
	font-weight: 600;
	font-family: 'Plus Jakarta Sans', sans-serif;
	color: hsl(var(--primary-foreground));
	background: hsl(var(--primary));
	border: 0;
	border-radius: var(--radius);
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.15s ease;
}
.hk-form .hk-submit::before {
	content: "";
	display: inline-block; width: 16px; height: 16px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2L11 13'/%3E%3Cpath d='M22 2l-7 20-4-9-9-4 20-7z'/%3E%3C/svg%3E") center/contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2L11 13'/%3E%3Cpath d='M22 2l-7 20-4-9-9-4 20-7z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.hk-form .hk-submit:hover { background: hsl(var(--primary) / 0.92); transform: translateY(-1px); }
.hk-form .hk-form__hint { margin: 0; text-align: center; font-size: 0.78rem; color: hsl(var(--muted-foreground)); }
.hk-form .wpcf7-acceptance { display: none; }
.hk-form .wpcf7-list-item { margin: 0; }
.hk-form .wpcf7-not-valid-tip { font-size: 0.8rem; margin-top: 0.35rem; color: hsl(var(--destructive)); }
.hk-form .wpcf7 form.invalid .wpcf7-response-output,
.hk-form .wpcf7 form.unaccepted .wpcf7-response-output,
.hk-form .wpcf7 form.sent .wpcf7-response-output { margin: 1rem 0 0; border-radius: var(--radius); }

/* --------------------------------------------------------------------
   Blog-Listen und Pagination
   -------------------------------------------------------------------- */
.line-clamp-3 {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.pagination, nav.pagination, .navigation.pagination { display: flex; justify-content: center; }
.pagination .nav-links, .navigation.pagination .nav-links { display: inline-flex; gap: 0.25rem; flex-wrap: wrap; }
.page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 38px; height: 38px; padding: 0 0.5rem;
	font-size: 0.85rem; font-weight: 600;
	border: 1px solid hsl(var(--border));
	background: hsl(var(--card));
	color: hsl(var(--foreground));
	border-radius: calc(var(--radius) - 4px);
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.page-numbers:hover { border-color: hsl(var(--primary) / 0.5); color: hsl(var(--primary)); }
.page-numbers.current { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: hsl(var(--primary)); }
.page-numbers.dots { background: transparent; border-color: transparent; cursor: default; }

/* --------------------------------------------------------------------
   Slider
   -------------------------------------------------------------------- */
.hk-slider { position: relative; }
.hk-slider__viewport { overflow: hidden; border-radius: var(--radius); }
.hk-slider__track { display: flex; transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; }
.hk-slider__slide { flex: 0 0 100%; min-width: 0; }
.hk-slider__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; }
.hk-slider__nav--prev { left: -1.25rem; }
.hk-slider__nav--next { right: -1.25rem; }
@media (max-width: 768px) {
	.hk-slider__nav--prev { left: 0.5rem; }
	.hk-slider__nav--next { right: 0.5rem; }
}
.hk-slider__btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); color: hsl(var(--foreground)); cursor: pointer; box-shadow: var(--card-shadow); transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease; }
.hk-slider__btn:hover { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); transform: scale(1.05); }
.hk-slider__btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.hk-slider__dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1.5rem; }
.hk-slider__dot { width: 24px; height: 6px; border: 0; border-radius: 3px; background: hsl(var(--border)); cursor: pointer; padding: 0; transition: background-color 0.2s ease, width 0.2s ease; }
.hk-slider__dot[aria-current="true"] { background: hsl(var(--primary)); width: 32px; }
.hk-slider__counter { font-size: 0.75rem; font-weight: 600; color: hsl(var(--secondary)); letter-spacing: 0.05em; }

/* Kontakt-Karten */
.hk-contact-card {
	display: flex; align-items: center; gap: 1rem;
	padding: 1rem 1.25rem;
	background: hsl(var(--card));
	border: 1px solid hsl(var(--border));
	border-radius: var(--radius);
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
	text-decoration: none;
	color: inherit;
}
.hk-contact-card:hover { border-color: hsl(var(--primary) / 0.5); box-shadow: var(--card-shadow); transform: translateY(-1px); }
.hk-contact-card__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: hsl(var(--primary) / 0.1); color: hsl(var(--primary)); }
.hk-contact-card__label { font-size: 0.78rem; color: hsl(var(--muted-foreground)); text-transform: none; }
.hk-contact-card__value { font-size: 1rem; font-weight: 600; color: hsl(var(--foreground)); }

/* Schwebende Social-Media-Icons – farbige Kreise, als eine Reihe direkt über dem WhatsApp-Button.
   WhatsApp-Button (Plugin-Einstellung): 56px, right:22px, bottom:183px.
   -> gleiche rechte Kante (22px), gleiche Größe (56px), Start knapp oberhalb (183+56+16 ≈ 255px). */
.hk-social-bar {
	position: fixed;
	right: 22px;
	bottom: 255px;
	z-index: 999999900; /* knapp unter der WhatsApp-Bubble (999999999) */
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}
.hk-social-bar__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	color: #fff;
	box-shadow: 0 6px 8px 2px rgba(0, 0, 0, 0.14); /* wie WhatsApp-Button */
	transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.hk-social-bar__link svg { width: 26px; height: 26px; }
.hk-social-bar__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 12px 2px rgba(0, 0, 0, 0.2);
	filter: brightness(1.05);
}
.hk-social-bar__link--facebook  { background: #1877f2; }
.hk-social-bar__link--instagram { background: #e1306c; }
.hk-social-bar__link--linkedin  { background: #0a66c2; }
.hk-social-bar__link--youtube   { background: #ff0000; }

/* Sehr niedrige Viewports: Icons etwas kompakter, damit die Reihe passt */
@media (max-height: 720px) {
	.hk-social-bar { gap: 12px; }
	.hk-social-bar__link { width: 48px; height: 48px; }
	.hk-social-bar__link svg { width: 22px; height: 22px; }
}

/* Datei-Upload als große Dropzone (Bewerbungsformular) */
.hk-dropzone {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	min-height: 128px;
	padding: 22px 18px;
	border: 2px dashed hsl(var(--border));
	border-radius: var(--radius);
	background: hsl(var(--muted) / 0.35);
	color: hsl(var(--muted-foreground));
	text-align: center;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.hk-dropzone:hover,
.hk-dropzone.is-dragover {
	border-color: hsl(var(--primary));
	background: hsl(var(--primary) / 0.06);
	color: hsl(var(--primary));
}
.hk-dropzone input[type="file"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	opacity: 0;
	cursor: pointer;
	z-index: 2;
}
.hk-dropzone__inner { display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; }
.hk-dropzone__icon { color: hsl(var(--primary)); }
.hk-dropzone__title { font-weight: 600; font-size: 1rem; color: hsl(var(--foreground)); }
.hk-dropzone:hover .hk-dropzone__title,
.hk-dropzone.is-dragover .hk-dropzone__title { color: hsl(var(--primary)); }
.hk-dropzone__hint { font-size: 0.8rem; color: hsl(var(--muted-foreground)); }
.hk-dropzone__file { margin-top: 4px; font-size: 0.85rem; font-weight: 600; color: hsl(var(--primary)); word-break: break-all; }
.hk-dropzone.has-file { border-style: solid; border-color: hsl(var(--primary)); background: hsl(var(--primary) / 0.06); }
.hk-dropzone.has-file .hk-dropzone__hint { display: none; }

/* --------------------------------------------------------------------
   Hero-Bereiche: Hintergrundbilder, Overlay und Text-Schatten
   (vormals als inline style="…" direkt im Seiteninhalt)
   -------------------------------------------------------------------- */
.hk-hero-bg--team {
	background-image: url('/wp-content/uploads/2025/10/Heide-KaelteKlimatechnik-GmbH-Co-KG-Gerdau-Uelzen-Tom-Krause-Frederik-Frenzel.png');
	background-position: center 30%;
}
.hk-hero-bg--team-home {
	background-image: url('/wp-content/uploads/2025/10/Heide-KaelteKlimatechnik-GmbH-Co-KG-Gerdau-Uelzen-Tom-Krause-Frederik-Frenzel.png');
	background-position: center 18%;
}
.hk-hero-bg--klimaanlagen {
	background-image: url('/wp-content/uploads/2025/12/Splitklimaanlage-Split-Klimaanlage-Lueneburg-Uelzen-Soltau.jpeg');
	background-position: center 35%;
}
.hk-hero-bg--kaeltetechnik {
	background-image: url('/wp-content/uploads/2025/07/Kaeltetechniker-Kuehlraumtechniker-Installation-Wartung-Kuehlhaus-Luenebur-Uelze-Soltau.jpg');
	background-position: center 30%;
}
.hk-hero-overlay { background: radial-gradient(ellipse at center, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.55) 100%); }
.hk-hero-overlay--dark { background: radial-gradient(ellipse at center, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.55) 100%); }
.hk-text-shadow-lg { text-shadow: 0 2px 14px rgba(0,0,0,0.55); }
.hk-text-shadow { text-shadow: 0 1px 8px rgba(0,0,0,0.5); }
.hk-text-shadow-sm { text-shadow: 0 1px 8px rgba(0,0,0,0.45); }

/* Aktiver Menüpunkt (aktuelle Seite) mit Marken-Farbverlauf */
.current-menu-item > a > span,
.current_page_item > a > span,
.current-menu-ancestor > a > span,
a[aria-current="page"] > span {
	background: var(--trust-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	font-weight: 700;
}

/* --------------------------------------------------------------------
   Slider: Wisch-Geste und mehrspaltige Variante (Karten-Slider)
   --------------------------------------------------------------------
   touch-action: pan-y erlaubt weiterhin das senkrechte Scrollen der Seite,
   überlässt waagerechte Gesten aber dem Slider-Skript.

   .hk-slider--cards ist eine reine Zusatz-Variante: Slider ohne diese Klasse
   (und ohne das Attribut data-hk-per-view) verhalten sich unverändert.
   -------------------------------------------------------------------- */
.hk-slider__viewport { touch-action: pan-y; }

.hk-slider--cards .hk-slider__slide {
	box-sizing: border-box;
	flex: 0 0 100%;
	padding: 0.25rem 0.5rem;
	display: flex;
}
.hk-slider--cards .hk-slider__slide > * { width: 100%; }

@media (min-width: 640px) {
	.hk-slider--cards .hk-slider__slide { flex-basis: 50%; }
}
@media (min-width: 1024px) {
	.hk-slider--cards .hk-slider__slide { flex-basis: 33.3333%; }
}