@charset "UTF-8";
/**
 * @file main4u.scss
 *
 * @description
 * Main SCSS file using @use and @forward pattern
 * This file should be compiled to main4u.css
 *
 * @version 2.0.0
 * @created 20250114-221000
 * @modified 20251008-144218
 *
 * @author Frank Hackenberg
 * @author_uri https://foryourweb.de
 * Copyright (c) [fh] - 4UWeb
 *
 * @package AstraChild
 *
 * @license GPL-3.0-or-later
 * @license_uri https://www.gnu.org/licenses/gpl-3.0.html
 */
/**
 * colors4u.scss
 * Modern, accessible color system based on user's CI
 * Created: 2025-09-20
 * Refactored: 2025-10-26 (Timestamp: 20251026-121614)
 *
 * Notes:
 * - Comments are placed BEFORE the affected line.
 * - Keep text contrast AA (WCAG 2.1) as default target.
 * - All hex values consolidated from hardcoded values.
 * - Button color scheme finalized per Scribble 20251026.
 */
/* =========================
   BRAND COLORS (Core Identity)
   ========================= */
/* Brand primary (Navy Blue) - Updated 20251026 */
/* Brand secondary (Turquoise) */
/* Accent (Success green) – used for checkmarks, positive states */
/* Coral Orange - for hero CTAs */
/* Blue Grey - professional dark accent */
/* Cyan - stays in blue family */
/* =========================
   BUTTON COLORS (Finalized 20251026-121614)
   ========================= */
/* PRIMARY BUTTONS (Standard - alle außer Hero) */
/* HERO BUTTONS (auf dunklem Hintergrund) */
/* =========================
   BASIC COLORS
   ========================= */
/* Pure white */
/* Pure black */
/* =========================
   GREY / NEUTRALS (LIGHT SCALE)
   ========================= */
/* Very light gray (hairline backgrounds) */
/* Light gray */
/* Medium light gray (dividers) */
/* Medium gray (muted borders) */
/* Darker gray (icons/placeholders) */
/* Neutral gray (body muted text) */
/* Dark gray */
/* Darker gray */
/* Very dark gray */
/* Almost black */
/* =========================
   TEXT COLORS
   ========================= */
/* Primary text on light backgrounds */
/* Hero title text color */
/* Muted/secondary text on light backgrounds */
/* Text on dark backgrounds */
/* =========================
   BACKGROUNDS / SURFACES
   ========================= */
/* Main application background */
/* Section background (subtle contrast) */
/* Dark section background (brand) */
/* Generic surface (cards) */
/* Subtle section (striped areas, panels) */
/* Hairline border color */
/* =========================
   LINKS
   ========================= */
/* Link color on light backgrounds */
/* Link hover */
/* Visited link */
/* =========================
   GRADIENTS (BASE)
   ========================= */
/* Grey shimmer divider (hairline) */
/* Brand gradient (primary → secondary) */
/* Hero overlay gradient (for image scrims) */
/* Gradient for feature sections */
/* =========================
   GRADIENT FALLBACKS (SOLID)
   ========================= */
/* Solid fallback ~ mid of brand gradient (legacy/print) */
/* Solid fallback for hero overlay */
/* =========================
   GRADIENT AA VARIANTS
   (Darkened stops to keep white text >= AA)
   ========================= */
/* AA-safe brand gradient with white text */
/* AA-safe hero overlay gradient with white text */
/* Gradient AA variant for white text */
/* =========================
   SEMANTIC COLORS (Feedback)
   ========================= */
/* Success */
/* Warning */
/* Danger / Error */
/* Info */
/* =========================
   SHADOWS
   ========================= */
/* =========================
   DEPRECATED / LEGACY
   (Behalten für Backwards-Compatibility, aber nicht mehr verwenden!)
   ========================= */
/* Legacy naming - mapped to new values */
/* Secondary strong – darker turquoise to allow white text AA */
/* Legacy primary variants - mapped to new btn-primary */
/* --- Grandesign Neue Roman --- */
/* Grandesign Neue Roman Regular (weight 400) */
@font-face {
  font-display: swap;
  font-family: "Grandesign Neue Roman";
  font-style: normal;
  font-weight: 400;
  src: url("/wp-content/themes/astra-child/files4u/fonts/grandesign-neuer-roman.ttf") format("truetype");
}
/* -- Nixie One -- */
/* Nixie One Regular (weight 400) */
@font-face {
  font-display: swap;
  font-family: "Nixie One";
  font-style: normal;
  font-weight: 400;
  src: url("/wp-content/themes/astra-child/files4u/fonts/NixieOne-Regular.ttf") format("truetype");
}
/* --- Helvetica --- */
/* Helvetica Regular (weight 400) */
@font-face {
  font-display: swap;
  font-family: "Helvetica";
  font-style: normal;
  font-weight: 400;
  src: url("/wp-content/themes/astra-child/files4u/fonts/helvetica.woff") format("woff"), url("/wp-content/themes/astra-child/files4u/fonts/helvetica.ttf") format("truetype");
}
/* Helvetica Bold (weight 700) */
@font-face {
  font-display: swap;
  font-family: "Helvetica";
  font-style: normal;
  font-weight: 700;
  src: url("/wp-content/themes/astra-child/files4u/fonts/helvetica-bold.woff") format("woff"), url("/wp-content/themes/astra-child/files4u/fonts/helvetica-bold.ttf") format("truetype");
}
/* Helvetica Light (weight 300) */
@font-face {
  font-display: swap;
  font-family: "Helvetica";
  font-style: normal;
  font-weight: 300;
  src: url("/wp-content/themes/astra-child/files4u/fonts/helvetica-light.woff") format("woff"), url("/wp-content/themes/astra-child/files4u/fonts/helvetica-light.ttf") format("truetype");
}
/* --- Open Sans --- */
/* Open Sans Light (weight 300) */
@font-face {
  font-display: swap;
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300;
  src: url("/wp-content/themes/astra-child/files4u/fonts/opensans-light.woff2") format("woff2"), url("/wp-content/themes/astra-child/files4u/fonts/opensans-light.ttf") format("truetype");
}
/* Open Sans Regular (weight 400) */
@font-face {
  font-display: swap;
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  src: url("/wp-content/themes/astra-child/files4u/fonts/opensans-regular.woff2") format("woff2"), url("/wp-content/themes/astra-child/files4u/fonts/opensans-regular.ttf") format("truetype");
}
/* Open Sans Bold (weight 700) */
@font-face {
  font-display: swap;
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  src: url("/wp-content/themes/astra-child/files4u/fonts/opensans-bold.woff2") format("woff2"), url("/wp-content/themes/astra-child/files4u/fonts/opensans-bold.ttf") format("truetype");
}
/* --- Roboto --- */
/* Roboto Light (weight 300) */
@font-face {
  font-display: swap;
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300;
  src: url("/wp-content/themes/astra-child/files4u/fonts/roboto-light.woff2") format("woff2"), url("/wp-content/themes/astra-child/files4u/fonts/roboto-light.ttf") format("truetype");
}
/* Roboto Regular (weight 400) */
@font-face {
  font-display: swap;
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  src: url("/wp-content/themes/astra-child/files4u/fonts/roboto-regular.woff2") format("woff2"), url("/wp-content/themes/astra-child/files4u/fonts/roboto-regular.ttf") format("truetype");
}
/* Roboto Bold (weight 700) */
@font-face {
  font-display: swap;
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  src: url("/wp-content/themes/astra-child/files4u/fonts/roboto-bold.woff2") format("woff2"), url("/wp-content/themes/astra-child/files4u/fonts/roboto-bold.ttf") format("truetype");
}
/* --- Verdana --- */
/* Verdana Regular (weight 400) */
@font-face {
  font-display: swap;
  font-family: "Verdana";
  font-style: normal;
  font-weight: 400;
  src: url("/wp-content/themes/astra-child/files4u/fonts/verdana.woff2") format("woff2"), url("/wp-content/themes/astra-child/files4u/fonts/verdana.ttf") format("truetype");
}
/* Verdana Bold (weight 700) */
@font-face {
  font-display: swap;
  font-family: "Verdana";
  font-style: normal;
  font-weight: 700;
  src: url("/wp-content/themes/astra-child/files4u/fonts/verdana-bold.woff2") format("woff2"), url("/wp-content/themes/astra-child/files4u/fonts/verdana-bold.ttf") format("truetype");
}
/* SECTION --- Material Icons --- */
/* Material Icons Regular (weight 400) */
@font-face {
  font-display: swap;
  font-family: "Material Icons";
  font-style: normal;
  font-weight: 400;
  src: url("/wp-content/themes/astra-child/files4u/fonts/material-icons-v143-latin-regular.woff2") format("woff2"), url("/wp-content/themes/astra-child/files4u/fonts/material-icons-v143-latin-regular.ttf") format("truetype");
}
.google-material-icons,
.material-icons,
.material-symbols-outlined {
  font-family: "Material Icons";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: "liga";
  font-weight: normal;
}

html {
  font-family: "Helvetica", "Roboto", "Open Sans", "Verdana", sans-serif !important;
  font-size: 16px;
}

/**
 * @file main4u.scss
 *
 * @description
 * Main SCSS file using @use and @forward pattern
 * This file should be compiled to main4u.css
 *
 * @version 2.0.0
 * @created 20250114-221000
 * @modified 20251008-144218
 *
 * @author Frank Hackenberg
 * @author_uri https://foryourweb.de
 * Copyright (c) [fh] - 4UWeb
 *
 * @package AstraChild
 *
 * @license GPL-3.0-or-later
 * @license_uri https://www.gnu.org/licenses/gpl-3.0.html
 */
/**
 * @file global4u.scss
 *
 * @description
 * Global element-based styles for all 4uWeb projects
 * Contains ONLY HTML element styling, no classes or IDs
 *
 * @version 1.0.0
 * @created 20250114-220000
 * @modified 20250115-140000
 *
 * @author Frank Hackenberg
 * @author_uri https://foryourweb.de
 * Copyright (c) [fh] - 4UWeb
 *
 * @package AstraChild
 *
 * @dependencies
 * colors4u.scss - Color variables
 * fonts4u.scss - Font definitions
 * mixins4u.scss - Mixins
 *
 * @license GPL-3.0-or-later
 * @license_uri https://www.gnu.org/licenses/gpl-3.0.html
 */
/* ============================================
   CSS VARIABLES
   ============================================ */
:root {
  --4u-primary: #003366;
  --4u-secondary: #669999;
  --4u-accent: #0066cc;
  --4u-success: #10b981;
  --4u-warning: #f59e0b;
  --4u-danger: #ef4444;
  --4u-text-dark: #1a1a1a;
  --4u-text-gray: #666666;
  --4u-text-light: #ffffff;
  --4u-bg-white: #ffffff;
  --4u-bg-light: #f8f9fa;
  --4u-bg-gray: #e9ecef;
  --4u-border: #e5e7eb;
  --4u-shadow-sm: 0 5px 15px rgba(0,51,102,0.08);
  --4u-shadow-md: 0 10px 30px rgba(0,51,102,0.15);
  --4u-shadow-lg: 0 20px 60px rgba(0,0,0,0.3);
  --4u-gradient: linear-gradient(135deg, #003366 0%, #669999 100%);
  --4u-max-width: 1200px;
  --4u-radius: 5px;
  --4u-radius-lg: 12px;
}

/* ============================================
   GLOBAL RESET
   ============================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--4u-text-dark);
  background: var(--4u-bg-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.2;
  color: var(--4u-primary);
  margin-bottom: 1rem;
}

h1 {
  font-size: 48px;
}

h2 {
  font-size: 36px;
}

h3 {
  font-size: 28px;
}

h4 {
  font-size: 24px;
}

h5 {
  font-size: 20px;
}

h6 {
  font-size: 18px;
}

p {
  margin-bottom: 1.5rem;
  line-height: 1.8;
}

a {
  color: var(--4u-accent);
  text-decoration: none;
  transition: all 0.3s ease;
}
a:hover {
  color: var(--4u-primary);
}
a:focus:not(:focus-visible) {
  outline: none;
}
a:focus-visible {
  outline: 2px solid var(--4u-accent);
  outline-offset: 3px;
  border-radius: 3px;
  transition: outline 0.2s ease;
}

strong, b {
  font-weight: 700;
}

em, i {
  font-style: italic;
}

small {
  font-size: 0.875em;
}

/* ============================================
   LISTS
   ============================================ */
ul, ol {
  margin-bottom: 1.5rem;
  padding-left: 30px;
}
ul li, ol li {
  margin-bottom: 0.5rem;
  line-height: 1.8;
}
ul ul, ul ol, ol ul, ol ol {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

dl {
  margin-bottom: 1.5rem;
}
dl dt {
  font-weight: 700;
  margin-bottom: 0.25rem;
}
dl dd {
  margin-left: 20px;
  margin-bottom: 1rem;
}

/* ============================================
   FORMS
   ============================================ */
input[type=text],
input[type=email],
input[type=password],
input[type=tel],
input[type=url],
input[type=search],
input[type=number],
input[type=date],
textarea,
select {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid var(--4u-border);
  border-radius: var(--4u-radius);
  font-size: 16px;
  font-family: inherit;
  transition: all 0.3s;
  background: white;
}
input[type=text]::-moz-placeholder, input[type=email]::-moz-placeholder, input[type=password]::-moz-placeholder, input[type=tel]::-moz-placeholder, input[type=url]::-moz-placeholder, input[type=search]::-moz-placeholder, input[type=number]::-moz-placeholder, input[type=date]::-moz-placeholder, textarea::-moz-placeholder, select::-moz-placeholder {
  color: #adb5bd;
}
input[type=text]::placeholder,
input[type=email]::placeholder,
input[type=password]::placeholder,
input[type=tel]::placeholder,
input[type=url]::placeholder,
input[type=search]::placeholder,
input[type=number]::placeholder,
input[type=date]::placeholder,
textarea::placeholder,
select::placeholder {
  color: #adb5bd;
}
input[type=text]:disabled,
input[type=email]:disabled,
input[type=password]:disabled,
input[type=tel]:disabled,
input[type=url]:disabled,
input[type=search]:disabled,
input[type=number]:disabled,
input[type=date]:disabled,
textarea:disabled,
select:disabled {
  background: var(--4u-bg-light);
  cursor: not-allowed;
  opacity: 0.6;
}

textarea {
  resize: vertical;
  min-height: 120px;
}

select {
  cursor: pointer;
}

label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: var(--4u-text-dark);
}

fieldset {
  border: 1px solid var(--4u-border);
  border-radius: var(--4u-radius);
  padding: 20px;
  margin-bottom: 1.5rem;
}
fieldset legend {
  padding: 0 10px;
  font-weight: 600;
}

button {
  font-family: inherit;
  cursor: pointer;
  transition: all 0.3s;
}

/* ============================================
   TABLES
   ============================================ */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
}
table th, table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid var(--4u-border);
}
table th {
  background: var(--4u-bg-light);
  font-weight: 600;
  color: var(--4u-primary);
}
table tr {
  transition: background 0.3s;
}
table tr:hover {
  background: var(--4u-bg-light);
}
table tbody tr:last-child td {
  border-bottom: none;
}

/* ============================================
   MEDIA
   ============================================ */
img {
  max-width: 100%;
  height: auto;
  display: block;
}
img.inline-icon, img[width="14"], img[width="16"], img[width="20"], img[width="24"] {
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 3px;
}

figure {
  margin: 0 0 1.5rem 0;
}
figure img {
  margin-bottom: 0.5rem;
}
figure figcaption {
  font-size: 0.875rem;
  color: var(--4u-text-gray);
  text-align: center;
}

iframe {
  max-width: 100%;
}

video {
  max-width: 100%;
  height: auto;
}

/* ============================================
   QUOTES & CODE
   ============================================ */
blockquote {
  border-left: 4px solid var(--4u-primary);
  padding-left: 20px;
  margin: 30px 0;
  font-style: italic;
  color: var(--4u-text-gray);
}
blockquote cite {
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-size: 0.875rem;
}
blockquote cite::before {
  content: "— ";
}

pre {
  background: var(--4u-bg-light);
  padding: 20px;
  border-radius: var(--4u-radius);
  overflow-x: auto;
  margin-bottom: 1.5rem;
}
pre code {
  font-family: "Monaco", "Courier New", monospace;
  font-size: 14px;
  background: none;
  padding: 0;
  color: inherit;
}

code {
  background: var(--4u-bg-light);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.9em;
  color: var(--4u-danger);
  font-family: "Monaco", "Courier New", monospace;
}

kbd {
  background: var(--4u-text-dark);
  color: white;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.875em;
  font-family: "Monaco", "Courier New", monospace;
}

/* ============================================
   DIVIDERS
   ============================================ */
hr {
  border: none;
  border-top: 1px solid var(--4u-border);
  margin: 2rem 0;
}

/* ============================================
   RESPONSIVE TYPOGRAPHY
   ============================================ */
@media (max-width: 1024px) {
  h1 {
    font-size: 40px;
  }
  h2 {
    font-size: 32px;
  }
  h3 {
    font-size: 24px;
  }
}
@media (max-width: 768px) {
  h1 {
    font-size: 36px;
  }
  h2 {
    font-size: 28px;
  }
  h3 {
    font-size: 22px;
  }
  h4 {
    font-size: 20px;
  }
  h5 {
    font-size: 18px;
  }
  h6 {
    font-size: 16px;
  }
}
@media (max-width: 480px) {
  body {
    font-size: 14px;
  }
  h1 {
    font-size: 32px;
  }
  h2 {
    font-size: 24px;
  }
  h3 {
    font-size: 20px;
  }
}
/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
  body {
    color: black;
    background: white;
  }
  h1, h2, h3, h4, h5, h6 {
    color: black;
  }
  a {
    color: black;
    text-decoration: underline;
  }
  pre, blockquote {
    page-break-inside: avoid;
  }
}
/**
 * Header Styles for 4UWeb
 *
 * @description Complete header styling - ALL header CSS belongs here, NOT in header.php!
 * @version 2.4.0
 * @created 20251107-161045
 * @modified 20251121-090056
 *
 * @author Frank Hackenberg
 * @license GPL-3.0-or-later
 */
/* ========================================
   HEADER LAYOUT, STRUCTURE & COMPONENTS
   ======================================== */
.fouruweb-header {
  /* Visual Styles - Merged from _custom4u.scss (20251121-090056) */
  background: rgba(255, 255, 255, 0.444);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  box-shadow: 0 3px 10px -3px rgba(0, 51, 102, 0.4);
  border-bottom: 1px solid rgba(0, 51, 102, 0.42);
  padding: 0 6.667%;
  position: sticky;
  top: 0;
  z-index: 1000;
  /* Header Layout - Merged from _custom4u.scss (20251121-090056) */
  /* Better spacing */
  /* Logo and Title Alignment */
  /* Custom Logo Link - Merged from _custom4u.scss (20251121-090056) */
  /* Site Description */
  /* Navigation Menu - Merged from _custom4u.scss (20251121-090056) */
  /* Dropdown Menus - Merged from _custom4u.scss (20251121-090056) */
  /* Main navigation - Hidden, use burger menu instead (20251109-170000) */
  /* ========================================
     BADGES (Legacy - can be removed if not used)
     ======================================== */
  /* Badge styling - Enhanced design with icons */
  /* Plugin Shop Badge - Coral with puzzle icon */
  /* Webdev Badge - Navy Blue with laptop icon */
  /* ========================================
     ACCOUNT BUTTON & ICON BUTTONS
     ======================================== */
  /* Account button improvements - works for both <a> and <button> */
  /* Icon buttons with tooltips - FIXED */
  /* Header actions container */
  /* ========================================
     MOBILE MENU TOGGLE (BURGER MENU)
     ======================================== */
  /* Mobile menu toggle button - ALWAYS VISIBLE (20251109-162224) */
}
.fouruweb-header .nav-container {
  max-width: var(--4u-max-width);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.fouruweb-header .fouruweb-nav {
  padding: 12px 20px;
}
.fouruweb-header .site-branding {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.fouruweb-header .site-title-link {
  display: flex;
  align-items: center;
  gap: 15px;
  text-decoration: none;
  position: relative;
  /* Let WordPress handle logo sizing */
  /* Respect WordPress inline styles for logo */
  /* Domain Label - Text above site title (20251110-131118) */
}
.fouruweb-header .site-title-link .custom-logo {
  height: auto !important;
  width: auto !important;
  max-height: 80px; /* Prevent overly large logos */
  display: block;
}
.fouruweb-header .site-title-link img.custom-logo[style*=width],
.fouruweb-header .site-title-link img.custom-logo[style*=height] {
  max-height: 80px !important; /* WordPress sets inline styles - respect them */
}
.fouruweb-header .site-title-link .domain-label {
  display: block;
  font-size: 14.444px;
  font-weight: 600;
  letter-spacing: 0;
  color: #000;
  margin-bottom: 2px;
  position: absolute;
  left: 80px;
  top: 35px;
}
.fouruweb-header .site-title-link .site-title {
  color: var(--4u-primary);
  font-size: 24px;
  font-weight: normal;
  top: 24px;
  position: relative;
  left: -34px;
}
.fouruweb-header .custom-logo-link {
  display: flex;
  align-items: center;
}
.fouruweb-header .custom-logo-link img {
  height: 50px;
  width: auto;
  max-width: 200px;
}
.fouruweb-header .site-description {
  color: var(--4u-text-gray);
  font-size: 14px;
  margin: 0;
}
.fouruweb-header .nav-menu,
.fouruweb-header #primary-menu,
.fouruweb-header ul.menu {
  display: flex;
  gap: 35px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.fouruweb-header .nav-menu > li,
.fouruweb-header .nav-menu > .menu-item,
.fouruweb-header #primary-menu > li,
.fouruweb-header #primary-menu > .menu-item,
.fouruweb-header ul.menu > li,
.fouruweb-header ul.menu > .menu-item {
  position: relative;
}
.fouruweb-header .nav-menu > li > a,
.fouruweb-header .nav-menu > .menu-item > a,
.fouruweb-header #primary-menu > li > a,
.fouruweb-header #primary-menu > .menu-item > a,
.fouruweb-header ul.menu > li > a,
.fouruweb-header ul.menu > .menu-item > a {
  color: var(--4u-text-gray);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s;
  padding: 10px 0;
  display: block;
}
.fouruweb-header .nav-menu > li > a:hover,
.fouruweb-header .nav-menu > .menu-item > a:hover,
.fouruweb-header #primary-menu > li > a:hover,
.fouruweb-header #primary-menu > .menu-item > a:hover,
.fouruweb-header ul.menu > li > a:hover,
.fouruweb-header ul.menu > .menu-item > a:hover {
  color: var(--4u-primary);
}
.fouruweb-header .nav-menu > li.menu-item-has-children > a::after,
.fouruweb-header .nav-menu > .menu-item.menu-item-has-children > a::after,
.fouruweb-header #primary-menu > li.menu-item-has-children > a::after,
.fouruweb-header #primary-menu > .menu-item.menu-item-has-children > a::after,
.fouruweb-header ul.menu > li.menu-item-has-children > a::after,
.fouruweb-header ul.menu > .menu-item.menu-item-has-children > a::after {
  content: " ▼";
  font-size: 10px;
  margin-left: 5px;
}
.fouruweb-header .nav-menu > li.has-dropdown:hover .dropdown-menu, .fouruweb-header .nav-menu > li.has-dropdown:hover .sub-menu, .fouruweb-header .nav-menu > li.menu-item-has-children:hover .dropdown-menu, .fouruweb-header .nav-menu > li.menu-item-has-children:hover .sub-menu,
.fouruweb-header .nav-menu > .menu-item.has-dropdown:hover .dropdown-menu,
.fouruweb-header .nav-menu > .menu-item.has-dropdown:hover .sub-menu,
.fouruweb-header .nav-menu > .menu-item.menu-item-has-children:hover .dropdown-menu,
.fouruweb-header .nav-menu > .menu-item.menu-item-has-children:hover .sub-menu,
.fouruweb-header #primary-menu > li.has-dropdown:hover .dropdown-menu,
.fouruweb-header #primary-menu > li.has-dropdown:hover .sub-menu,
.fouruweb-header #primary-menu > li.menu-item-has-children:hover .dropdown-menu,
.fouruweb-header #primary-menu > li.menu-item-has-children:hover .sub-menu,
.fouruweb-header #primary-menu > .menu-item.has-dropdown:hover .dropdown-menu,
.fouruweb-header #primary-menu > .menu-item.has-dropdown:hover .sub-menu,
.fouruweb-header #primary-menu > .menu-item.menu-item-has-children:hover .dropdown-menu,
.fouruweb-header #primary-menu > .menu-item.menu-item-has-children:hover .sub-menu,
.fouruweb-header ul.menu > li.has-dropdown:hover .dropdown-menu,
.fouruweb-header ul.menu > li.has-dropdown:hover .sub-menu,
.fouruweb-header ul.menu > li.menu-item-has-children:hover .dropdown-menu,
.fouruweb-header ul.menu > li.menu-item-has-children:hover .sub-menu,
.fouruweb-header ul.menu > .menu-item.has-dropdown:hover .dropdown-menu,
.fouruweb-header ul.menu > .menu-item.has-dropdown:hover .sub-menu,
.fouruweb-header ul.menu > .menu-item.menu-item-has-children:hover .dropdown-menu,
.fouruweb-header ul.menu > .menu-item.menu-item-has-children:hover .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.fouruweb-header .dropdown-menu,
.fouruweb-header .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  box-shadow: var(--4u-shadow-md);
  border-radius: 8px;
  padding: 10px 0;
  min-width: 220px;
  margin-top: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
}
.fouruweb-header .dropdown-menu li a,
.fouruweb-header .sub-menu li a {
  display: block;
  padding: 12px 20px;
  color: var(--4u-text-gray);
  text-decoration: none;
  transition: all 0.3s;
}
.fouruweb-header .dropdown-menu li a:hover,
.fouruweb-header .sub-menu li a:hover {
  background: var(--4u-bg-light);
  color: var(--4u-primary);
  padding-left: 25px;
}
.fouruweb-header .dropdown-menu li.coming-soon a,
.fouruweb-header .sub-menu li.coming-soon a {
  opacity: 0.5;
  cursor: default;
  font-style: italic;
}
.fouruweb-header .dropdown-menu li.coming-soon a:hover,
.fouruweb-header .sub-menu li.coming-soon a:hover {
  padding-left: 20px;
}
.fouruweb-header .main-navigation {
  display: none;
}
.fouruweb-header .menu-container {
  display: flex;
  justify-content: center;
}
.fouruweb-header #primary-menu,
.fouruweb-header ul.menu {
  display: flex;
  gap: 35px;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: center;
}
.fouruweb-header .nav-actions {
  flex-shrink: 0;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 15px;
  /* Merged from _custom4u.scss (20251121-090056) */
}
.fouruweb-header .nav-actions .widget {
  margin: 0;
}
.fouruweb-header .nav-actions .btn-account {
  background: var(--4u-primary);
  color: white;
  padding: 10px 25px;
  border-radius: var(--4u-radius);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s;
}
.fouruweb-header .nav-actions .btn-account:hover {
  background: var(--4u-accent);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 51, 102, 0.3);
}
.fouruweb-header .header-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 33px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-left: 12px;
  vertical-align: middle;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* Badge icon */
  /* Badge hover effect */
}
.fouruweb-header .header-badge::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.fouruweb-header .header-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.fouruweb-header .header-badge-plugins {
  background: rgba(102, 153, 153, 0.15);
  color: #669999;
  border: 1px solid #669999;
}
.fouruweb-header .header-badge-plugins::before {
  background-image: url("../img/twemoji_icons/1f9e9.svg");
}
.fouruweb-header .header-badge-webdev {
  background: rgba(0, 51, 102, 0.15);
  color: #003366;
  border: 1px solid #003366;
}
.fouruweb-header .header-badge-webdev::before {
  background-image: url("../img/twemoji_icons/1f4bb.svg");
}
.fouruweb-header .btn-account,
.fouruweb-header button.btn-account {
  background: #073a6a;
  color: white;
  padding: 8px 20px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  transition: all 0.3s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  line-height: normal;
}
.fouruweb-header .btn-account:hover,
.fouruweb-header button.btn-account:hover {
  background: #669999; /* Secondary color - Turquoise */
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 153, 153, 0.3);
  color: white;
}
.fouruweb-header .btn-account .dashicons,
.fouruweb-header button.btn-account .dashicons {
  font-size: 18px;
  width: 18px;
  height: 18px;
  line-height: 18px;
  display: inline-block;
  vertical-align: middle;
}
.fouruweb-header .btn-account .dashicons::before,
.fouruweb-header button.btn-account .dashicons::before {
  font-size: 18px;
  width: 18px;
  height: 18px;
  line-height: 1;
  display: inline-block;
}
.fouruweb-header .icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  color: #003366;
  text-decoration: none;
  transition: all 0.3s;
  margin-left: 10px;
  border: none;
  cursor: pointer;
  padding: 0;
  /* Exit icon - flip horizontally to point right */
  /* Tooltip styling */
}
.fouruweb-header .icon-btn:hover {
  background: rgba(0, 51, 102, 0.1);
  color: #0066cc;
}
.fouruweb-header .icon-btn .dashicons {
  font-size: 20px;
  width: 20px;
  height: 20px;
  line-height: 1;
}
.fouruweb-header .icon-btn .dashicons-exit {
  transform: scaleX(-1);
}
.fouruweb-header .icon-btn[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: -35px;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 12px;
  font-weight: normal;
  pointer-events: none;
  z-index: 1000;
}
.fouruweb-header .icon-btn[data-tooltip]:hover::before {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #333;
  pointer-events: none;
  z-index: 1000;
}
.fouruweb-header .nav-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}
.fouruweb-header .mobile-menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 5px;
  transition: all 0.3s ease;
  margin-left: 15px;
  position: relative;
  z-index: 1001;
  /* Burger icon lines */
  /* Hover effect */
  /* Active/Open state */
  /* Focus state for accessibility */
}
.fouruweb-header .mobile-menu-toggle span {
  width: 24px;
  height: 3px;
  background: #003366;
  border-radius: 2px;
  transition: all 0.3s ease;
  transform-origin: center;
}
.fouruweb-header .mobile-menu-toggle:hover {
  background: rgba(0, 51, 102, 0.1);
}
.fouruweb-header .mobile-menu-toggle:hover span {
  background: #669999;
}
.fouruweb-header .mobile-menu-toggle.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.fouruweb-header .mobile-menu-toggle.active span:nth-child(2) {
  opacity: 0;
}
.fouruweb-header .mobile-menu-toggle.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
.fouruweb-header .mobile-menu-toggle:focus {
  outline: 2px solid #669999;
  outline-offset: 2px;
}

/* Grid Layout: Plugin Shop has 3 columns (logo + nav + actions) */
body.plugin-shop-site .fouruweb-header .nav-container {
  grid-template-columns: auto 1fr auto;
}

/* Grid Layout: Webdev has 2 columns (logo + nav), no actions */
body.webdev-site .fouruweb-header .nav-container {
  grid-template-columns: auto 1fr;
}

/* Fix button styling - Global rule outside .fouruweb-header */
button.icon-btn {
  outline: none;
  font-family: inherit;
}

/* ========================================
   MOBILE MENU PANEL
   ======================================== */
/* Mobile menu panel - slides in from right */
.mobile-menu-panel {
  position: fixed;
  top: 0;
  right: -100%;
  width: 280px;
  height: 100vh;
  background: white;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  overflow-y: auto;
  transition: right 0.3s ease;
  padding: 80px 20px 20px;
  /* Panel is open */
  /* Mobile menu items */
}
.mobile-menu-panel.active {
  right: 0;
}
.mobile-menu-panel .mobile-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  /* Sub-menu styling */
}
.mobile-menu-panel .mobile-menu li {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid rgba(0, 51, 102, 0.1);
}
.mobile-menu-panel .mobile-menu li a {
  display: block;
  padding: 10px 5px;
  color: #003366;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.3s;
}
.mobile-menu-panel .mobile-menu li a:hover {
  background: rgba(102, 153, 153, 0.1);
  color: #669999;
  padding-left: 20px;
}
.mobile-menu-panel .mobile-menu li.current-menu-item a, .mobile-menu-panel .mobile-menu li.current_page_item a {
  color: #669999;
  font-weight: 600;
}
.mobile-menu-panel .mobile-menu .sub-menu,
.mobile-menu-panel .mobile-menu .dropdown-menu {
  padding-left: 0px;
  background: rgba(0, 51, 102, 0.05);
}
.mobile-menu-panel .mobile-menu .sub-menu li,
.mobile-menu-panel .mobile-menu .dropdown-menu li {
  list-style: none;
}
.mobile-menu-panel .mobile-menu .sub-menu li a,
.mobile-menu-panel .mobile-menu .dropdown-menu li a {
  font-size: 14px;
  padding: 12px 10px;
}

/* Overlay for mobile menu */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}
.mobile-menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Prevent body scroll when menu is open */
body.mobile-menu-open {
  overflow: hidden;
}

/* ========================================
   RESPONSIVE / MOBILE ADJUSTMENTS
   ======================================== */
/* Tablet adjustments */
@media (max-width: 1024px) {
  .fouruweb-header .nav-container {
    grid-template-columns: 200px 1fr auto;
    gap: 20px;
  }
}
/* Mobile adjustments */
@media (max-width: 768px) {
  .fouruweb-header {
    padding: 0;
    /* Show mobile menu toggle */
    /* Hide badge on mobile */
  }
  .fouruweb-header .fouruweb-nav {
    padding: 15px 5px;
  }
  .fouruweb-header .nav-container {
    grid-template-columns: 1fr auto;
  }
  .fouruweb-header .mobile-menu-toggle {
    display: flex;
  }
  .fouruweb-header .header-badge {
    display: none;
  }
}
/* Small mobile adjustments - Optimize spacing (< 540px) */
@media (max-width: 539px) {
  .fouruweb-header {
    /* Reduce header padding */
    /* Reduce nav-container gap */
    /* Logo and Title adjustments */
    /* Compact account button - only icon */
    /* Reduce logout icon margin */
    /* Reduce burger menu margin */
    /* Reduce nav-actions gap */
  }
  .fouruweb-header .fouruweb-nav {
    padding: 8px 12px;
  }
  .fouruweb-header .nav-container {
    gap: 10px;
  }
  .fouruweb-header .site-title-link {
    /* Smaller logo */
    /* Mobile site title styling (20251120-160947) */
    /* Mobile domain label styling (20251120-160947) */
  }
  .fouruweb-header .site-title-link .custom-logo {
    max-height: 50px !important;
  }
  .fouruweb-header .site-title-link .site-title {
    color: var(--4u-primary);
    font-size: 20px;
    font-weight: normal;
    top: 16px;
    position: relative;
    left: -28px;
    display: block;
  }
  .fouruweb-header .site-title-link .domain-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    color: #000;
    margin-bottom: 2px;
    position: absolute;
    left: 53px;
    top: 17px;
  }
  .fouruweb-header .btn-account,
  .fouruweb-header button.btn-account {
    padding: 8px 12px;
    font-size: 0;
    /* Hide text */
    gap: 0;
    /* Keep icon visible */
  }
  .fouruweb-header .btn-account .dashicons,
  .fouruweb-header button.btn-account .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
  }
  .fouruweb-header .icon-btn {
    margin-left: 5px;
    width: 32px;
    height: 32px;
  }
  .fouruweb-header .mobile-menu-toggle {
    margin-left: 8px;
    width: 36px;
    height: 36px;
  }
  .fouruweb-header .nav-actions {
    gap: 3px;
  }
}
/* Extra small devices - Further optimization (< 375px) */
@media (max-width: 374px) {
  .fouruweb-header {
    /* Even smaller padding */
    /* Logo adjustments */
    /* Hide logout icon on very small screens */
  }
  .fouruweb-header .fouruweb-nav {
    padding: 6px 8px;
  }
  .fouruweb-header .site-title-link {
    /* Minimal logo */
    /* Extra small site title (20251121-090056) */
    /* Extra small domain label (20251121-090056) */
  }
  .fouruweb-header .site-title-link .custom-logo {
    max-height: 40px !important;
  }
  .fouruweb-header .site-title-link .site-title {
    font-size: 16px;
    top: 14px;
    left: -26px;
  }
  .fouruweb-header .site-title-link .domain-label {
    left: 43px;
    top: 12px;
  }
  .fouruweb-header .icon-btn {
    display: none;
  }
}
/**
 * @file main4u.scss
 *
 * @description
 * Main SCSS file using @use and @forward pattern
 * This file should be compiled to main4u.css
 *
 * @version 2.0.0
 * @created 20250114-221000
 * @modified 20251008-144218
 *
 * @author Frank Hackenberg
 * @author_uri https://foryourweb.de
 * Copyright (c) [fh] - 4UWeb
 *
 * @package AstraChild
 *
 * @license GPL-3.0-or-later
 * @license_uri https://www.gnu.org/licenses/gpl-3.0.html
 */
/**
 * @file _footer4u.scss
 *
 * @description
 * Footer styles for 4uWeb plugin shop
 * Extracted from _custom4u.scss for better organization
 *
 * @version 1.0.0
 * @created 20251112-154800
 * @modified 20251112-154800
 *
 * @author Frank Hackenberg
 * @author_uri https://foryourweb.de
 * Copyright (c) [fh] - 4UWeb
 *
 * @package AstraChild
 *
 * @dependencies
 * colors4u.scss - Color variables
 * mixins4u.scss - Mixins
 *
 * @license GPL-3.0-or-later
 * @license_uri https://www.gnu.org/licenses/gpl-3.0.html
 */
/* ============================================
   FOOTER
   ============================================ */
.fouruweb-footer {
  background: linear-gradient(180deg, rgb(16.5, 67.5, 110.7) 0%, #073a6a 50%, #00264d 100%);
  color: white;
  padding: 60px 5% 30px;
  margin-top: 80px;
}
.fouruweb-footer .footer-container {
  max-width: var(--4u-max-width);
  margin: 0 auto;
}
.fouruweb-footer .footer-top {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 10px;
}
.fouruweb-footer .footer-top .footer-column #block-11 .wp-block-columns h4 {
  margin-bottom: 3px;
}
.fouruweb-footer .footer-top .footer-column #block-11 .wp-block-columns ul {
  padding-left: 22px;
}
.fouruweb-footer .footer-top .footer-column #block-11 .wp-block-columns ul li {
  list-style: circle;
  line-height: 1.2rem;
  margin-bottom: 0;
  font-size: 0.8rem;
}
.fouruweb-footer .footer-top .footer-column h4 {
  margin-bottom: 10px;
  font-size: 18px;
  color: white;
}
.fouruweb-footer .footer-top .footer-column ul {
  list-style: none;
  padding: 0;
  margin-left: 6px;
}
.fouruweb-footer .footer-top .footer-column ul li {
  margin-bottom: 0;
}
.fouruweb-footer .footer-top .footer-column ul li a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: color 0.3s;
}
.fouruweb-footer .footer-top .footer-column ul li a:hover {
  color: white;
}
.fouruweb-footer .footer-top .footer-column ul li span {
  color: rgba(255, 255, 255, 0.5);
}
.fouruweb-footer .footer-top .footer-column p {
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 15px;
}
.fouruweb-footer .footer-logo {
  display: flex;
  align-items: center;
  gap: 0px;
  margin-bottom: 15px;
}
.fouruweb-footer .footer-logo p {
  margin: 0;
}
.fouruweb-footer .footer-logo .logo-placeholder {
  width: 40px;
  height: 40px;
  background: white;
  color: var(--4u-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
}
.fouruweb-footer .footer-logo span {
  font-size: 24px;
  font-weight: bold;
}
.fouruweb-footer .footer-bottom {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  opacity: 0.8;
}
.fouruweb-footer .footer-bottom p {
  margin: 0;
  color: white;
}
.fouruweb-footer .footer-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.fouruweb-footer .footer-branding-text {
  display: block;
}
.fouruweb-footer .footer-branding-text strong {
  font-size: 18px;
  font-weight: 700;
  color: white;
  margin-right: 0px;
}
.fouruweb-footer .footer-branding-text span {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
}
.fouruweb-footer .footer-copyright {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
}

/* ============================================
   FOOTER RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  .fouruweb-footer .footer-top {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .fouruweb-footer .footer-logo {
    justify-content: center;
  }
}
/**
 * @file main4u.scss
 *
 * @description
 * Main SCSS file using @use and @forward pattern
 * This file should be compiled to main4u.css
 *
 * @version 2.0.0
 * @created 20250114-221000
 * @modified 20251008-144218
 *
 * @author Frank Hackenberg
 * @author_uri https://foryourweb.de
 * Copyright (c) [fh] - 4UWeb
 *
 * @package AstraChild
 *
 * @license GPL-3.0-or-later
 * @license_uri https://www.gnu.org/licenses/gpl-3.0.html
 */
/**
 * @file custom.scss
 *
 * @description
 * Project-specific styles for 4uWeb plugin shop
 * Contains all class and ID based styles for this project
 *
 * @version 2.3.0
 * @created 20250114-220500
 * @modified 20251121-090056
 *
 * @author Frank Hackenberg
 * @author_uri https://foryourweb.de
 * Copyright (c) [fh] - 4UWeb
 *
 * @package AstraChild
 *
 * @dependencies
 * colors4u.scss - Color variables
 * mixins4u.scss - Mixins
 * global4u.scss - Global element styles
 *
 * @license GPL-3.0-or-later
 * @license_uri https://www.gnu.org/licenses/gpl-3.0.html
 */
/* ============================================
   1. HIDE ASTRA THEME (but not our header!)
   ============================================ */
/* Only hide Astra's original header elements */
.ast-main-header-wrap,
#colophon,
.site-footer,
.ast-footer,
.ast-header,
.ast-mobile-header-wrap,
.ast-desktop-header-content,
.ast-primary-header-bar,
.ast-above-header,
.ast-below-header {
  display: none !important;
}

/* Keep our fouruweb-header visible! */
.fouruweb-header {
  display: block !important;
}

/* ============================================
   2. LAYOUT UTILITIES
   ============================================ */
.container {
  max-width: var(--4u-max-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* ============================================
   3. HEADER - MOVED TO _header4u.scss (20251121-090056)
   ============================================ */
/* ============================================
   4. FOOTER - MOVED TO _footer4u.scss (20251112-154800)
   ============================================ */
/* ============================================
   5. HERO SECTIONS
   ============================================ */
.hero {
  background: var(--4u-gradient);
  padding: 80px 5%;
  color: white;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23ffffff" fill-opacity="0.1" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,122.7C672,117,768,139,864,138.7C960,139,1056,117,1152,106.7C1248,96,1344,96,1392,96L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>');
  background-size: cover;
  background-position: bottom;
  opacity: 0.3;
}
.hero .hero-content {
  max-width: var(--4u-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.hero .hero-text h1 {
  font-size: 48px;
  margin-bottom: 20px;
  line-height: 1.2;
  color: white;
}
.hero .hero-text .badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.2);
  padding: 5px 15px;
  border-radius: 20px;
  font-size: 14px;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.hero .hero-text .tagline {
  font-size: 24px;
  margin-bottom: 10px;
  opacity: 0.95;
}
.hero .hero-text p {
  font-size: 20px;
  margin-bottom: 30px;
  opacity: 0.95;
  color: white;
}
.hero .hero-buttons {
  display: flex;
  gap: 20px;
}
.hero .hero-buttons .btn {
  padding: 15px 30px;
  border-radius: var(--4u-radius);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s;
  display: inline-block;
}
.hero .hero-buttons .btn.btn-white {
  background: white;
  color: var(--4u-primary);
}
.hero .hero-buttons .btn.btn-white:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.hero .hero-buttons .btn.btn-outline {
  background: transparent;
  color: white;
  border: 2px solid white;
}
.hero .hero-buttons .btn.btn-outline:hover {
  background: white;
  color: var(--4u-primary);
}

.page-hero-mini {
  background: var(--4u-gradient);
  padding: 60px 5%;
  color: white;
  text-align: center;
}
.page-hero-mini .page-title {
  font-size: 42px;
  margin: 0;
  color: white;
}

/* ============================================
   6. DEMO WIDGETS
   ============================================ */
.demo-cookie-banner {
  background: white;
  border-radius: 8px;
  padding: 0;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  max-width: 520px;
  animation: float 6s ease-in-out infinite;
  position: relative;
  overflow: visible;
  border: 1px solid #e0e0e0;
}

.demo-route-planner {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  max-width: 420px;
  animation: float 6s ease-in-out infinite;
  position: relative;
  overflow: visible;
  border: 1px solid #e0e0e0;
}

.demo-cookie-banner .demo-overlay,
.demo-route-planner .demo-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  cursor: not-allowed;
  background: rgba(255, 255, 255, 0.01);
  border-radius: 8px;
}
.demo-cookie-banner .demo-overlay:hover .demo-tooltip,
.demo-route-planner .demo-overlay:hover .demo-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}
.demo-cookie-banner .demo-tooltip,
.demo-route-planner .demo-tooltip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  background: rgba(0, 0, 0, 0.85);
  color: white;
  padding: 10px 15px;
  border-radius: 6px;
  font-size: 14px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 101;
  pointer-events: none;
}

.demo-cookie-banner .demo-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px 15px;
  background: transparent;
}
.demo-cookie-banner .demo-modal-header h3 {
  color: #37474f;
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.demo-cookie-banner .demo-modal-header h3 .inline-icon {
  vertical-align: middle;
}
.demo-cookie-banner .demo-modal-header .demo-close-button {
  background: transparent;
  border: none;
  font-size: 28px;
  color: #9ca3af;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: all 0.2s;
  margin-top: -5px;
  box-shadow: none;
}
.demo-cookie-banner .demo-modal-header .demo-close-button:hover {
  color: #374151;
}
.demo-cookie-banner .demo-modal-body {
  padding: 0 24px;
}
.demo-cookie-banner .demo-modal-body .demo-description {
  color: #6b7280;
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.6;
}
.demo-cookie-banner .demo-modal-body .demo-description a {
  color: #00677f;
  text-decoration: underline;
}
.demo-cookie-banner .demo-modal-body .demo-description a:hover {
  text-decoration: none;
}
.demo-cookie-banner .demo-modal-body .demo-divider {
  height: 1px;
  background: #e5e7eb;
  margin: auto;
  width: 100%;
}
.demo-cookie-banner .demo-modal-body .cookie-services {
  padding: 20px 0;
}
.demo-cookie-banner .demo-modal-body .cookie-services .cookie-service {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e5e7eb;
}
.demo-cookie-banner .demo-modal-body .cookie-services .cookie-service:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.demo-cookie-banner .demo-modal-body .cookie-services .cookie-service .service-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.demo-cookie-banner .demo-modal-body .cookie-services .cookie-service .service-header .service-name {
  color: #374151;
  font-size: 14px;
  flex: 1;
}
.demo-cookie-banner .demo-modal-body .cookie-services .cookie-service .service-header .service-name strong {
  font-weight: 600;
}
.demo-cookie-banner .demo-modal-body .cookie-services .cookie-service .service-description {
  color: #6b7280;
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 5px 60px;
}
.demo-cookie-banner .demo-modal-body .cookie-services .cookie-service .service-details {
  color: #00677f;
  font-size: 13px;
  text-decoration: underline;
  margin-left: 60px;
  display: inline-block;
}
.demo-cookie-banner .demo-modal-body .cookie-services .cookie-service .service-details:hover {
  text-decoration: none;
}
.demo-cookie-banner .cookie-toggle {
  width: 48px;
  height: 26px;
  background: #cbd5e1;
  border-radius: 13px;
  position: relative;
  cursor: pointer;
  transition: background 0.3s;
  flex-shrink: 0;
}
.demo-cookie-banner .cookie-toggle[data-service=necessary] {
  cursor: not-allowed;
  opacity: 0.7;
}
.demo-cookie-banner .cookie-toggle.active {
  background: #10b981;
}
.demo-cookie-banner .cookie-toggle::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  background: white;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: transform 0.3s;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.demo-cookie-banner .cookie-toggle.active::after {
  transform: translateX(22px);
}
.demo-cookie-banner .demo-modal-footer {
  padding: 20px 24px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.demo-cookie-banner .demo-modal-footer .btn-accept-selected {
  background: #00acc1;
  color: white;
  border: none;
  padding: 11px 24px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 14px;
}
.demo-cookie-banner .demo-modal-footer .btn-accept-selected:hover {
  background: #0097a7;
}
.demo-cookie-banner .demo-modal-footer .powered-by {
  color: #9ca3af;
  font-size: 11px;
}
.demo-cookie-banner .demo-modal-footer .powered-by a {
  color: #9ca3af;
  text-decoration: underline;
}
.demo-cookie-banner .demo-modal-footer .powered-by a:hover {
  color: #6b7280;
  text-decoration: none;
}
.demo-cookie-banner * {
  cursor: not-allowed !important;
}

.demo-map-widget {
  background: white;
  border-radius: var(--4u-radius-lg);
  padding: 20px;
  box-shadow: var(--4u-shadow-lg);
  animation: float 6s ease-in-out infinite;
}
.demo-map-widget .map-header {
  color: var(--4u-primary);
  margin-bottom: 15px;
}
.demo-map-widget .map-header h3 {
  margin: 0;
  font-size: 18px;
}
.demo-map-widget .map-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 15px;
}
.demo-map-widget .map-controls .map-input {
  padding: 10px;
  border: 1px solid var(--4u-border);
  border-radius: var(--4u-radius);
  font-size: 14px;
}
.demo-map-widget .map-controls .btn-route {
  padding: 10px;
  background: var(--4u-primary);
  color: white;
  border: none;
  border-radius: var(--4u-radius);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s;
}
.demo-map-widget .map-controls .btn-route:hover {
  background: var(--4u-accent);
}
.demo-map-widget .map-preview {
  height: 200px;
  background: var(--4u-bg-light);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}
.demo-map-widget .map-preview img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.demo-map-widget .map-preview .map-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.demo-map-widget .map-preview .map-placeholder .icon {
  font-size: 48px;
  margin-bottom: 10px;
}
.demo-map-widget .map-preview .map-placeholder p {
  color: var(--4u-text-gray);
  margin: 0;
}

/* ============================================
   7. FEATURES SECTION
   ============================================ */
.features {
  padding: 80px 5%;
  background: var(--4u-bg-light);
}

.section-header {
  text-align: center;
  margin-bottom: 60px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.section-header h2 {
  font-size: 36px;
  color: var(--4u-primary);
  margin-bottom: 15px;
}
.section-header p {
  font-size: 18px;
  color: var(--4u-text-gray);
}

.features-grid {
  max-width: var(--4u-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 40px;
}
.features-grid .feature-card {
  background: white;
  padding: 30px;
  border-radius: 10px;
  box-shadow: var(--4u-shadow-sm);
  transition: all 0.3s;
}
.features-grid .feature-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--4u-shadow-md);
}
.features-grid .feature-card .feature-icon {
  font-size: 48px;
  margin-bottom: 20px;
}
.features-grid .feature-card h3 {
  font-size: 22px;
  color: var(--4u-primary);
  margin-bottom: 10px;
}
.features-grid .feature-card p {
  color: var(--4u-text-gray);
  line-height: 1.6;
}

/* ============================================
   8. PRICING SECTION
   ============================================ */
.pricing {
  padding: 80px 5%;
  background: white;
}
.pricing .pricing-grid {
  max-width: var(--4u-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  margin-bottom: 30px;
}
.pricing .price-card {
  border: 2px solid #e5e7eb;
  border-radius: var(--4u-radius-lg);
  padding: 40px 30px;
  text-align: center;
  position: relative;
  transition: all 0.3s;
  background: white;
}
.pricing .price-card:hover {
  border-color: var(--4u-secondary);
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(102, 153, 153, 0.15);
}
.pricing .price-card.featured {
  border-color: var(--4u-primary);
  background: var(--4u-gradient);
  color: white;
  transform: scale(1.05);
}
.pricing .price-card.featured h3,
.pricing .price-card.featured .price,
.pricing .price-card.featured .price-features li {
  color: white;
}
.pricing .price-card.featured .price-features li::before {
  color: var(--4u-success) !important;
}
.pricing .price-card h3 {
  font-size: 28px;
  margin-bottom: 10px;
  color: var(--4u-primary);
}
.pricing .price-card .price {
  font-size: 48px;
  font-weight: bold;
  margin: 20px 0;
  color: var(--4u-primary);
}
.pricing .price-card .price small {
  font-size: 16px;
  font-weight: normal;
  opacity: 0.8;
}
.pricing .price-card .popular-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #ef4444;
  color: white;
  padding: 5px 20px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.pricing .price-card .price-features {
  list-style: none;
  margin: 30px 0;
  padding: 0;
  text-align: left;
}
.pricing .price-card .price-features li {
  padding: 10px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--4u-text-gray);
}
.pricing .price-card .price-features li::before {
  content: "✓";
  color: var(--4u-success);
  font-weight: bold;
  font-size: 18px;
}
.pricing .price-card .btn-buy:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================
   9. CONTENT PAGES
   ============================================ */
.fouruweb-main {
  min-height: 60vh;
}
.fouruweb-main .page-content {
  padding: 60px 5%;
}
.fouruweb-main .page-content .container {
  max-width: var(--4u-max-width);
  margin: 0 auto;
}
.fouruweb-main .page-content .content-wrapper {
  max-width: 800px;
  margin: 0 auto;
}
.fouruweb-main .page-content .content-wrapper h1,
.fouruweb-main .page-content .content-wrapper h2,
.fouruweb-main .page-content .content-wrapper h3,
.fouruweb-main .page-content .content-wrapper h4,
.fouruweb-main .page-content .content-wrapper h5,
.fouruweb-main .page-content .content-wrapper h6 {
  color: var(--4u-primary);
  margin-top: 30px;
  margin-bottom: 15px;
}
.fouruweb-main .page-content .content-wrapper a {
  color: var(--4u-accent);
}
.fouruweb-main .page-content .content-wrapper a:hover {
  text-decoration: underline;
}

/* ============================================
   10. BUTTONS
   ============================================ */
.btn {
  display: inline-block;
  padding: 12px 30px;
  border-radius: var(--4u-radius);
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s;
  cursor: pointer;
  border: none;
  font-size: 16px;
}
.btn-primary {
  background: var(--4u-primary);
  color: white;
}
.btn-primary:hover {
  background: var(--4u-accent);
  transform: translateY(-2px);
  box-shadow: var(--4u-shadow-md);
}
.btn-secondary {
  background: var(--4u-secondary);
  color: white;
}
.btn-secondary:hover {
  background: rgb(81.6, 122.4, 122.4);
  transform: translateY(-2px);
}
.btn-outline {
  background: transparent;
  border: 2px solid var(--4u-primary);
  color: var(--4u-primary);
}
.btn-outline:hover {
  background: var(--4u-primary);
  color: white;
}
.btn-white {
  background: white;
  color: var(--4u-primary);
}
.btn-white:hover {
  background: var(--4u-bg-light);
  transform: translateY(-2px);
  box-shadow: var(--4u-shadow-md);
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

/* ============================================
   11. UTILITIES
   ============================================ */
.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.mt-0 {
  margin-top: 0;
}

.mt-1 {
  margin-top: 10px;
}

.mt-2 {
  margin-top: 20px;
}

.mt-3 {
  margin-top: 30px;
}

.mt-4 {
  margin-top: 40px;
}

.mt-5 {
  margin-top: 50px;
}

.mb-0 {
  margin-bottom: 0;
}

.mb-1 {
  margin-bottom: 10px;
}

.mb-2 {
  margin-bottom: 20px;
}

.mb-3 {
  margin-bottom: 30px;
}

.mb-4 {
  margin-bottom: 40px;
}

.mb-5 {
  margin-bottom: 50px;
}

.pt-0 {
  padding-top: 0;
}

.pt-1 {
  padding-top: 10px;
}

.pt-2 {
  padding-top: 20px;
}

.pt-3 {
  padding-top: 30px;
}

.pt-4 {
  padding-top: 40px;
}

.pt-5 {
  padding-top: 50px;
}

.pb-0 {
  padding-bottom: 0;
}

.pb-1 {
  padding-bottom: 10px;
}

.pb-2 {
  padding-bottom: 20px;
}

.pb-3 {
  padding-bottom: 30px;
}

.pb-4 {
  padding-bottom: 40px;
}

.pb-5 {
  padding-bottom: 50px;
}

.d-none {
  display: none;
}

.d-block {
  display: block;
}

.d-inline-block {
  display: inline-block;
}

.d-flex {
  display: flex;
}

.d-grid {
  display: grid;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.align-center {
  align-items: center;
}

.flex-wrap {
  flex-wrap: wrap;
}

.bg-white {
  background: var(--4u-bg-white);
}

.bg-light {
  background: var(--4u-bg-light);
}

.bg-primary {
  background: var(--4u-primary);
}

.bg-secondary {
  background: var(--4u-secondary);
}

.text-primary {
  color: var(--4u-primary);
}

.text-secondary {
  color: var(--4u-secondary);
}

.text-gray {
  color: var(--4u-text-gray);
}

.text-white {
  color: white;
}

/* ============================================
   12. ANIMATIONS
   ============================================ */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
.animate-fadeIn {
  animation: fadeIn 0.5s ease-in;
}

.animate-slideInUp {
  animation: slideInUp 0.5s ease-out;
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

.animate-pulse {
  animation: pulse 2s ease-in-out infinite;
}

/* ============================================
   13. WORDPRESS BLOCKS
   ============================================ */
.wp-block-image {
  margin: 30px 0;
}
.wp-block-image img {
  max-width: 100%;
  height: auto;
  border-radius: var(--4u-radius);
}

.wp-block-gallery {
  margin: 30px 0;
}

.wp-block-quote {
  border-left: 4px solid var(--4u-primary);
  padding-left: 20px;
  margin: 30px 0;
  font-style: italic;
  color: var(--4u-text-gray);
}

/* ============================================
   14. ACCESSIBILITY
   ============================================ */
.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 999;
}

.screen-reader-text {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0 !important;
  border: 0 !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden;
}

/* ============================================
   15. RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 1024px) {
  .hero .hero-content {
    gap: 40px;
  }
}
@media (max-width: 768px) {
  .hero {
    padding: 60px 5%;
  }
  .hero .hero-content {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero .hero-text h1 {
    font-size: 36px;
  }
  .hero .hero-buttons {
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }
  .hero .hero-buttons .btn {
    width: 100%;
    max-width: 300px;
  }
  .demo-cookie-banner,
  .demo-map-widget {
    margin: 40px auto 0;
    max-width: 100%;
  }
  .features-grid,
  .pricing-grid {
    grid-template-columns: 1fr;
  }
  .price-card.featured {
    transform: scale(1);
  }
  .fouruweb-main .page-hero-mini .page-title {
    font-size: 32px;
  }
}
@media (max-width: 480px) {
  .container {
    padding: 0 15px;
  }
  .hero {
    padding: 40px 5%;
  }
  .features,
  .pricing {
    padding: 60px 5%;
  }
}
/* ============================================
   17. COMPARISON TABLES
   ============================================ */
.comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  max-width: var(--4u-max-width);
  margin: 40px auto;
}
@media (max-width: 768px) {
  .comparison-grid {
    grid-template-columns: 1fr;
  }
}

.comparison-card {
  padding: 30px;
  border-radius: 10px;
  background: white;
  box-shadow: var(--4u-shadow-sm);
}
.comparison-card.osm {
  border: 2px solid var(--4u-success);
  background: #f0f9ff;
}
.comparison-card.osm h3 {
  color: var(--4u-success);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.comparison-card.osm h3 img {
  display: inline-block;
  vertical-align: middle;
}
.comparison-card.google {
  border: 2px solid var(--4u-danger);
  background: #fff5f5;
}
.comparison-card.google h3 {
  color: var(--4u-danger);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.comparison-card.google h3 img {
  display: inline-block;
  vertical-align: middle;
}
.comparison-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.comparison-card ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.comparison-card ul li:last-child {
  border-bottom: none;
}
.comparison-card ul li img {
  flex-shrink: 0;
  display: inline-block;
}

/* Why OSM Section specific styles */
.why-osm {
  padding: 60px 5%;
  background: var(--4u-bg-light);
}
.why-osm .section-header {
  margin-bottom: 40px;
}

/* ============================================
   18. PRINT STYLES
   ============================================ */
@media print {
  .fouruweb-header,
  .fouruweb-footer,
  .hero-buttons,
  .btn-buy,
  .demo-cookie-banner,
  .demo-map-widget,
  .mobile-menu-toggle {
    display: none !important;
  }
}
/**
 * @file main4u.scss
 *
 * @description
 * Main SCSS file using @use and @forward pattern
 * This file should be compiled to main4u.css
 *
 * @version 2.0.0
 * @created 20250114-221000
 * @modified 20251008-144218
 *
 * @author Frank Hackenberg
 * @author_uri https://foryourweb.de
 * Copyright (c) [fh] - 4UWeb
 *
 * @package AstraChild
 *
 * @license GPL-3.0-or-later
 * @license_uri https://www.gnu.org/licenses/gpl-3.0.html
 */
/**
 * @file _buttons4u.scss
 *
 * @description
 * Unified button system for all pages.
 * Consistent sizing, colors, and hover effects across entire site.
 * Button classes renamed: btn-left/middle/right → btn-first/second/third
 *
 * @version 2.0.0
 * @created 20251101-105420
 * @modified 20251101-124139
 *
 * @author Frank Hackenberg
 * @author_uri https://foryourweb.de
 * Copyright (c) [fh] - 4UWeb
 *
 * @package AstraChild
 *
 * @license GPL-3.0-or-later
 * @license_uri https://www.gnu.org/licenses/gpl-3.0.html
 */
/* ========================================
   BUTTON SYSTEM GUIDELINES
   ======================================== */
/**
 * UNIFIED BUTTON SYSTEM
 *
 * ALL buttons use consistent sizing and behavior.
 * Only colors change based on context (checkout, single, grouped).
 *
 *
 * SIZE CLASSES:
 * --------------
 * .btn-large  - Large buttons (special cases)
 * .btn-normal - DEFAULT size for all buttons
 * .btn-small  - Small buttons (inline, compact areas)
 *
 *
 * BUTTON CATEGORIES:
 * ------------------
 *
 * 1. CHECKOUT/CTA BUTTONS (Primary Actions)
 *    - Class: .btn-checkout or .btn-cta
 *    - Background: Gradient (Navy Blue → Turquoise)
 *    - Color: White
 *    - Use: Main call-to-action, purchase, download
 *
 * 2. SINGLE BUTTON (One button in element)
 *    - Class: .btn-single
 *    - Background: Navy Blue (#073a6a)
 *    - Hover: Turquoise (#669999)
 *    - Color: White
 *    - Use: Standalone actions
 *
 * 3. TWO BUTTONS (Side by side)
 *    - Left: .btn-first
 *      • Background: White (#fff)
 *      • Color: Navy Blue (#073a6a)
 *      • Hover: Coral (#ff6b35)
 *    - Right: .btn-third
 *      • Background: Transparent
 *      • Border: 2px solid white
 *      • Color: White
 *      • Hover: Coral background + border
 *
 * 4. THREE BUTTONS (Side by side)
 *    - Left: .btn-first (same as 2-button group)
 *    - Middle: .btn-second (same as .btn-single)
 *    - Right: .btn-third (same as 2-button group)
 *
 *
 * ADDITIONAL STATES:
 * ------------------
 * .btn-disabled  - Disabled state (not clickable)
 * .btn-loading   - Loading state (for async actions)
 *
 *
 * USAGE EXAMPLES:
 * ---------------
 *
 * <!-- Checkout Button -->
 * <button class="btn-checkout btn-normal">Jetzt kaufen</button>
 *
 * <!-- Single Button -->
 * <button class="btn-single btn-normal">Speichern</button>
 *
 * <!-- Two Buttons -->
 * <div class="btn-group-2">
 *   <button class="btn-first btn-normal">Bestätigen</button>
 *   <button class="btn-third btn-normal">Abbrechen</button>
 * </div>
 *
 * <!-- Three Buttons -->
 * <div class="btn-group-3">
 *   <button class="btn-first btn-normal">Zurück</button>
 *   <button class="btn-second btn-normal">Speichern</button>
 *   <button class="btn-third btn-normal">Abbrechen</button>
 * </div>
 */
/* ========================================
   BASE BUTTON STYLES
   ======================================== */
.btn-checkout,
.btn-cta,
.btn-single,
.btn-first,
.btn-second,
.btn-third,
.btn-fourth,
.btn-download {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  outline: none;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: inherit;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  line-height: 16px;
  border-radius: 8px;
  transition: all 0.3s ease;
}
.btn-checkout img,
.btn-checkout svg,
.btn-cta img,
.btn-cta svg,
.btn-single img,
.btn-single svg,
.btn-first img,
.btn-first svg,
.btn-second img,
.btn-second svg,
.btn-third img,
.btn-third svg,
.btn-fourth img,
.btn-fourth svg,
.btn-download img,
.btn-download svg {
  flex-shrink: 0;
  filter: none !important;
  opacity: 1 !important;
}
.btn-checkout:hover:not(.btn-disabled):not([disabled]),
.btn-cta:hover:not(.btn-disabled):not([disabled]),
.btn-single:hover:not(.btn-disabled):not([disabled]),
.btn-first:hover:not(.btn-disabled):not([disabled]),
.btn-second:hover:not(.btn-disabled):not([disabled]),
.btn-third:hover:not(.btn-disabled):not([disabled]),
.btn-fourth:hover:not(.btn-disabled):not([disabled]),
.btn-download:hover:not(.btn-disabled):not([disabled]) {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.btn-checkout:active:not(.btn-disabled):not([disabled]),
.btn-cta:active:not(.btn-disabled):not([disabled]),
.btn-single:active:not(.btn-disabled):not([disabled]),
.btn-first:active:not(.btn-disabled):not([disabled]),
.btn-second:active:not(.btn-disabled):not([disabled]),
.btn-third:active:not(.btn-disabled):not([disabled]),
.btn-fourth:active:not(.btn-disabled):not([disabled]),
.btn-download:active:not(.btn-disabled):not([disabled]) {
  transform: translateY(0);
}

/* ========================================
   SIZE VARIANTS
   ======================================== */
.btn-large {
  padding: 18px 36px;
  font-size: 18px;
  border-radius: 10px;
}

.btn-normal {
  padding: 14px 28px;
  font-size: 16px;
  border-radius: 8px;
}

.btn-small {
  padding: 10px 20px;
  font-size: 14px;
  border-radius: 6px;
}

/* ========================================
   BUTTON CATEGORIES - COLORS & EFFECTS
   ======================================== */
/**
 * 1. CHECKOUT/CTA BUTTONS
 * Primary action buttons with gradient
 */
.btn-checkout,
.btn-cta {
  background: linear-gradient(135deg, #073a6a 0%, #669999 100%);
  color: #fff;
  border: none;
}
.btn-checkout:hover:not(.btn-disabled):not([disabled]),
.btn-cta:hover:not(.btn-disabled):not([disabled]) {
  background: linear-gradient(135deg, #669999 0%, #073a6a 100%);
  box-shadow: 0 8px 25px rgba(7, 58, 106, 0.4);
}

/**
 * 2. SINGLE BUTTON
 * One button in element
 */
.btn-single {
  background: #073a6a;
  color: #fff;
  border: 2px solid lightgray;
}
.btn-single:hover:not(.btn-disabled):not([disabled]) {
  background: #669999;
}

/**
 * 3. TWO BUTTONS GROUP
 * Left and right buttons side by side
 */
.btn-group-2 {
  display: flex;
  gap: 15px;
  align-items: center;
}
.btn-group-2 .btn-first {
  background: #fff;
  color: #073a6a;
  border: 2px solid #073a6a;
}
.btn-group-2 .btn-first:hover:not(.btn-disabled):not([disabled]) {
  background: #ff6b35;
  color: #fff;
  border-color: #ff6b35;
}
.btn-group-2 .btn-second {
  background: #669999;
  color: #fff;
  border: 2px solid lightgray;
}
.btn-group-2 .btn-second:hover:not(.btn-disabled):not([disabled]) {
  background: #fff;
  color: #073a6a;
  border-color: #ff6b35;
}

/**
 * 4. THREE BUTTONS GROUP
 * Left, middle, and right buttons
 */
.btn-group-3 {
  display: flex;
  gap: 15px;
  align-items: center;
}
.btn-group-3 .btn-first {
  background: #fff;
  color: #073a6a;
  border: 2px solid #073a6a;
}
.btn-group-3 .btn-first:hover:not(.btn-disabled):not([disabled]) {
  background: #ff6b35;
  color: #fff;
  border-color: #fff;
}
.btn-group-3 .btn-second {
  background: #669999;
  color: #fff;
  border: 2px solid lightgray;
}
.btn-group-3 .btn-second:hover:not(.btn-disabled):not([disabled]) {
  background: #fff;
  color: #073a6a;
  border-color: #ff6b35;
}
.btn-group-3 .btn-third {
  background: #073a6a;
  color: #fff;
  border: 2px solid lightgray;
}
.btn-group-3 .btn-third:hover:not(.btn-disabled):not([disabled]) {
  background: #669999;
}

/**
 * 5. FOUR BUTTONS GROUP
 * Four buttons side by side (for license actions with invoice)
 */
.btn-group-4 {
  display: flex;
  gap: 15px;
  align-items: stretch;
  flex-direction: column;
  width: 100%;
}
.btn-group-4 .btn-first,
.btn-group-4 .btn-second,
.btn-group-4 .btn-third,
.btn-group-4 .btn-fourth {
  width: 100%;
  white-space: nowrap;
}
.btn-group-4 .btn-first {
  background: #fff;
  color: #073a6a;
  border: 2px solid #073a6a;
}
.btn-group-4 .btn-first:hover:not(.btn-disabled):not([disabled]) {
  background: #ff6b35;
  color: #fff;
  border-color: #fff;
}
.btn-group-4 .btn-second {
  background: #669999;
  color: #fff;
  border: 2px solid lightgray;
}
.btn-group-4 .btn-second:hover:not(.btn-disabled):not([disabled]) {
  background: #fff;
  color: #073a6a;
  border-color: #ff6b35;
}
.btn-group-4 .btn-third {
  background: #073a6a;
  color: #fff;
  border: 2px solid lightgray;
}
.btn-group-4 .btn-third:hover:not(.btn-disabled):not([disabled]) {
  background: #669999;
}
.btn-group-4 .btn-fourth {
  background: #ff6b35;
  color: #fff;
  border: 2px solid lightgray;
}
.btn-group-4 .btn-fourth:hover:not(.btn-disabled):not([disabled]) {
  background: #073a6a;
  color: #fff;
  border-color: #ff6b35;
}

/* ========================================
   SPECIAL BUTTON TYPES
   ======================================== */
/**
 * DOWNLOAD BUTTON
 * Used on Downloads page and Dashboard
 * Same as checkout button (gradient)
 */
.btn-download {
  background: linear-gradient(135deg, #073a6a 0%, #669999 100%);
  color: #fff;
  border: none;
}
.btn-download:hover:not(.btn-disabled):not([disabled]) {
  background: linear-gradient(135deg, #669999 0%, #073a6a 100%);
  box-shadow: 0 8px 25px rgba(7, 58, 106, 0.4);
}
.btn-download.loading {
  opacity: 0.7;
  cursor: not-allowed;
  pointer-events: none;
}
.btn-download.loading span::after {
  content: "...";
  animation: loading-dots 1.5s infinite;
}

/* ========================================
   BUTTON STATES
   ======================================== */
/**
 * DISABLED STATE
 * Applied to all button types
 */
.btn-checkout.btn-disabled,
.btn-cta.btn-disabled,
.btn-single.btn-disabled,
.btn-first.btn-disabled,
.btn-second.btn-disabled,
.btn-third.btn-disabled,
.btn-fourth.btn-disabled,
.btn-download.btn-disabled,
button[disabled],
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.btn-checkout.btn-disabled:hover,
.btn-cta.btn-disabled:hover,
.btn-single.btn-disabled:hover,
.btn-first.btn-disabled:hover,
.btn-second.btn-disabled:hover,
.btn-third.btn-disabled:hover,
.btn-fourth.btn-disabled:hover,
.btn-download.btn-disabled:hover,
button[disabled]:hover,
button:disabled:hover {
  transform: none;
  box-shadow: none;
}

/**
 * LOADING STATE
 * For async actions (downloads, submissions, etc.)
 */
.btn-loading {
  opacity: 0.7;
  cursor: not-allowed;
  pointer-events: none;
  position: relative;
}
.btn-loading span {
  opacity: 0.5;
}
.btn-loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */
@media (max-width: 768px) {
  .btn-group-2,
  .btn-group-3,
  .btn-group-4 {
    flex-direction: column;
  }
  .btn-group-2 .btn-first,
  .btn-group-2 .btn-second,
  .btn-group-2 .btn-third,
  .btn-group-2 .btn-fourth,
  .btn-group-3 .btn-first,
  .btn-group-3 .btn-second,
  .btn-group-3 .btn-third,
  .btn-group-3 .btn-fourth,
  .btn-group-4 .btn-first,
  .btn-group-4 .btn-second,
  .btn-group-4 .btn-third,
  .btn-group-4 .btn-fourth {
    width: 100%;
  }
  .btn-large {
    padding: 16px 32px;
    font-size: 16px;
  }
  .btn-normal {
    padding: 12px 24px;
    font-size: 15px;
  }
  .btn-small {
    padding: 8px 16px;
    font-size: 13px;
  }
}
/* ========================================
   ANIMATIONS
   ======================================== */
@keyframes loading-dots {
  0%, 20% {
    content: ".";
  }
  40% {
    content: "..";
  }
  60%, 100% {
    content: "...";
  }
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/**
 * Hide the destination input, label and remove button in the Leaflet Routing Machine panel
 * Blendet das Ziel-Eingabefeld, Label und Remove-Button im Routing-Panel aus
 */
/**
 * Hide the 'add waypoint' button
 * Blendet den Button zum Hinzufügen weiterer Zwischenziele aus
 */
div#osm-leaflet-map[data-behavior=osm-leaflet-map] {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  /**
   * Hide destination label and input by default
   * Versteckt Zielfeld und Label standardmäßig
   */
  /**
   * Styles for the route legend box
   * Styles für die Legenden-Box der Route
   */
}
div#osm-leaflet-map[data-behavior=osm-leaflet-map] #map {
  width: 100% !important;
  max-width: 100% !important;
  height: 500px !important;
  min-height: 320px !important;
  background: #eee;
  display: block !important;
  box-sizing: border-box;
}
div#osm-leaflet-map[data-behavior=osm-leaflet-map] #route-end,
div#osm-leaflet-map[data-behavior=osm-leaflet-map] label[for=route-end] {
  display: none;
}
div#osm-leaflet-map[data-behavior=osm-leaflet-map] div.leaflet-route-form {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: 14px;
  flex-direction: column;
  position: relative;
}
div#osm-leaflet-map[data-behavior=osm-leaflet-map] div.leaflet-route-form .input-autocomplete-wrapper {
  position: relative;
  display: block;
  width: 100%;
}
div#osm-leaflet-map[data-behavior=osm-leaflet-map] div.leaflet-route-form .input-autocomplete-wrapper .autocomplete-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10000;
  cursor: pointer;
  background-color: #333;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  display: none;
}
div#osm-leaflet-map[data-behavior=osm-leaflet-map] div.leaflet-route-form label {
  font-weight: 600;
  color: #222;
  margin-bottom: 4px;
}
div#osm-leaflet-map[data-behavior=osm-leaflet-map] div.leaflet-route-form input {
  color: #333 !important;
  background: #fff;
  border: 1px solid #bbb;
  border-radius: 6px;
  padding: 7px 11px;
  font-size: 1rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.0666666667);
  margin: 0;
  width: 100%;
  position: relative;
}
div#osm-leaflet-map[data-behavior=osm-leaflet-map] div.leaflet-route-form button {
  background: #222;
  color: #fff;
  font-weight: bold;
  border-radius: 6px;
  border: none;
  padding: 8px 18px;
  cursor: pointer;
  transition: background 0.2s;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.0666666667);
}
div#osm-leaflet-map[data-behavior=osm-leaflet-map] div.leaflet-route-form button:hover {
  background: #444;
}
div#osm-leaflet-map[data-behavior=osm-leaflet-map] div.leaflet-control-container .leaflet-control-zoom {
  color: #333 !important;
}
div#osm-leaflet-map[data-behavior=osm-leaflet-map] div.leaflet-control-container .leaflet-control-zoom a {
  color: #333 !important;
  text-decoration: none;
}
div#osm-leaflet-map[data-behavior=osm-leaflet-map] div.leaflet-control-container .leaflet-control-zoom a span {
  color: #333 !important;
}
div#osm-leaflet-map[data-behavior=osm-leaflet-map] div.leaflet-control-container .leaflet-control-zoom a:hover {
  color: #000 !important;
}
div#osm-leaflet-map[data-behavior=osm-leaflet-map] div.leaflet-control-container .leaflet-control-attribution {
  border: 1px solid #ccc !important;
  color: #333 !important;
  background: rgba(255, 255, 255, 0.85) !important;
  font-size: 0.6rem;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.5333333333);
  padding: 2px 10px;
}
div#osm-leaflet-map[data-behavior=osm-leaflet-map] div.leaflet-control-container .leaflet-control-attribution a {
  color: #333 !important;
  text-decoration: none;
}
div#osm-leaflet-map[data-behavior=osm-leaflet-map] div.leaflet-control-container .leaflet-control-attribution a:hover {
  color: #000 !important;
}
div#osm-leaflet-map[data-behavior=osm-leaflet-map] div.leaflet-popup-pane .leaflet-popup .leaflet-popup-content-wrapper .leaflet-popup-content {
  color: #333 !important;
}
div#osm-leaflet-map[data-behavior=osm-leaflet-map] div.leaflet-popup-pane .leaflet-popup .leaflet-popup-content-wrapper .leaflet-popup-content a {
  color: #333 !important;
  text-decoration: none;
}
div#osm-leaflet-map[data-behavior=osm-leaflet-map] div.leaflet-popup-pane .leaflet-popup .leaflet-popup-content-wrapper .leaflet-popup-content a:hover {
  color: #000 !important;
}
div#osm-leaflet-map[data-behavior=osm-leaflet-map] div#legend.route-legend {
  display: none;
  margin: 18px 0 0 0;
  padding: 16px 18px 12px 18px;
  border-radius: 10px;
  background: #f8f9fa;
  color: #333 !important;
  font-size: 1rem;
  min-width: 250px;
  line-height: 1.5;
}
div#osm-leaflet-map[data-behavior=osm-leaflet-map] div#legend.route-legend * {
  color: #333 !important;
}
div#osm-leaflet-map[data-behavior=osm-leaflet-map] div#legend.route-legend strong {
  color: #333 !important;
  margin-bottom: 15px;
  display: inline-block;
}
div#osm-leaflet-map[data-behavior=osm-leaflet-map] div#legend.route-legend ol {
  margin: 0 0 0 24px;
  padding: 0;
}
div#osm-leaflet-map[data-behavior=osm-leaflet-map] div#legend.route-legend li {
  margin-bottom: 0.5em;
  color: #333 !important;
}
div#osm-leaflet-map[data-behavior=osm-leaflet-map] .leaflet-tile-container img {
  position: absolute !important;
}
div#osm-leaflet-map[data-behavior=osm-leaflet-map] .spinner-wrapper {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.5);
  z-index: 1000;
  pointer-events: all;
}
div#osm-leaflet-map[data-behavior=osm-leaflet-map] .spinner-wrapper .spinner {
  width: 32px;
  height: 32px;
  border: 4px solid #eee;
  border-top: 4px solid #666;
  border-radius: 50%;
  animation: spinner-rotate 1s linear infinite;
  box-sizing: content-box;
}
@keyframes spinner-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}/*# sourceMappingURL=main4u.css.map */