@charset "UTF-8";
/**
 * @file page-templates.scss
 *
 * @description
 * Main SCSS file using @use and @forward pattern.
 * All styles are organized in /partials/ folder.
 *
 * @version 3.0.0
 * @created 20250117-153000
 * @modified 20251008-144218
 *
 * @author Frank Hackenberg
 * @author_uri https://foryourweb.de
 * Copyright (c) [fh] - 4UWeb
 *
 * @package AstraChild
 *
 * @dependencies
 * All partial files in /partials/ folder
 *
 * @license GPL-3.0-or-later
 * @license_uri https://www.gnu.org/licenses/gpl-3.0.html
 */
/**
 * @file _index.scss
 *
 * @description
 * Central index file that forwards all partials
 * Allows single @use statement in main SCSS file
 *
 * @version 1.0.8
 * @created 20251008-144218
 * @modified 20251116-112744
 *
 * @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 _index.scss
 *
 * @description
 * Central index file that forwards all partials
 * Allows single @use statement in main SCSS file
 *
 * @version 1.0.8
 * @created 20251008-144218
 * @modified 20251116-112744
 *
 * @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) */
}
.fouruweb-header .nav-container {
  max-width: var(--4u-max-width);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.fouruweb-header {
  /* Better spacing */
}
.fouruweb-header .fouruweb-nav {
  padding: 12px 20px;
}
.fouruweb-header .site-branding {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  min-width: 222px;
}
.fouruweb-header {
  /* Logo and Title Alignment */
}
.fouruweb-header .site-title-link {
  display: flex;
  align-items: center;
  gap: 15px;
  text-decoration: none;
  position: relative;
  /* Let WordPress handle logo sizing */
}
.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 {
  /* Respect WordPress inline styles for logo */
}
.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 - Text above site title (20251110-131118) */
}
.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;
  white-space: nowrap;
  min-width: 150px;
}
.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 - Merged from _custom4u.scss (20251121-090056) */
}
.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 */
}
.fouruweb-header .site-description {
  color: var(--4u-text-gray);
  font-size: 14px;
  margin: 0;
}
.fouruweb-header {
  /* Navigation Menu - Merged from _custom4u.scss (20251121-090056) */
}
.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 Menus - Merged from _custom4u.scss (20251121-090056) */
}
.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 - Hidden, use burger menu instead (20251109-170000) */
}
.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;
}
.fouruweb-header .nav-actions .widget {
  margin: 0;
}
.fouruweb-header .nav-actions {
  /* Merged from _custom4u.scss (20251121-090056) */
}
.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 {
  /* ========================================
     BADGES (Legacy - can be removed if not used)
     ======================================== */
  /* Badge styling - Enhanced design with icons */
}
.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 */
}
.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 {
  /* Badge hover effect */
}
.fouruweb-header .header-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.fouruweb-header {
  /* Plugin Shop Badge - Coral with puzzle icon */
}
.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 {
  /* Webdev Badge - Navy Blue with laptop icon */
}
.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 {
  /* ========================================
     ACCOUNT BUTTON & ICON BUTTONS
     ======================================== */
  /* Account button improvements - works for both <a> and <button> */
}
.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 buttons with tooltips - FIXED */
}
.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;
}
.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 {
  /* Exit icon - flip horizontally to point right */
}
.fouruweb-header .icon-btn .dashicons-exit {
  transform: scaleX(-1);
}
.fouruweb-header .icon-btn {
  /* Tooltip styling */
}
.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 {
  /* Header actions container */
}
.fouruweb-header .nav-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}
.fouruweb-header {
  /* ========================================
     MOBILE MENU TOGGLE (BURGER MENU)
     ======================================== */
  /* Mobile menu toggle button - ALWAYS VISIBLE (20251109-162224) */
}
.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 */
}
.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 effect */
}
.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/Open state */
}
.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 state for accessibility */
}
.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-panel.active {
  right: 0;
}
.mobile-menu-panel {
  /* Mobile menu items */
}
.mobile-menu-panel .mobile-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.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 styling */
}
.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;
  }
  .fouruweb-header .fouruweb-nav {
    padding: 15px 5px;
  }
  .fouruweb-header .nav-container {
    grid-template-columns: 1fr auto;
  }
  .fouruweb-header {
    /* Show mobile menu toggle */
  }
  .fouruweb-header .mobile-menu-toggle {
    display: flex;
  }
  .fouruweb-header {
    /* Hide badge on mobile */
  }
  .fouruweb-header .header-badge {
    display: none;
  }
}
/* Small mobile adjustments - Optimize spacing (< 540px) */
@media (max-width: 539px) {
  .fouruweb-header {
    /* Reduce header padding */
  }
  .fouruweb-header .fouruweb-nav {
    padding: 8px 12px;
  }
  .fouruweb-header {
    /* Reduce nav-container gap */
  }
  .fouruweb-header .nav-container {
    gap: 10px;
  }
  .fouruweb-header {
    /* Logo and Title adjustments */
  }
  .fouruweb-header .site-title-link {
    /* Smaller logo */
  }
  .fouruweb-header .site-title-link .custom-logo {
    max-height: 50px !important;
  }
  .fouruweb-header .site-title-link {
    /* Mobile site title styling (20251120-160947) */
  }
  .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 {
    /* Mobile domain label styling (20251120-160947) */
  }
  .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 {
    /* Compact account button - only icon */
  }
  .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 {
    /* Reduce logout icon margin */
  }
  .fouruweb-header .icon-btn {
    margin-left: 5px;
    width: 32px;
    height: 32px;
  }
  .fouruweb-header {
    /* Reduce burger menu margin */
  }
  .fouruweb-header .mobile-menu-toggle {
    margin-left: 8px;
    width: 36px;
    height: 36px;
  }
  .fouruweb-header {
    /* Reduce nav-actions gap */
  }
  .fouruweb-header .nav-actions {
    gap: 3px;
  }
}
/* Extra small devices - Further optimization (< 375px) */
@media (max-width: 374px) {
  .fouruweb-header {
    /* Even smaller padding */
  }
  .fouruweb-header .fouruweb-nav {
    padding: 6px 8px;
  }
  .fouruweb-header {
    /* Logo adjustments */
  }
  .fouruweb-header .site-title-link {
    /* Minimal logo */
  }
  .fouruweb-header .site-title-link .custom-logo {
    max-height: 40px !important;
  }
  .fouruweb-header .site-title-link {
    /* Extra small site title (20251121-090056) */
  }
  .fouruweb-header .site-title-link .site-title {
    font-size: 16px;
    top: 14px;
    left: -26px;
  }
  .fouruweb-header .site-title-link {
    /* Extra small domain label (20251121-090056) */
  }
  .fouruweb-header .site-title-link .domain-label {
    left: 43px;
    top: 12px;
  }
  .fouruweb-header {
    /* Hide logout icon on very small screens */
  }
  .fouruweb-header .icon-btn {
    display: none;
  }
}
/**
 * @file _index.scss
 *
 * @description
 * Central index file that forwards all partials
 * Allows single @use statement in main SCSS file
 *
 * @version 1.0.8
 * @created 20251008-144218
 * @modified 20251116-112744
 *
 * @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 _index.scss
 *
 * @description
 * Central index file that forwards all partials
 * Allows single @use statement in main SCSS file
 *
 * @version 1.0.8
 * @created 20251008-144218
 * @modified 20251116-112744
 *
 * @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 _animations.scss
 *
 * @description
 * Global animation definitions used throughout the project
 * Includes fadeIn, pulse, spin animations
 *
 * @version 1.0.2
 * @created 20250926-161332
 * @modified 20250926-171251
 *
 * @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
 */
/* ========================================
   ANIMATIONS
   ======================================== */
/**
 * Fade in with upward movement
 * Used for hero titles and content
 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/**
 * Spinning animation for loading indicators
 */
@keyframes spin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
/**
 * Alternative spin animation without translate
 * For elements that are already positioned
 */
@keyframes spinSimple {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/**
 * Pulse effect for buttons and icons
 * Creates expanding shadow effect
 */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 51, 102, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(0, 51, 102, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 51, 102, 0);
  }
}
/**
 * Scale pulse for icons
 * Simple scale animation
 */
@keyframes scalePulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}
/**
 * Pulse Once - Single pulse animation for hero icons
 * Runs only once on hover
 * Added 20250926-170634
 * Updated 20250926-171251: Made slower (1.2s instead of 0.6s)
 */
@keyframes pulseOnce {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
    transform: scale(1.05);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    transform: scale(1);
  }
}
/**
 * @file _index.scss
 *
 * @description
 * Central index file that forwards all partials
 * Allows single @use statement in main SCSS file
 *
 * @version 1.0.8
 * @created 20251008-144218
 * @modified 20251116-112744
 *
 * @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);
  }
}
/**
 * @file _index.scss
 *
 * @description
 * Central index file that forwards all partials
 * Allows single @use statement in main SCSS file
 *
 * @version 1.0.8
 * @created 20251008-144218
 * @modified 20251116-112744
 *
 * @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 _hero-sections.scss
 *
 * @description
 * UNIVERSAL Hero System for ALL pages
 * Consistent structure, styling, and behavior across entire site
 * Only backgrounds, text content, and icons differ between pages
 *
 * @version 2.1.0
 * @created 20250926-161333
 * @modified 20251110-140500
 *
 * @author Frank Hackenberg
 * @author_uri https://foryourweb.de
 * Copyright (c) [fh] - 4UWeb
 *
 * @package AstraChild
 *
 * @changelog
 * [20251110-140500] - Added CCT4U Demo page hero with 2-column layout
 *                   - Added Features Section, Demo Section, CTA Section
 *                   - Browser mockup styling for demo preview
 * [20251104-162220] - MAJOR: Universal Hero System implemented
 *                   - ALL heroes now use consistent CSS
 *                   - Padding standardized: 4rem 2rem
 *                   - Title color: #1e293b
 *                   - Subtitle: white, opacity 0.95
 *
 * @license GPL-3.0-or-later
 * @license_uri https://www.gnu.org/licenses/gpl-3.0.html
 */
/* ========================================
   UNIVERSAL HERO SYSTEM
   ALL HEROES USE THIS BASE STYLING
   ======================================== */
/**
 * Universal base hero section styles
 * Applied to ALL hero sections across the site
 *
 * IMPORTANT: Do NOT create separate hero CSS in other files!
 * All heroes must use .hero-section as base class
 * Use modifier classes for different backgrounds only
 */
.hero-section,
.contact-hero-section,
.documentation-hero-section,
.downloads-hero,
.login-register-hero,
.forgot-password-hero,
.payment-success-hero-section,
.dashboard-hero-section,
.account-settings-hero,
.legal-hero {
  /* Layout */
  position: relative;
  padding: 4rem 2rem;
  overflow: hidden;
  margin-bottom: 60px;
  text-align: center;
  /* Default background - can be overridden by modifier classes */
  background: linear-gradient(135deg, #073a6a 0%, #669999 100%);
  /* Text color */
  color: white;
}
.hero-section a,
.contact-hero-section a,
.documentation-hero-section a,
.downloads-hero a,
.login-register-hero a,
.forgot-password-hero a,
.payment-success-hero-section a,
.dashboard-hero-section a,
.account-settings-hero a,
.legal-hero a {
  color: white;
  text-decoration: underline;
  transition: color 0.3s ease;
}
.hero-section a:hover,
.contact-hero-section a:hover,
.documentation-hero-section a:hover,
.downloads-hero a:hover,
.login-register-hero a:hover,
.forgot-password-hero a:hover,
.payment-success-hero-section a:hover,
.dashboard-hero-section a:hover,
.account-settings-hero a:hover,
.legal-hero a:hover {
  color: #ff6b35;
}
.hero-section .hero-title,
.hero-section .legal-hero-title,
.contact-hero-section .hero-title,
.contact-hero-section .legal-hero-title,
.documentation-hero-section .hero-title,
.documentation-hero-section .legal-hero-title,
.downloads-hero .hero-title,
.downloads-hero .legal-hero-title,
.login-register-hero .hero-title,
.login-register-hero .legal-hero-title,
.forgot-password-hero .hero-title,
.forgot-password-hero .legal-hero-title,
.payment-success-hero-section .hero-title,
.payment-success-hero-section .legal-hero-title,
.dashboard-hero-section .hero-title,
.dashboard-hero-section .legal-hero-title,
.account-settings-hero .hero-title,
.account-settings-hero .legal-hero-title,
.legal-hero .hero-title,
.legal-hero .legal-hero-title {
  font-size: 48px;
  font-weight: 700;
  margin: 0 0 20px;
  color: #1e293b;
  animation: fadeInUp 0.8s ease;
}
.hero-section .hero-title .inline-icon,
.hero-section .legal-hero-title .inline-icon,
.contact-hero-section .hero-title .inline-icon,
.contact-hero-section .legal-hero-title .inline-icon,
.documentation-hero-section .hero-title .inline-icon,
.documentation-hero-section .legal-hero-title .inline-icon,
.downloads-hero .hero-title .inline-icon,
.downloads-hero .legal-hero-title .inline-icon,
.login-register-hero .hero-title .inline-icon,
.login-register-hero .legal-hero-title .inline-icon,
.forgot-password-hero .hero-title .inline-icon,
.forgot-password-hero .legal-hero-title .inline-icon,
.payment-success-hero-section .hero-title .inline-icon,
.payment-success-hero-section .legal-hero-title .inline-icon,
.dashboard-hero-section .hero-title .inline-icon,
.dashboard-hero-section .legal-hero-title .inline-icon,
.account-settings-hero .hero-title .inline-icon,
.account-settings-hero .legal-hero-title .inline-icon,
.legal-hero .hero-title .inline-icon,
.legal-hero .legal-hero-title .inline-icon {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  margin-top: -5px;
}
.hero-section .hero-subtitle,
.hero-section .legal-hero-subtitle,
.contact-hero-section .hero-subtitle,
.contact-hero-section .legal-hero-subtitle,
.documentation-hero-section .hero-subtitle,
.documentation-hero-section .legal-hero-subtitle,
.downloads-hero .hero-subtitle,
.downloads-hero .legal-hero-subtitle,
.login-register-hero .hero-subtitle,
.login-register-hero .legal-hero-subtitle,
.forgot-password-hero .hero-subtitle,
.forgot-password-hero .legal-hero-subtitle,
.payment-success-hero-section .hero-subtitle,
.payment-success-hero-section .legal-hero-subtitle,
.dashboard-hero-section .hero-subtitle,
.dashboard-hero-section .legal-hero-subtitle,
.account-settings-hero .hero-subtitle,
.account-settings-hero .legal-hero-subtitle,
.legal-hero .hero-subtitle,
.legal-hero .legal-hero-subtitle {
  font-size: 24px;
  font-weight: 400;
  margin: 0 0 20px;
  color: white;
  opacity: 0.95;
  animation: fadeInUp 0.8s ease 0.2s backwards;
}
.hero-section .hero-content,
.hero-section .legal-hero-content,
.hero-section .contact-hero-content,
.hero-section .documentation-hero-content,
.hero-section .dashboard-hero-content,
.hero-section .payment-success-hero-content,
.hero-section .hero-container,
.contact-hero-section .hero-content,
.contact-hero-section .legal-hero-content,
.contact-hero-section .contact-hero-content,
.contact-hero-section .documentation-hero-content,
.contact-hero-section .dashboard-hero-content,
.contact-hero-section .payment-success-hero-content,
.contact-hero-section .hero-container,
.documentation-hero-section .hero-content,
.documentation-hero-section .legal-hero-content,
.documentation-hero-section .contact-hero-content,
.documentation-hero-section .documentation-hero-content,
.documentation-hero-section .dashboard-hero-content,
.documentation-hero-section .payment-success-hero-content,
.documentation-hero-section .hero-container,
.downloads-hero .hero-content,
.downloads-hero .legal-hero-content,
.downloads-hero .contact-hero-content,
.downloads-hero .documentation-hero-content,
.downloads-hero .dashboard-hero-content,
.downloads-hero .payment-success-hero-content,
.downloads-hero .hero-container,
.login-register-hero .hero-content,
.login-register-hero .legal-hero-content,
.login-register-hero .contact-hero-content,
.login-register-hero .documentation-hero-content,
.login-register-hero .dashboard-hero-content,
.login-register-hero .payment-success-hero-content,
.login-register-hero .hero-container,
.forgot-password-hero .hero-content,
.forgot-password-hero .legal-hero-content,
.forgot-password-hero .contact-hero-content,
.forgot-password-hero .documentation-hero-content,
.forgot-password-hero .dashboard-hero-content,
.forgot-password-hero .payment-success-hero-content,
.forgot-password-hero .hero-container,
.payment-success-hero-section .hero-content,
.payment-success-hero-section .legal-hero-content,
.payment-success-hero-section .contact-hero-content,
.payment-success-hero-section .documentation-hero-content,
.payment-success-hero-section .dashboard-hero-content,
.payment-success-hero-section .payment-success-hero-content,
.payment-success-hero-section .hero-container,
.dashboard-hero-section .hero-content,
.dashboard-hero-section .legal-hero-content,
.dashboard-hero-section .contact-hero-content,
.dashboard-hero-section .documentation-hero-content,
.dashboard-hero-section .dashboard-hero-content,
.dashboard-hero-section .payment-success-hero-content,
.dashboard-hero-section .hero-container,
.account-settings-hero .hero-content,
.account-settings-hero .legal-hero-content,
.account-settings-hero .contact-hero-content,
.account-settings-hero .documentation-hero-content,
.account-settings-hero .dashboard-hero-content,
.account-settings-hero .payment-success-hero-content,
.account-settings-hero .hero-container,
.legal-hero .hero-content,
.legal-hero .legal-hero-content,
.legal-hero .contact-hero-content,
.legal-hero .documentation-hero-content,
.legal-hero .dashboard-hero-content,
.legal-hero .payment-success-hero-content,
.legal-hero .hero-container {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}
.hero-section .hero-icon-wrapper,
.hero-section .legal-hero-icon,
.contact-hero-section .hero-icon-wrapper,
.contact-hero-section .legal-hero-icon,
.documentation-hero-section .hero-icon-wrapper,
.documentation-hero-section .legal-hero-icon,
.downloads-hero .hero-icon-wrapper,
.downloads-hero .legal-hero-icon,
.login-register-hero .hero-icon-wrapper,
.login-register-hero .legal-hero-icon,
.forgot-password-hero .hero-icon-wrapper,
.forgot-password-hero .legal-hero-icon,
.payment-success-hero-section .hero-icon-wrapper,
.payment-success-hero-section .legal-hero-icon,
.dashboard-hero-section .hero-icon-wrapper,
.dashboard-hero-section .legal-hero-icon,
.account-settings-hero .hero-icon-wrapper,
.account-settings-hero .legal-hero-icon,
.legal-hero .hero-icon-wrapper,
.legal-hero .legal-hero-icon {
  margin-bottom: 30px;
}
.hero-section .hero-icon-wrapper .hero-icon,
.hero-section .hero-icon-wrapper img,
.hero-section .legal-hero-icon .hero-icon,
.hero-section .legal-hero-icon img,
.contact-hero-section .hero-icon-wrapper .hero-icon,
.contact-hero-section .hero-icon-wrapper img,
.contact-hero-section .legal-hero-icon .hero-icon,
.contact-hero-section .legal-hero-icon img,
.documentation-hero-section .hero-icon-wrapper .hero-icon,
.documentation-hero-section .hero-icon-wrapper img,
.documentation-hero-section .legal-hero-icon .hero-icon,
.documentation-hero-section .legal-hero-icon img,
.downloads-hero .hero-icon-wrapper .hero-icon,
.downloads-hero .hero-icon-wrapper img,
.downloads-hero .legal-hero-icon .hero-icon,
.downloads-hero .legal-hero-icon img,
.login-register-hero .hero-icon-wrapper .hero-icon,
.login-register-hero .hero-icon-wrapper img,
.login-register-hero .legal-hero-icon .hero-icon,
.login-register-hero .legal-hero-icon img,
.forgot-password-hero .hero-icon-wrapper .hero-icon,
.forgot-password-hero .hero-icon-wrapper img,
.forgot-password-hero .legal-hero-icon .hero-icon,
.forgot-password-hero .legal-hero-icon img,
.payment-success-hero-section .hero-icon-wrapper .hero-icon,
.payment-success-hero-section .hero-icon-wrapper img,
.payment-success-hero-section .legal-hero-icon .hero-icon,
.payment-success-hero-section .legal-hero-icon img,
.dashboard-hero-section .hero-icon-wrapper .hero-icon,
.dashboard-hero-section .hero-icon-wrapper img,
.dashboard-hero-section .legal-hero-icon .hero-icon,
.dashboard-hero-section .legal-hero-icon img,
.account-settings-hero .hero-icon-wrapper .hero-icon,
.account-settings-hero .hero-icon-wrapper img,
.account-settings-hero .legal-hero-icon .hero-icon,
.account-settings-hero .legal-hero-icon img,
.legal-hero .hero-icon-wrapper .hero-icon,
.legal-hero .hero-icon-wrapper img,
.legal-hero .legal-hero-icon .hero-icon,
.legal-hero .legal-hero-icon img {
  width: 80px;
  height: 80px;
  margin: 0 auto;
  display: block;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2));
}
.hero-section .hero-icon-wrapper .hero-icon,
.hero-section .legal-hero-icon .hero-icon,
.contact-hero-section .hero-icon-wrapper .hero-icon,
.contact-hero-section .legal-hero-icon .hero-icon,
.documentation-hero-section .hero-icon-wrapper .hero-icon,
.documentation-hero-section .legal-hero-icon .hero-icon,
.downloads-hero .hero-icon-wrapper .hero-icon,
.downloads-hero .legal-hero-icon .hero-icon,
.login-register-hero .hero-icon-wrapper .hero-icon,
.login-register-hero .legal-hero-icon .hero-icon,
.forgot-password-hero .hero-icon-wrapper .hero-icon,
.forgot-password-hero .legal-hero-icon .hero-icon,
.payment-success-hero-section .hero-icon-wrapper .hero-icon,
.payment-success-hero-section .legal-hero-icon .hero-icon,
.dashboard-hero-section .hero-icon-wrapper .hero-icon,
.dashboard-hero-section .legal-hero-icon .hero-icon,
.account-settings-hero .hero-icon-wrapper .hero-icon,
.account-settings-hero .legal-hero-icon .hero-icon,
.legal-hero .hero-icon-wrapper .hero-icon,
.legal-hero .legal-hero-icon .hero-icon {
  width: 120px;
  height: 120px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}
.hero-section .hero-icon-wrapper .hero-icon img,
.hero-section .legal-hero-icon .hero-icon img,
.contact-hero-section .hero-icon-wrapper .hero-icon img,
.contact-hero-section .legal-hero-icon .hero-icon img,
.documentation-hero-section .hero-icon-wrapper .hero-icon img,
.documentation-hero-section .legal-hero-icon .hero-icon img,
.downloads-hero .hero-icon-wrapper .hero-icon img,
.downloads-hero .legal-hero-icon .hero-icon img,
.login-register-hero .hero-icon-wrapper .hero-icon img,
.login-register-hero .legal-hero-icon .hero-icon img,
.forgot-password-hero .hero-icon-wrapper .hero-icon img,
.forgot-password-hero .legal-hero-icon .hero-icon img,
.payment-success-hero-section .hero-icon-wrapper .hero-icon img,
.payment-success-hero-section .legal-hero-icon .hero-icon img,
.dashboard-hero-section .hero-icon-wrapper .hero-icon img,
.dashboard-hero-section .legal-hero-icon .hero-icon img,
.account-settings-hero .hero-icon-wrapper .hero-icon img,
.account-settings-hero .legal-hero-icon .hero-icon img,
.legal-hero .hero-icon-wrapper .hero-icon img,
.legal-hero .legal-hero-icon .hero-icon img {
  width: 64px;
  height: 64px;
  filter: none;
}
.hero-section .success-checkmark,
.contact-hero-section .success-checkmark,
.documentation-hero-section .success-checkmark,
.downloads-hero .success-checkmark,
.login-register-hero .success-checkmark,
.forgot-password-hero .success-checkmark,
.payment-success-hero-section .success-checkmark,
.dashboard-hero-section .success-checkmark,
.account-settings-hero .success-checkmark,
.legal-hero .success-checkmark {
  width: 80px;
  height: 80px;
  margin: 0 auto 30px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}
.hero-section .success-checkmark svg,
.contact-hero-section .success-checkmark svg,
.documentation-hero-section .success-checkmark svg,
.downloads-hero .success-checkmark svg,
.login-register-hero .success-checkmark svg,
.forgot-password-hero .success-checkmark svg,
.payment-success-hero-section .success-checkmark svg,
.dashboard-hero-section .success-checkmark svg,
.account-settings-hero .success-checkmark svg,
.legal-hero .success-checkmark svg {
  width: 80px;
  height: 80px;
}
.hero-section:hover .hero-icon,
.hero-section:hover .success-checkmark,
.contact-hero-section:hover .hero-icon,
.contact-hero-section:hover .success-checkmark,
.documentation-hero-section:hover .hero-icon,
.documentation-hero-section:hover .success-checkmark,
.downloads-hero:hover .hero-icon,
.downloads-hero:hover .success-checkmark,
.login-register-hero:hover .hero-icon,
.login-register-hero:hover .success-checkmark,
.forgot-password-hero:hover .hero-icon,
.forgot-password-hero:hover .success-checkmark,
.payment-success-hero-section:hover .hero-icon,
.payment-success-hero-section:hover .success-checkmark,
.dashboard-hero-section:hover .hero-icon,
.dashboard-hero-section:hover .success-checkmark,
.account-settings-hero:hover .hero-icon,
.account-settings-hero:hover .success-checkmark,
.legal-hero:hover .hero-icon,
.legal-hero:hover .success-checkmark {
  animation: pulseOnce 1.2s ease-out;
}

.hero-cta.btn-group-2,
.hero-cta.btn-group-3 {
  justify-content: center;
}

/**
 * Floating background elements
 * Decorative elements for hero sections
 * Animations removed to prevent seasickness effect
 */
.hero-bg-elements {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}
.hero-bg-elements .floating-element {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
}
.hero-bg-elements .floating-element.element-1 {
  width: 300px;
  height: 300px;
  top: -150px;
  right: -100px;
}
.hero-bg-elements .floating-element.element-2 {
  width: 200px;
  height: 200px;
  bottom: -100px;
  left: -50px;
}
.hero-bg-elements .floating-element.element-3 {
  width: 150px;
  height: 150px;
  top: 50%;
  left: 10%;
}

/**
 * Special styles for specific hero sections
 */
.contact-hero-subtitle {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.9);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.8;
  animation: fadeInUp 0.8s ease 0.2s backwards;
}

.dashboard-hero-section {
  padding: 80px 20px;
}
.dashboard-hero-section .dashboard-hero-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  margin-bottom: 15px;
  color: white;
  animation: fadeInUp 0.8s ease;
}
.dashboard-hero-section .dashboard-hero-title .gradient-text {
  background: linear-gradient(to right, #fff, #f0f0f0);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.dashboard-hero-section .dashboard-hero-subtitle {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.9);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
  animation: fadeInUp 0.8s ease 0.2s backwards;
}

.payment-success-hero-section {
  padding: 100px 20px 80px;
}

/* ========================================
   CCT4U DEMO PAGE SPECIFIC STYLES
   ======================================== */
.cct4u-demo-hero .badge-demo {
  display: inline-block;
  background: #ff6b35;
  color: white;
  font-weight: 700;
  font-size: 16px;
  padding: 8px 20px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 20px;
  box-shadow: 0 4px 15px rgba(255, 107, 53, 0.4);
  animation: pulse-demo 2s ease-in-out infinite;
}
.cct4u-demo-hero .hero-buttons {
  margin-top: 30px;
}

.cct4u-screenshots-hero .badge-screenshots {
  display: inline-block;
  background: linear-gradient(135deg, var(--4u-blue-grey) 0%, var(--4u-cyan) 100%);
  color: white;
  font-weight: 700;
  font-size: 16px;
  padding: 8px 20px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 20px;
  box-shadow: 0 4px 15px rgba(91, 192, 222, 0.4);
}

.download-info {
  margin: 2rem 0;
  text-align: left;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.download-info ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.download-info li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.75rem 0;
  font-size: 1.1rem;
  color: white;
}
.download-info li .dashicons {
  color: #4caf50;
  font-size: 24px;
  flex-shrink: 0;
}

.features-section {
  padding: 80px 5%;
  background: #f9fafb;
}
.features-section .section-title {
  text-align: center;
  font-size: 42px;
  margin-bottom: 60px;
  color: var(--4u-primary);
}
.features-section .features-grid {
  max-width: var(--4u-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.features-section .feature-card {
  background: white;
  padding: 40px 30px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}
.features-section .feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.12);
}
.features-section .feature-card .feature-icon {
  width: 60px;
  height: 60px;
  background: var(--4u-gradient);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.features-section .feature-card .feature-icon .dashicons {
  color: white;
  font-size: 32px;
  width: 32px;
  height: 32px;
}
.features-section .feature-card h3 {
  font-size: 22px;
  margin-bottom: 15px;
  color: var(--4u-primary);
}
.features-section .feature-card p {
  color: #64748b;
  line-height: 1.6;
  margin: 0;
}

.demo-section {
  padding: 80px 5%;
  background: white;
}
.demo-section .section-title {
  text-align: center;
  font-size: 42px;
  margin-bottom: 20px;
  color: var(--4u-primary);
}
.demo-section .section-intro {
  text-align: center;
  font-size: 18px;
  color: #64748b;
  max-width: 700px;
  margin: 0 auto 40px;
}
.demo-section .demo-controls {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}
.demo-section .btn-demo {
  padding: 15px 30px;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.demo-section .btn-demo .dashicons {
  font-size: 20px;
  width: 20px;
  height: 20px;
}

.cta-section {
  padding: 80px 5%;
  background: var(--4u-gradient);
}
.cta-section .cta-box {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  color: white;
}
.cta-section .cta-box h2 {
  font-size: 42px;
  margin-bottom: 20px;
  color: white;
}
.cta-section .cta-box p {
  font-size: 20px;
  margin-bottom: 40px;
  opacity: 0.95;
}
.cta-section .cta-box .cta-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}
.cta-section .cta-box .cta-buttons .btn-lg {
  padding: 18px 36px;
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.cta-section .cta-box .cta-buttons .btn-lg .dashicons {
  font-size: 24px;
  width: 24px;
  height: 24px;
}

/* CCT4U Demo Responsive */
@media (max-width: 768px) {
  .cct4u-demo-hero .demo-credentials {
    padding: 15px 20px;
  }
  .cct4u-demo-hero .demo-credentials code {
    font-size: 14px;
  }
  .features-section {
    padding: 60px 5%;
  }
  .features-section .section-title {
    font-size: 32px;
    margin-bottom: 40px;
  }
  .features-section .features-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .demo-section,
  .cta-section {
    padding: 60px 5%;
  }
  .demo-section .section-title,
  .cta-section .section-title {
    font-size: 32px;
  }
  .demo-section .cta-box h2,
  .cta-section .cta-box h2 {
    font-size: 32px;
  }
  .demo-controls,
  .cta-buttons {
    flex-direction: column;
    align-items: center;
  }
  .demo-controls .btn,
  .cta-buttons .btn {
    width: 100%;
    max-width: 300px;
  }
}
/**
 * Universal Hero Section Responsive (20251104-162220)
 * Applied to ALL hero sections
 */
@media (max-width: 768px) {
  .hero-section,
  .contact-hero-section,
  .documentation-hero-section,
  .login-register-hero,
  .forgot-password-hero,
  .payment-success-hero-section,
  .dashboard-hero-section,
  .account-settings-hero,
  .legal-hero {
    padding: 3rem 1.5rem;
  }
  .hero-section .hero-title,
  .hero-section .legal-hero-title,
  .contact-hero-section .hero-title,
  .contact-hero-section .legal-hero-title,
  .documentation-hero-section .hero-title,
  .documentation-hero-section .legal-hero-title,
  .login-register-hero .hero-title,
  .login-register-hero .legal-hero-title,
  .forgot-password-hero .hero-title,
  .forgot-password-hero .legal-hero-title,
  .payment-success-hero-section .hero-title,
  .payment-success-hero-section .legal-hero-title,
  .dashboard-hero-section .hero-title,
  .dashboard-hero-section .legal-hero-title,
  .account-settings-hero .hero-title,
  .account-settings-hero .legal-hero-title,
  .legal-hero .hero-title,
  .legal-hero .legal-hero-title {
    font-size: 2rem;
  }
  .hero-section .hero-title .inline-icon,
  .hero-section .legal-hero-title .inline-icon,
  .contact-hero-section .hero-title .inline-icon,
  .contact-hero-section .legal-hero-title .inline-icon,
  .documentation-hero-section .hero-title .inline-icon,
  .documentation-hero-section .legal-hero-title .inline-icon,
  .login-register-hero .hero-title .inline-icon,
  .login-register-hero .legal-hero-title .inline-icon,
  .forgot-password-hero .hero-title .inline-icon,
  .forgot-password-hero .legal-hero-title .inline-icon,
  .payment-success-hero-section .hero-title .inline-icon,
  .payment-success-hero-section .legal-hero-title .inline-icon,
  .dashboard-hero-section .hero-title .inline-icon,
  .dashboard-hero-section .legal-hero-title .inline-icon,
  .account-settings-hero .hero-title .inline-icon,
  .account-settings-hero .legal-hero-title .inline-icon,
  .legal-hero .hero-title .inline-icon,
  .legal-hero .legal-hero-title .inline-icon {
    width: 36px;
    height: 36px;
  }
  .hero-section .hero-subtitle,
  .hero-section .legal-hero-subtitle,
  .contact-hero-section .hero-subtitle,
  .contact-hero-section .legal-hero-subtitle,
  .documentation-hero-section .hero-subtitle,
  .documentation-hero-section .legal-hero-subtitle,
  .login-register-hero .hero-subtitle,
  .login-register-hero .legal-hero-subtitle,
  .forgot-password-hero .hero-subtitle,
  .forgot-password-hero .legal-hero-subtitle,
  .payment-success-hero-section .hero-subtitle,
  .payment-success-hero-section .legal-hero-subtitle,
  .dashboard-hero-section .hero-subtitle,
  .dashboard-hero-section .legal-hero-subtitle,
  .account-settings-hero .hero-subtitle,
  .account-settings-hero .legal-hero-subtitle,
  .legal-hero .hero-subtitle,
  .legal-hero .legal-hero-subtitle {
    font-size: 1rem;
  }
  .hero-section .hero-icon-wrapper img,
  .hero-section .legal-hero-icon img,
  .contact-hero-section .hero-icon-wrapper img,
  .contact-hero-section .legal-hero-icon img,
  .documentation-hero-section .hero-icon-wrapper img,
  .documentation-hero-section .legal-hero-icon img,
  .login-register-hero .hero-icon-wrapper img,
  .login-register-hero .legal-hero-icon img,
  .forgot-password-hero .hero-icon-wrapper img,
  .forgot-password-hero .legal-hero-icon img,
  .payment-success-hero-section .hero-icon-wrapper img,
  .payment-success-hero-section .legal-hero-icon img,
  .dashboard-hero-section .hero-icon-wrapper img,
  .dashboard-hero-section .legal-hero-icon img,
  .account-settings-hero .hero-icon-wrapper img,
  .account-settings-hero .legal-hero-icon img,
  .legal-hero .hero-icon-wrapper img,
  .legal-hero .legal-hero-icon img {
    width: 60px;
    height: 60px;
  }
  .contact-hero-subtitle {
    font-size: 1.1rem;
  }
  .dashboard-hero-section {
    padding: 50px 20px;
  }
  .dashboard-hero-section .dashboard-hero-title {
    font-size: 1.8rem;
  }
}
/* ========================================
   ANIMATIONS
   ======================================== */
@keyframes pulse-demo {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.4);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 6px 25px rgba(255, 107, 53, 0.6);
  }
}
/**
 * @file _index.scss
 *
 * @description
 * Central index file that forwards all partials
 * Allows single @use statement in main SCSS file
 *
 * @version 1.0.8
 * @created 20251008-144218
 * @modified 20251116-112744
 *
 * @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 _screenshots4u.scss
 *
 * @description
 * Screenshot Section and Modal Styles for CCT4U Screenshots Page
 * Extracted from _hero-sections.scss for better architecture
 *
 * @version 1.0.0
 * @created 20251116-112744
 * @modified 20251116-112744
 *
 * @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
 */
/* ============================================
   SCREENSHOTS SECTION
   ============================================ */
.screenshots-section {
  padding: 80px 5%;
  background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
}
.screenshots-section .screenshots-intro {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 60px;
}
.screenshots-section .screenshots-intro .section-title {
  font-size: 42px;
  font-weight: 700;
  color: var(--4u-blue-grey);
  margin-bottom: 20px;
}
.screenshots-section .screenshots-intro .section-intro {
  font-size: 20px;
  line-height: 1.6;
  color: var(--4u-grey);
}
.screenshots-section .screenshots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 40px;
  max-width: 1400px;
  margin: 0 auto;
}
.screenshots-section .screenshot-box {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.screenshots-section .screenshot-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
.screenshots-section .screenshot-box .screenshot-header {
  padding: 25px;
  background: linear-gradient(135deg, var(--4u-blue-grey) 0%, var(--4u-cyan) 100%);
  color: white;
  display: flex;
  align-items: center;
  gap: 15px;
}
.screenshots-section .screenshot-box .screenshot-header .twemoji-icon {
  width: 32px;
  height: 32px;
  display: block;
}
.screenshots-section .screenshot-box .screenshot-header h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
}
.screenshots-section .screenshot-box .screenshot-image {
  position: relative;
  background: #f5f5f5;
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
}
.screenshots-section .screenshot-box .screenshot-image .screenshot-thumbnail {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}
.screenshots-section .screenshot-box .screenshot-image .screenshot-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.screenshots-section .screenshot-box .screenshot-image .screenshot-overlay .zoom-icon {
  font-size: 48px;
  color: white;
}
.screenshots-section .screenshot-box .screenshot-image:hover .screenshot-thumbnail {
  transform: scale(1.05);
}
.screenshots-section .screenshot-box .screenshot-image:hover .screenshot-overlay {
  opacity: 1;
}
.screenshots-section .screenshot-box .screenshot-image:has(img[src*=placeholder]), .screenshots-section .screenshot-box .screenshot-image:empty::after {
  content: "Screenshot wird geladen...";
  color: var(--4u-grey);
  font-size: 16px;
}
.screenshots-section .screenshot-box .screenshot-description {
  padding: 25px;
}
.screenshots-section .screenshot-box .screenshot-description p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--4u-grey);
}

/* ============================================
   SCREENSHOT LIGHTBOX MODAL
   ============================================ */
.screenshot-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  padding: 20px;
}
.screenshot-modal.active {
  opacity: 1;
}
.screenshot-modal .modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  cursor: pointer;
}
.screenshot-modal .modal-content {
  position: relative;
  width: 100%;
  max-width: 1400px;
  max-height: 90vh;
  background: white;
  border-radius: 12px;
  overflow-y: auto;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
  z-index: 10000;
}
.screenshot-modal .modal-close {
  position: absolute;
  top: 15px;
  right: 15px;
  background: #073a6a;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10001;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  padding: 4px 10px !important;
  padding-top: 1px !important;
  line-height: normal;
  height: 38px;
  opacity: 0.7;
}
.screenshot-modal .modal-close:hover {
  background: rgb(3.8407079646, 31.8230088496, 58.1592920354);
  transform: scale(1.1);
}
.screenshot-modal .modal-image-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  padding: 30px;
  min-height: 400px;
}
.screenshot-modal .modal-image-wrapper .modal-image {
  max-width: 100%;
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.screenshot-modal .modal-navigation {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  pointer-events: none;
}
.screenshot-modal .modal-navigation button {
  pointer-events: all;
  background: #073a6a;
  color: white;
  border: none;
  width: 60px;
  height: 80px;
  border-radius: 8px;
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.screenshot-modal .modal-navigation button:hover {
  background: rgb(3.8407079646, 31.8230088496, 58.1592920354);
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.screenshot-modal .modal-navigation button:active {
  transform: scale(0.95);
}
.screenshot-modal .modal-navigation .modal-prev {
  margin-left: 0;
  padding-left: 10px;
  padding-bottom: 10px;
  padding-top: 2px;
  padding-right: 10px;
  height: 47px;
  line-height: normal;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  opacity: 0.7;
}
.screenshot-modal .modal-navigation .modal-next {
  margin-right: 0;
  padding-left: 10px;
  padding-bottom: 10px;
  padding-top: 2px;
  padding-right: 10px;
  height: 47px;
  line-height: normal;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  opacity: 0.7;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  .screenshots-section {
    padding: 60px 5%;
  }
  .screenshots-section .screenshots-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .screenshots-section .screenshot-box .screenshot-header {
    padding: 20px;
  }
  .screenshots-section .screenshot-box .screenshot-header h3 {
    font-size: 20px;
  }
  .screenshots-section .screenshot-box .screenshot-header .twemoji-icon {
    width: 28px;
    height: 28px;
  }
  .screenshots-section .screenshot-box .screenshot-description {
    padding: 20px;
  }
  .screenshot-modal {
    padding: 10px;
  }
  .screenshot-modal .modal-content {
    max-width: 95vw;
    max-height: 95vh;
  }
  .screenshot-modal .modal-close {
    width: 40px;
    height: 40px;
    font-size: 24px;
    top: 10px;
    right: 10px;
  }
  .screenshot-modal .modal-navigation {
    padding: 0 10px;
  }
  .screenshot-modal .modal-navigation button {
    width: 50px;
    height: 60px;
    font-size: 28px;
  }
  .screenshot-modal .modal-image-wrapper {
    padding: 20px;
  }
}
/**
 * @file _index.scss
 *
 * @description
 * Central index file that forwards all partials
 * Allows single @use statement in main SCSS file
 *
 * @version 1.0.8
 * @created 20251008-144218
 * @modified 20251116-112744
 *
 * @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 _info-boxes.scss
 *
 * @description
 * Info, warning, success and error boxes used across pages
 * Includes email confirmation, no-license boxes and general notifications
 *
 * @version 1.0.0
 * @created 20250926-161500
 * @modified 20250926-161500
 *
 * @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
 */
/* ========================================
   INFO BOXES
   ======================================== */
/**
 * General Info Box
 */
.info-box {
  background: #f0f9ff;
  border: 2px solid #00ACC1;
  border-radius: 12px;
  padding: 25px;
  margin-bottom: 30px;
}
.info-box .info-box-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.info-box .info-box-header .info-icon {
  font-size: 1.5rem;
}
.info-box .info-box-header h3 {
  margin: 0;
  color: #073a6a;
  font-size: 1.3rem;
}
.info-box .info-box-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.info-box .info-box-content li {
  padding: 10px 0;
  border-bottom: 1px solid rgba(0, 172, 193, 0.2);
  color: #37474F;
  line-height: 1.6;
}
.info-box .info-box-content li:last-child {
  border-bottom: none;
}
.info-box .info-box-content li strong {
  font-weight: 600;
}
.info-box .info-box-content li a {
  color: #00ACC1;
  text-decoration: none;
  font-weight: 600;
}
.info-box .info-box-content li a:hover {
  text-decoration: underline;
}

/**
 * Email Confirmation Box
 */
.email-confirmation {
  background: #e8f5e9;
  border-left: 4px solid #4caf50;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 30px;
}
.email-confirmation p {
  margin: 0 0 15px 0;
  color: #2e7d32;
  font-weight: 600;
}
.email-confirmation ol {
  margin: 0;
  padding-left: 25px;
  color: #37474F;
}
.email-confirmation ol li {
  margin-bottom: 8px;
}

/**
 * No License Warning Box
 */
.no-license-box {
  background: #fff3cd;
  border: 2px solid #ffc107;
  border-radius: 12px;
  padding: 30px;
  text-align: center;
}
.no-license-box h2 {
  color: #856404;
  margin-bottom: 15px;
}
.no-license-box p {
  color: #856404;
  margin-bottom: 15px;
}
.no-license-box .session-info {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(133, 100, 4, 0.2);
}
.no-license-box .session-info p {
  margin: 0;
  color: #856404;
  font-family: monospace;
}
.no-license-box .session-info p small {
  font-size: 0.9rem;
}

/**
 * Alert Messages
 */
.pm4u-alert {
  padding: 12px 15px;
  border-radius: 6px;
  margin-bottom: 20px;
  font-size: 14px;
}
.pm4u-alert.pm4u-alert-error {
  background: #fee;
  color: #c33;
  border: 1px solid #fcc;
}
.pm4u-alert.pm4u-alert-success {
  background: #efe;
  color: #3c3;
  border: 1px solid #cfc;
}

/**
 * Documentation Info Boxes
 */
.cct4u-tip {
  background: linear-gradient(135deg, rgba(0, 172, 193, 0.05) 0%, rgba(102, 153, 153, 0.05) 100%);
  border: 2px solid #00ACC1;
  border-left: 5px solid #073a6a;
  padding: 20px;
  margin: 30px 0;
  border-radius: 10px;
  position: relative;
}
.cct4u-tip strong {
  color: #073a6a;
  font-weight: 600;
}

.cct4u-important {
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.05) 0%, rgba(255, 138, 101, 0.05) 100%);
  border: 2px solid #FF6B35;
  border-left: 5px solid #FF6B35;
  padding: 20px;
  margin: 30px 0;
  border-radius: 10px;
}
.cct4u-important strong {
  color: rgb(255, 69.6336633663, 2);
  font-weight: 600;
}

.cct4u-success {
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.05) 0%, rgba(102, 187, 106, 0.05) 100%);
  border: 2px solid #4caf50;
  border-left: 5px solid #4caf50;
  padding: 20px;
  margin: 30px 0;
  border-radius: 10px;
}
.cct4u-success h4 {
  color: #2e7d32;
  margin-top: 0;
}
.cct4u-success strong {
  color: #2e7d32;
}

.cct4u-error {
  background: linear-gradient(135deg, rgba(244, 67, 54, 0.05) 0%, rgba(239, 83, 80, 0.05) 100%);
  border: 2px solid #f44336;
  border-left: 5px solid #f44336;
  padding: 20px;
  margin: 30px 0;
  border-radius: 10px;
}
.cct4u-error h4 {
  color: #c62828;
  margin-top: 0;
}
.cct4u-error strong {
  color: #c62828;
}

/**
 * License Warning in Cards
 */
.license-warning {
  background: #fff3cd;
  color: #856404;
  padding: 10px;
  border-radius: 8px;
  margin-top: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
}

/**
 * @file _index.scss
 *
 * @description
 * Central index file that forwards all partials
 * Allows single @use statement in main SCSS file
 *
 * @version 1.0.8
 * @created 20251008-144218
 * @modified 20251116-112744
 *
 * @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 _licenses.scss
 *
 * @description
 * License cards and grid layout for displaying user licenses
 * Includes status badges, actions, and responsive design
 * MIGRATED TO UNIFIED BUTTON SYSTEM (Phase 3, 20251101-124139)
 *
 * @version 2.0.0
 * @created 20250926-161340
 * @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
 */
/* ========================================
   LICENSES SECTION
   ======================================== */
.licenses-section {
  padding: 60px 20px;
  max-width: 1200px;
  margin: 0 auto;
  /**
   * Section header
   */
}
.licenses-section .section-header {
  text-align: center;
  margin-bottom: 40px;
}
.licenses-section .section-header h2 {
  font-size: 2.5rem;
  color: #073a6a;
  margin-bottom: 10px;
  font-weight: 700;
}
.licenses-section .section-header p {
  color: #669999;
  font-size: 1.1rem;
}
.licenses-section {
  /**
   * License cards grid
   */
}
.licenses-section .licenses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 30px;
}
.licenses-section {
  /**
   * Individual license card
   */
}
.licenses-section .license-card {
  background: white;
  border-radius: 15px;
  padding: 25px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  border: 2px solid transparent;
  transition: all 0.3s ease;
}
.licenses-section .license-card.active {
  border-color: #4caf50;
}
.licenses-section .license-card.expired {
  border-color: #e74c3c;
  opacity: 0.9;
}
.licenses-section .license-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12);
}
.licenses-section .license-card {
  /**
   * License header with badge
   */
}
.licenses-section .license-card .license-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid #f5f5f5;
}
.licenses-section .license-card .license-header h3 {
  margin: 0;
  color: #073a6a;
  font-size: 1.4rem;
}
.licenses-section .license-card {
  /**
   * Status badges
   */
}
.licenses-section .license-card .license-badge {
  padding: 5px 15px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
}
.licenses-section .license-card .license-badge.badge-active {
  background: #e8f5e9;
  color: #2e7d32;
}
.licenses-section .license-card .license-badge.badge-expired {
  background: #ffebee;
  color: #c62828;
}
.licenses-section .license-card {
  /**
   * License details rows
   */
}
.licenses-section .license-card .license-details {
  margin-bottom: 20px;
}
.licenses-section .license-card .license-details .license-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.licenses-section .license-card .license-details .license-label {
  color: #669999;
  font-size: 0.95rem;
}
.licenses-section .license-card .license-details .license-value {
  color: #073a6a;
  font-weight: 500;
}
.licenses-section .license-card .license-details .license-key {
  background: #f5f7fa;
  padding: 4px 10px;
  border-radius: 5px;
  font-family: monospace;
  font-size: 0.9rem;
  color: #073a6a;
  cursor: pointer;
}
.licenses-section .license-card .license-details .license-key:hover {
  background: #e8eaf0;
}
.licenses-section .license-card {
  /**
   * Warning message
   */
}
.licenses-section .license-card .license-warning {
  background: #fff3cd;
  color: #856404;
  padding: 10px;
  border-radius: 8px;
  margin-top: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
}
.licenses-section .license-card {
  /**
   * Action buttons - UNIFIED BUTTON SYSTEM
   * Vertical layout for btn-group-3 in license cards
   */
}
.licenses-section .license-card .license-actions .btn-group-3 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.licenses-section .license-card .license-actions .btn-group-3 .btn-first,
.licenses-section .license-card .license-actions .btn-group-3 .btn-second,
.licenses-section .license-card .license-actions .btn-group-3 .btn-third {
  width: 100%;
  justify-content: center;
}
.licenses-section {
  /**
   * Empty state - no licenses
   */
}
.licenses-section .no-licenses-box {
  text-align: center;
  padding: 80px 20px;
  background: #f8f9fa;
  border-radius: 20px;
  border: 2px dashed #d0dae5;
}
.licenses-section .no-licenses-box .no-licenses-icon {
  font-size: 4rem;
  color: #d0dae5;
  margin-bottom: 20px;
}
.licenses-section .no-licenses-box h3 {
  color: #073a6a;
  font-size: 1.8rem;
  margin-bottom: 15px;
}
.licenses-section .no-licenses-box p {
  color: #669999;
  font-size: 1.1rem;
  margin-bottom: 30px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}
.licenses-section .no-licenses-box .no-licenses-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
}
.licenses-section .no-licenses-box .no-licenses-actions .btn-primary,
.licenses-section .no-licenses-box .no-licenses-actions .btn-outline {
  padding: 12px 30px;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
}
.licenses-section .no-licenses-box .no-licenses-actions .btn-primary {
  background: linear-gradient(135deg, #FF6B35 0%, #FF8A65 100%);
  color: white;
}
.licenses-section .no-licenses-box .no-licenses-actions .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 107, 53, 0.3);
}
.licenses-section .no-licenses-box .no-licenses-actions .btn-outline {
  background: white;
  color: #073a6a;
  border: 2px solid #073a6a;
}
.licenses-section .no-licenses-box .no-licenses-actions .btn-outline:hover {
  background: #073a6a;
  color: white;
}

/**
 * Quick Actions Section
 */
.quick-actions-section {
  padding: 60px 20px 40px;
  background: #f8f9fa;
}
.quick-actions-section .section-header {
  text-align: center;
  margin-bottom: 40px;
}
.quick-actions-section .section-header h2 {
  font-size: 2.5rem;
  color: #073a6a;
  margin-bottom: 10px;
  font-weight: 700;
}
.quick-actions-section .section-header p {
  color: #669999;
  font-size: 1.1rem;
}
.quick-actions-section {
  /**
   * Quick actions grid
   */
}
.quick-actions-section .quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 25px;
  max-width: 1200px;
  margin: 0 auto;
}
.quick-actions-section .quick-actions-grid .action-card {
  background: white;
  padding: 30px 20px;
  border-radius: 15px;
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}
.quick-actions-section .quick-actions-grid .action-card:hover {
  transform: translateY(-5px);
  border-color: #00ACC1;
  box-shadow: 0 10px 40px rgba(0, 172, 193, 0.15);
}
.quick-actions-section .quick-actions-grid .action-card:hover .action-icon {
  transform: scale(1.1);
}
.quick-actions-section .quick-actions-grid .action-card .action-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 15px;
  background: linear-gradient(135deg, #073a6a, #669999);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: white;
  transition: transform 0.3s ease;
}
.quick-actions-section .quick-actions-grid .action-card h4 {
  color: #073a6a;
  font-size: 1.2rem;
  margin: 0 0 8px 0;
}
.quick-actions-section .quick-actions-grid .action-card p {
  color: #669999;
  font-size: 0.95rem;
  margin: 0;
}

/**
 * Responsive styles
 */
@media (max-width: 768px) {
  .licenses-section .licenses-grid {
    grid-template-columns: 1fr;
  }
  .license-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .license-actions {
    flex-direction: column;
  }
  .no-licenses-actions {
    flex-direction: column;
  }
  .quick-actions-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}
/**
 * @file _index.scss
 *
 * @description
 * Central index file that forwards all partials
 * Allows single @use statement in main SCSS file
 *
 * @version 1.0.8
 * @created 20251008-144218
 * @modified 20251116-112744
 *
 * @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 _next-steps.scss
 *
 * @description
 * Next Steps section with numbered step cards and action buttons
 * Used on payment success and onboarding pages
 *
 * @version 1.0.0
 * @created 20250926-161600
 * @modified 20250926-161600
 *
 * @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
 */
/* ========================================
   NEXT STEPS SECTION
   ======================================== */
.next-steps-section {
  padding: 60px 20px;
  background: #f8f9fa;
  /**
   * Container
   */
}
.next-steps-section .next-steps-container {
  max-width: 1200px;
  margin: 0 auto;
}
.next-steps-section .next-steps-container h2 {
  text-align: center;
  font-size: 2rem;
  color: #073a6a;
  margin-bottom: 40px;
}
.next-steps-section {
  /**
   * Steps Grid Layout
   */
}
.next-steps-section .steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin-bottom: 50px;
  /**
   * Individual Step Card
   */
}
.next-steps-section .steps-grid .step-card {
  background: white;
  padding: 30px;
  border-radius: 12px;
  position: relative;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}
.next-steps-section .steps-grid .step-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
.next-steps-section .steps-grid .step-card {
  /**
   * Step Number Badge
   */
}
.next-steps-section .steps-grid .step-card .step-number {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #FF6B35 0%, #FF8A65 100%);
  color: white;
  font-size: 1.3rem;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
}
.next-steps-section .steps-grid .step-card {
  /**
   * Step Content
   */
}
.next-steps-section .steps-grid .step-card h4 {
  color: #073a6a;
  margin: 0 0 10px 0;
  font-size: 1.2rem;
}
.next-steps-section .steps-grid .step-card p {
  color: #669999;
  margin: 0 0 15px 0;
  line-height: 1.5;
}
.next-steps-section .steps-grid .step-card {
  /**
   * Step Link
   */
}
.next-steps-section .steps-grid .step-card .step-link {
  color: #00ACC1;
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
}
.next-steps-section .steps-grid .step-card .step-link:hover {
  text-decoration: underline;
}
.next-steps-section {
  /**
   * Action Buttons
   */
}
.next-steps-section .action-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}
.next-steps-section .action-buttons .btn-primary,
.next-steps-section .action-buttons .btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 32px;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}
.next-steps-section .action-buttons .btn-primary {
  background: linear-gradient(135deg, #FF6B35 0%, #FF8A65 100%);
  color: white;
  border: 2px solid transparent;
}
.next-steps-section .action-buttons .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(255, 107, 53, 0.3);
}
.next-steps-section .action-buttons .btn-secondary {
  background: white;
  color: #073a6a;
  border: 2px solid #073a6a;
}
.next-steps-section .action-buttons .btn-secondary:hover {
  background: #073a6a;
  color: white;
}

/**
 * Responsive adjustments
 */
@media (max-width: 768px) {
  .next-steps-section .steps-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .next-steps-section .action-buttons {
    flex-direction: column;
  }
  .next-steps-section .action-buttons .btn-primary,
  .next-steps-section .action-buttons .btn-secondary {
    width: 100%;
    justify-content: center;
  }
}
/**
 * @file _index.scss
 *
 * @description
 * Central index file that forwards all partials
 * Allows single @use statement in main SCSS file
 *
 * @version 1.0.8
 * @created 20251008-144218
 * @modified 20251116-112744
 *
 * @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 _quick-actions.scss
 *
 * @description
 * Quick Actions grid with icon cards for dashboard and navigation
 * Features rounded icons with gradient backgrounds and hover effects
 *
 * @version 1.0.0
 * @created 20250926-161700
 * @modified 20250926-161700
 *
 * @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
 */
/* ========================================
   QUICK ACTIONS SECTION
   ======================================== */
.quick-actions-section {
  padding: 60px 20px 40px;
  background: #f8f9fa;
  /**
   * Section Header
   */
}
.quick-actions-section .section-header {
  text-align: center;
  margin-bottom: 40px;
}
.quick-actions-section .section-header h2 {
  font-size: 2.5rem;
  color: #073a6a;
  margin-bottom: 10px;
  font-weight: 700;
}
.quick-actions-section .section-header p {
  color: #669999;
  font-size: 1.1rem;
}
.quick-actions-section {
  /**
   * Quick Actions Grid
   */
}
.quick-actions-section .quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 25px;
  max-width: 1200px;
  margin: 0 auto;
  /**
   * Action Card
   */
}
.quick-actions-section .quick-actions-grid .action-card {
  background: white;
  padding: 30px 20px;
  border-radius: 15px;
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}
.quick-actions-section .quick-actions-grid .action-card:hover {
  transform: translateY(-5px);
  border-color: #00ACC1;
  box-shadow: 0 10px 40px rgba(0, 172, 193, 0.15);
}
.quick-actions-section .quick-actions-grid .action-card:hover .action-icon {
  transform: scale(1.1);
}
.quick-actions-section .quick-actions-grid .action-card {
  /**
   * Action Icon Container
   */
}
.quick-actions-section .quick-actions-grid .action-card .action-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 15px;
  background: linear-gradient(135deg, #073a6a, #669999);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: white;
  transition: transform 0.3s ease;
}
.quick-actions-section .quick-actions-grid .action-card {
  /**
   * Action Text
   */
}
.quick-actions-section .quick-actions-grid .action-card h4 {
  color: #073a6a;
  font-size: 1.2rem;
  margin: 0 0 8px 0;
}
.quick-actions-section .quick-actions-grid .action-card p {
  color: #669999;
  font-size: 0.95rem;
  margin: 0;
}

/**
 * Responsive adjustments
 */
@media (max-width: 768px) {
  .quick-actions-section .quick-actions-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
  }
  .quick-actions-section .action-card {
    padding: 20px 15px;
  }
  .quick-actions-section .action-card .action-icon {
    width: 50px;
    height: 50px;
    font-size: 24px;
  }
  .quick-actions-section .action-card h4 {
    font-size: 1rem;
  }
  .quick-actions-section .action-card p {
    font-size: 0.85rem;
  }
}
/**
 * @file _index.scss
 *
 * @description
 * Central index file that forwards all partials
 * Allows single @use statement in main SCSS file
 *
 * @version 1.0.8
 * @created 20251008-144218
 * @modified 20251116-112744
 *
 * @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 _editor-content.scss
 *
 * @description
 * Styles for user-generated content in WordPress Gutenberg editor
 * Applied to changelog, docs, FAQ pages, and plugin showcase
 * Converted from standalone CSS to SCSS with color variables
 *
 * @version 2.0.0
 * @created 20250915-152000
 * @modified 20251026-133611
 *
 * @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
 */
/* ========================================
   USER CONTENT WRAPPER
   ======================================== */
.user-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  /* Typography */
}
.user-content h1 {
  color: #073a6a;
  font-size: 2.5em;
  margin-bottom: 20px;
  border-bottom: 2px solid #669999;
  padding-bottom: 10px;
}
.user-content h2 {
  color: #073a6a;
  font-size: 2em;
  margin-top: 30px;
  margin-bottom: 15px;
}
.user-content h3 {
  color: #073a6a;
  font-size: 1.5em;
  margin-top: 25px;
  margin-bottom: 10px;
}
.user-content h4 {
  color: #669999;
  font-size: 1.2em;
  margin-top: 20px;
  margin-bottom: 10px;
}
.user-content {
  /* Lists */
}
.user-content ul,
.user-content ol {
  margin-left: 20px;
  margin-bottom: 20px;
}
.user-content li {
  margin-bottom: 8px;
  line-height: 1.6;
}
.user-content {
  /* Paragraphs */
}
.user-content p {
  line-height: 1.8;
  margin-bottom: 15px;
  color: #333;
}
.user-content {
  /* Code Blocks */
}
.user-content pre {
  background: #f4f4f4;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 15px;
  overflow-x: auto;
  margin-bottom: 20px;
}
.user-content code {
  background: #f4f4f4;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: "Courier New", monospace;
}
.user-content {
  /* Tables */
}
.user-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}
.user-content th {
  background: #073a6a;
  color: white;
  padding: 12px;
  text-align: left;
}
.user-content td {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}
.user-content tr:hover {
  background: #f9f9f9;
}
.user-content {
  /* Blockquotes */
}
.user-content blockquote {
  border-left: 4px solid #669999;
  padding-left: 20px;
  margin: 20px 0;
  font-style: italic;
  color: #666;
}
.user-content {
  /* Links */
}
.user-content a {
  color: #073a6a;
  text-decoration: underline;
}
.user-content a:hover {
  color: #669999;
}
.user-content {
  /* Images */
}
.user-content img {
  max-width: 100%;
  height: auto;
  border-radius: 5px;
  margin: 20px 0;
}
.user-content {
  /* Gutenberg Blocks Support */
}
.user-content .wp-block-button__link {
  background: #073a6a;
  color: white;
  padding: 12px 24px;
  border-radius: 5px;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s;
}
.user-content .wp-block-button__link:hover {
  background: #669999;
}
.user-content {
  /* Info Boxes */
}
.user-content .wp-block-group {
  padding: 20px;
  border-radius: 5px;
  margin-bottom: 20px;
}
.user-content .has-pale-cyan-blue-background-color {
  background-color: #e7f5ff !important;
  border-left: 4px solid #073a6a;
}
.user-content .has-vivid-green-cyan-background-color {
  background-color: #d4edda !important;
  border-left: 4px solid #28a745;
}
.user-content .has-luminous-vivid-orange-background-color {
  background-color: #fff3cd !important;
  border-left: 4px solid #ffc107;
}
.user-content {
  /* Columns */
}
.user-content .wp-block-columns {
  display: flex;
  gap: 30px;
  margin-bottom: 30px;
}
.user-content .wp-block-column {
  flex: 1;
}
.user-content {
  /* Separators */
}
.user-content hr {
  border: none;
  border-top: 2px solid #e9ecef;
  margin: 40px 0;
}

/* ========================================
   FAQ SPECIFIC STYLES
   ======================================== */
.faq-wrapper .wp-block-details {
  border: 1px solid #e9ecef;
  border-radius: 5px;
  margin-bottom: 10px;
  padding: 15px;
}
.faq-wrapper .wp-block-details summary {
  font-weight: bold;
  color: #073a6a;
  cursor: pointer;
  padding: 10px 0;
}

/* ========================================
   CHANGELOG SPECIFIC STYLES
   ======================================== */
.changelog-wrapper .wp-block-heading {
  background: #f8f9fa;
  padding: 10px 15px;
  border-radius: 5px;
}
.changelog-wrapper .wp-block-list {
  background: white;
  padding: 15px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* ========================================
   DOCUMENTATION SPECIFIC STYLES
   ======================================== */
.docs-wrapper .wp-block-heading {
  margin-top: 40px;
  position: relative;
}
.docs-wrapper .wp-block-heading:before {
  content: "📖";
  position: absolute;
  left: -30px;
}

/* ========================================
   PLUGIN SHOWCASE GRID
   ======================================== */
.plugin-showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin: 0 0 40px 0;
  padding: 20px;
}

.plugin-card {
  background: white;
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
  position: relative;
}
.plugin-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}
.plugin-card.coming-soon {
  opacity: 0.9;
}
.plugin-card.coming-soon .plugin-icon {
  color: #999;
}

.plugin-icon {
  font-size: 48px;
  color: #073a6a;
  margin-bottom: 20px;
}

.plugin-title {
  color: #073a6a;
  font-size: 24px;
  margin: 0 0 10px 0;
  font-weight: 600;
}

.plugin-description {
  color: #666;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 25px;
}

.plugin-links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.plugin-links li {
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}
.plugin-links li:last-child {
  border-bottom: none;
}
.plugin-links a {
  color: #669999;
  text-decoration: none;
  display: flex;
  align-items: center;
  transition: color 0.3s;
  font-size: 14px;
}
.plugin-links a:before {
  content: "→";
  margin-right: 10px;
  color: #073a6a;
}
.plugin-links a:hover {
  color: #073a6a;
}
.plugin-links.disabled a {
  color: #ccc;
  cursor: not-allowed;
}
.plugin-links.disabled a:before {
  color: #ccc;
}
.plugin-links.disabled a:hover {
  padding-left: 0;
}

.coming-soon-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  background: #fff3cd;
  color: #856404;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 20px;
}
.coming-soon-badge .dashicons {
  font-size: 16px;
}

/* Plugin CTA Button */
.plugin-cta {
  margin-top: 25px;
  text-align: center;
}
.plugin-cta .button,
.plugin-cta .button-primary {
  display: inline-block;
  padding: 12px 30px;
  background: #073a6a;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  font-weight: 600;
  transition: all 0.3s;
  border: none;
  cursor: pointer;
}
.plugin-cta .button:hover,
.plugin-cta .button-primary:hover {
  background: #5b8888;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(7, 58, 106, 0.3);
}
.plugin-cta .button-disabled {
  display: inline-block;
  padding: 12px 30px;
  background: #e9ecef;
  color: #6c757d;
  text-decoration: none;
  border-radius: 5px;
  font-weight: 600;
  cursor: not-allowed;
  opacity: 0.6;
}

/* ========================================
   RESPONSIVE MEDIA QUERIES
   ======================================== */
@media (max-width: 768px) {
  .user-content .wp-block-columns {
    flex-direction: column;
  }
  .user-content {
    padding: 10px;
  }
  .plugin-showcase-grid {
    grid-template-columns: 1fr;
    padding: 10px;
  }
}
/**
 * @file _index.scss
 *
 * @description
 * Central index file that forwards all partials
 * Allows single @use statement in main SCSS file
 *
 * @version 1.0.8
 * @created 20251008-144218
 * @modified 20251116-112744
 *
 * @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 _auth-forms.scss
 *
 * @description
 * Authentication forms styling for login, register, and password reset
 * Includes form controls, alerts, and buttons
 *
 * @version 1.0.1
 * @created 20250926-161334
 * @modified 20250927-083605
 *
 * @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
 */
/* ========================================
   LOGIN/REGISTER/FORGOT PASSWORD PAGES
   ======================================== */
/**
 * Forgot Password Hero Section
 * Hero with unlocked lock icon (1f513.svg) representing password recovery/reset
 * Base styles defined in _hero-sections.scss
 * Icon pulses once on hover over entire hero section
 */
/**
 * Container styles for auth pages
 */
.pm4u-login-container,
.pm4u-register-container,
.pm4u-forgot-container {
  min-height: calc(100vh - 200px);
  background: linear-gradient(135deg, #003366 0%, #669999 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

/**
 * Wrapper for two-column layout
 */
.pm4u-login-wrapper,
.pm4u-register-wrapper,
.pm4u-forgot-wrapper {
  max-width: 1200px;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

/**
 * Form box styling
 */
.pm4u-login-box,
.pm4u-register-box,
.pm4u-forgot-box {
  background: white;
  border-radius: 12px;
  padding: 40px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
}

/**
 * Form headers
 */
.pm4u-login-header,
.pm4u-register-header,
.pm4u-forgot-header {
  text-align: center;
  margin-bottom: 30px;
}
.pm4u-login-header h1,
.pm4u-register-header h1,
.pm4u-forgot-header h1 {
  font-size: 28px;
  color: #333;
  margin-bottom: 10px;
}
.pm4u-login-header p,
.pm4u-register-header p,
.pm4u-forgot-header p {
  color: #666;
  font-size: 14px;
}

/**
 * Logo placeholder
 */
.pm4u-logo {
  margin-bottom: 20px;
}

/**
 * Alert messages
 */
.pm4u-alert {
  padding: 12px 15px;
  border-radius: 6px;
  margin-bottom: 20px;
  font-size: 14px;
}
.pm4u-alert.pm4u-alert-error {
  background: #fee;
  color: #c33;
  border: 1px solid #fcc;
}
.pm4u-alert.pm4u-alert-success {
  background: #efe;
  color: #3c3;
  border: 1px solid #cfc;
}

/**
 * Form groups
 */
.pm4u-form-group {
  margin-bottom: 20px;
}
.pm4u-form-group label {
  display: block;
  margin-bottom: 8px;
  color: #333;
  font-weight: 500;
  font-size: 14px;
}

/**
 * Form controls
 */
.pm4u-form-control {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  transition: all 0.3s;
}

/**
 * Checkbox styling
 */
.pm4u-form-check {
  display: flex;
  align-items: center;
}
.pm4u-form-check .pm4u-form-check-input {
  width: auto;
  margin-right: 8px;
}
.pm4u-form-check .pm4u-form-check-label {
  margin-bottom: 0;
  cursor: pointer;
}

/**
 * Button styles
 */
.pm4u-btn {
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  text-decoration: none;
  display: inline-block;
}
.pm4u-btn.pm4u-btn-primary {
  background: linear-gradient(135deg, #003366 0%, #669999 100%);
  color: white;
}
.pm4u-btn.pm4u-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 51, 102, 0.3);
}
.pm4u-btn.pm4u-btn-secondary {
  background: white;
  color: #003366;
  border: 2px solid #003366;
}
.pm4u-btn.pm4u-btn-secondary:hover {
  background: #003366;
  color: white;
}
.pm4u-btn.pm4u-btn-block {
  width: 100%;
  text-align: center;
}

/**
 * Responsive for auth forms
 */
@media (max-width: 768px) {
  .pm4u-login-wrapper,
  .pm4u-register-wrapper,
  .pm4u-forgot-wrapper {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .pm4u-login-features,
  .pm4u-register-benefits,
  .pm4u-forgot-info {
    display: none;
  }
}
/**
 * @file _index.scss
 *
 * @description
 * Central index file that forwards all partials
 * Allows single @use statement in main SCSS file
 *
 * @version 1.0.8
 * @created 20251008-144218
 * @modified 20251116-112744
 *
 * @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 _login-form.scss
 *
 * @description
 * Styles for login form section and login-register
 * Includes form styling, messages, buttons and responsive design
 *
 * @version 1.0.0
 * @created 20250926-102700
 * @modified 20250926-102700
 *
 * @author Frank Hackenberg
 * @author_uri https://foryourweb.de
 * Copyright (c) [fh] - 4UWeb
 *
 * @package AstraChild
 *
 * @dependencies
 * colors4u.scss - Project color variables
 *
 * @license GPL-3.0-or-later
 * @license_uri https://www.gnu.org/licenses/gpl-3.0.html
 */
.login-form-section {
  margin-top: 60px;
  padding: 40px 20px;
  scroll-margin-top: 80px;
}

.login-form-wrapper {
  display: flex;
  max-width: 1000px;
  margin: 0 auto;
  gap: 40px;
}
@media (max-width: 767px) {
  .login-form-wrapper {
    flex-direction: column;
  }
}

.login-container {
  display: flex;
  max-width: 1000px;
  margin: 60px auto;
  padding: 0 20px;
  gap: 40px;
}
@media (max-width: 767px) {
  .login-container {
    margin: 40px auto;
  }
}

.login-box {
  flex: 1;
  max-width: 500px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  position: relative;
}
.login-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(135deg, #073a6a 0%, #669999 100%);
}
@media (max-width: 767px) {
  .login-box {
    max-width: 100%;
  }
}

.form-header {
  text-align: center;
  padding: 40px 30px 30px;
  background: linear-gradient(135deg, rgba(0, 51, 102, 0.03) 0%, rgba(102, 153, 153, 0.03) 100%);
}
@media (max-width: 767px) {
  .form-header {
    padding: 30px 20px 20px;
  }
}

.form-icon {
  margin-bottom: 20px;
  animation: rotate 4s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(10deg) scale(1.05);
  }
  100% {
    transform: rotate(0deg) scale(1);
  }
}
.form-title {
  font-size: 28px;
  font-weight: 700;
  color: #073a6a;
  margin: 0 0 10px;
}
@media (max-width: 767px) {
  .form-title {
    font-size: 24px;
  }
}

.form-subtitle {
  font-size: 15px;
  color: #666;
  line-height: 1.6;
  margin: 0;
}

.message {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 20px;
  margin: 0 30px 20px;
  border-radius: 8px;
  font-size: 14px;
  animation: slideDown 0.3s ease-out;
}
.message img {
  flex-shrink: 0;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.message-success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.message-error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.message-info {
  background: #d1ecf1;
  color: #0c5460;
  border: 1px solid #bee5eb;
}

.login-form {
  padding: 0 30px 30px;
}
@media (max-width: 767px) {
  .login-form {
    padding: 0 20px 20px;
  }
}
.login-form.loading {
  position: relative;
  pointer-events: none;
}
.login-form.loading::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}

.form-group {
  margin-bottom: 20px;
}
.form-group label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #073a6a;
  margin-bottom: 8px;
}
.form-group label img {
  flex-shrink: 0;
}

.form-control {
  width: 100%;
  padding: 12px 15px;
  font-size: 15px;
  border: 2px solid #e1e1e1;
  border-radius: 6px;
  transition: all 0.3s ease;
  background: white;
}
.form-control::-moz-placeholder {
  color: #999;
}
.form-control::placeholder {
  color: #999;
}
.form-control.error {
  border-color: #dc3545;
  animation: shake 0.3s;
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  75% {
    transform: translateX(5px);
  }
}
.password-input-wrapper {
  position: relative;
}

.toggle-password {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  padding: 5px;
  transition: color 0.3s ease;
}
.toggle-password:hover {
  color: #073a6a;
}
.toggle-password .dashicons {
  font-size: 20px;
  width: 20px;
  height: 20px;
}

.form-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}
@media (max-width: 767px) {
  .form-row {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }
}

.form-check {
  display: flex;
  align-items: center;
  gap: 8px;
}
.form-check input[type=checkbox] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}
.form-check label {
  font-size: 14px;
  color: #666;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  margin: 0;
  font-weight: normal;
}

.forgot-link {
  color: #073a6a;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.3s ease;
}
.forgot-link:hover {
  color: #0066cc;
  text-decoration: underline;
}

.btn-submit {
  width: 100%;
  padding: 14px 20px;
  background: linear-gradient(135deg, #073a6a 0%, #0066cc 100%);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  text-decoration: none;
}
.btn-submit::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}
.btn-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 51, 102, 0.3);
}
.btn-submit:hover::before {
  left: 100%;
}
.btn-submit .dashicons {
  font-size: 18px;
  width: 18px;
  height: 18px;
  line-height: 1;
}
.btn-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.divider {
  text-align: center;
  margin: 25px 0;
  position: relative;
}
.divider::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  background: #e1e1e1;
}
.divider span {
  background: white;
  padding: 0 15px;
  position: relative;
  color: #999;
  font-size: 13px;
}

.btn-alternative {
  width: 100%;
  padding: 12px 20px;
  background: white;
  color: #073a6a;
  border: 2px solid #073a6a;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.3s ease;
  text-decoration: none;
}
.btn-alternative:hover {
  background: #073a6a;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(0, 51, 102, 0.2);
}
.btn-alternative img {
  transition: filter 0.3s ease;
}

.form-footer {
  padding: 20px 30px;
  background: #f8f9fa;
  text-align: center;
}

.footer-text {
  margin: 0 0 8px 0;
  color: #666;
  font-size: 14px;
  font-weight: 600;
}

.footer-info {
  margin: 0 0 15px 0;
  color: #999;
  font-size: 13px;
  line-height: 1.4;
}

.footer-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  background: linear-gradient(135deg, #FF6B35 0%, #ff8a65 100%);
  color: white;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 15px;
  transition: all 0.3s ease;
}
.footer-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(255, 107, 53, 0.3);
}
.footer-link .dashicons {
  font-size: 18px;
  width: 18px;
  height: 18px;
}

.security-info {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 20px 30px;
  background: #f0f8ff;
  border-top: 1px solid #b8daff;
}
.security-info small {
  flex: 1;
  color: #004085;
  font-size: 12px;
  line-height: 1.5;
}
.security-info img {
  flex-shrink: 0;
  margin-top: 2px;
}

.login-side-info {
  flex: 0 0 300px;
  padding: 40px 0;
  display: none;
}
@media (min-width: 768px) {
  .login-side-info {
    display: block;
  }
}
.login-side-info h2 {
  font-size: 24px;
  font-weight: 700;
  color: #073a6a;
  margin: 0 0 30px;
}

.benefits-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.benefits-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px;
  margin-bottom: 15px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}
.benefits-list li:hover {
  transform: translateX(5px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.benefits-list li span {
  color: #333;
  font-size: 15px;
}

/**
 * @file _index.scss
 *
 * @description
 * Central index file that forwards all partials
 * Allows single @use statement in main SCSS file
 *
 * @version 1.0.8
 * @created 20251008-144218
 * @modified 20251116-112744
 *
 * @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 _login-hub.scss
 *
 * @description
 * login-register page styles with three action boxes
 * Includes hover effects, icons, and responsive layout
 *
 * @version 1.0.0
 * @created 20250926-161335
 * @modified 20250926-161335
 *
 * @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
 */
/* ========================================
   LOGIN REGISTER HUB PAGE
   ======================================== */
.login-register {
  max-width: 1200px;
  margin: 60px auto;
  padding: 0 20px;
  position: relative;
  z-index: 2;
  /**
   * Grid layout for hub boxes
   */
}
.login-register .hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 30px;
  margin-bottom: 60px;
}
.login-register {
  /**
   * Individual hub box styling
   */
}
.login-register .hub-box {
  background: white;
  border: 2px solid #e1e1e1;
  border-radius: 15px;
  padding: 40px 30px;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}
.login-register .hub-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(135deg, #073a6a 0%, #669999 100%);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}
.login-register .hub-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12);
  border-color: #073a6a;
}
.login-register .hub-box:hover::before {
  transform: scaleX(1);
}
.login-register .hub-box:hover .icon-container {
  animation: pulse 2s infinite;
}
.login-register .hub-box .icon-container {
  width: 80px;
  height: 80px;
  margin: 0 auto 25px;
  background: linear-gradient(135deg, #073a6a, #669999);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}
.login-register .hub-box .icon-container img {
  width: 48px;
  height: 48px;
}
.login-register .hub-box:first-child .icon-container img {
  transform: rotate(-90deg);
  transition: transform 0.3s ease;
}
.login-register .hub-box:first-child:hover .icon-container img {
  transform: rotate(-90deg) scale(1.1);
}
.login-register .hub-box .box-title {
  font-size: 22px;
  font-weight: 600;
  color: #073a6a;
  margin: 0 0 15px;
}
.login-register .hub-box .box-description {
  font-size: 15px;
  color: #666;
  line-height: 1.6;
  margin: 0 0 25px;
  min-height: 60px;
}
.login-register .hub-box .box-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  width: 100%;
  max-width: 280px;
}
.login-register .hub-box .box-button .dashicons {
  font-size: 18px;
  width: 18px;
  height: 18px;
  line-height: 1;
}
.login-register .hub-box .box-button.primary {
  background: #073a6a;
  color: white;
  border: 2px solid #073a6a;
}
.login-register .hub-box .box-button.primary:hover {
  background: rgb(3.8407079646, 31.8230088496, 58.1592920354);
  border-color: rgb(3.8407079646, 31.8230088496, 58.1592920354);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 51, 102, 0.3);
}
.login-register .hub-box .box-button.secondary {
  background: #FF6B35;
  color: white;
  border: 2px solid #FF6B35;
}
.login-register .hub-box .box-button.secondary:hover {
  background: rgb(255, 69.6336633663, 2);
  border-color: rgb(255, 69.6336633663, 2);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 107, 53, 0.3);
}
.login-register .hub-box .box-button.tertiary {
  background: transparent;
  color: #073a6a;
  border: 2px solid #073a6a;
}
.login-register .hub-box .box-button.tertiary:hover {
  background: #073a6a;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 51, 102, 0.2);
}
.login-register .hub-box .box-note {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e1e1e1;
  font-size: 14px;
  color: #666;
}
.login-register .hub-box .box-note small {
  display: block;
  margin-bottom: 8px;
}
.login-register .hub-box.loading {
  opacity: 0.6;
  pointer-events: none;
}
.login-register .hub-box.loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #073a6a;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
.login-register {
  /**
   * Text links
   */
}
.login-register .text-link {
  color: #073a6a;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}
.login-register .text-link:hover {
  color: rgb(2.2610619469, 18.7345132743, 34.2389380531);
  text-decoration: underline;
}
.login-register {
  /**
   * Footer section
   */
}
.login-register .hub-footer {
  text-align: center;
  padding-top: 40px;
  border-top: 1px solid #e1e1e1;
}
.login-register .hub-footer .help-section {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: #666;
}
.login-register .hub-footer .help-section img {
  vertical-align: middle;
  width: 24px;
  height: 24px;
}

/**
 * Login container anchor fix
 */
#loginContainer {
  margin-top: 60px;
}

/**
 * Loading spinner for AJAX
 */
.spinner {
  width: 40px;
  height: 40px;
  margin: 0 auto 20px;
  border: 4px solid rgba(0, 51, 102, 0.1);
  border-top: 4px solid #073a6a;
  border-radius: 50%;
  animation: spinSimple 1s linear infinite;
}

/**
 * Responsive styles
 */
@media (max-width: 768px) {
  .login-register .hub-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .login-register .hub-box {
    padding: 30px 20px;
  }
  .login-register .hub-box .box-title {
    font-size: 20px;
  }
  .login-register .hub-box .box-description {
    min-height: auto;
  }
}
/**
 * @file _index.scss
 *
 * @description
 * Central index file that forwards all partials
 * Allows single @use statement in main SCSS file
 *
 * @version 1.0.8
 * @created 20251008-144218
 * @modified 20251116-112744
 *
 * @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 _dashboard.scss
 *
 * @description
 * Customer Dashboard styles including layout, sidebar, and info cards
 * Modern design with gradient backgrounds and card layouts
 * MIGRATED TO UNIFIED BUTTON SYSTEM (Phase 2, 20251101-111500)
 *
 * @version 2.0.0
 * @created 20250926-161336
 * @modified 20251101-111500
 *
 * @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
 */
/* ========================================
   CUSTOMER DASHBOARD
   ======================================== */
/**
 * Dashboard Hero Section
 * Hero with chart icon (1f4ca.svg) representing analytics/dashboard
 * Base styles defined in _hero-sections.scss
 * Icon pulses on hover over entire hero section
 */
#customer-dashboard {
  min-height: 80vh;
  /**
   * Dashboard hero section
   * Note: Extended styles in _hero-sections.scss
   */
}
#customer-dashboard .dashboard-hero {
  background: linear-gradient(135deg, #073a6a 0%, #669999 100%);
  color: white;
  padding: 60px 0;
  text-align: center;
}
#customer-dashboard .dashboard-hero h1 {
  color: white;
  margin-bottom: 10px;
}
#customer-dashboard {
  /**
   * Main content area
   */
}
#customer-dashboard .dashboard-content {
  padding: 60px 0;
  background: #f8f9fa;
}
#customer-dashboard {
  /**
   * Two-column layout: sidebar + main
   */
}
#customer-dashboard .dashboard-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 40px;
}
#customer-dashboard {
  /**
   * Dashboard sidebar navigation
   */
}
#customer-dashboard .dashboard-sidebar {
  background: white;
  border-radius: 8px;
  padding: 20px;
  height: -moz-fit-content;
  height: fit-content;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
#customer-dashboard .dashboard-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
#customer-dashboard .dashboard-nav li {
  margin-bottom: 5px;
}
#customer-dashboard .dashboard-nav li.active a {
  background: #073a6a;
  color: white;
}
#customer-dashboard .dashboard-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  color: #666;
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.3s;
}
#customer-dashboard .dashboard-nav a:hover {
  background: #f8f9fa;
  color: #073a6a;
}
#customer-dashboard .dashboard-nav .dashicons {
  font-size: 20px;
  width: 20px;
  height: 20px;
}
#customer-dashboard {
  /**
   * Main content area
   */
}
#customer-dashboard .dashboard-main {
  background: white;
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/**
 * Dashboard Info Cards Section
 */
.dashboard-info-section {
  padding: 40px 20px;
  max-width: 1200px;
  margin: 0 auto;
}
.dashboard-info-section .dashboard-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-bottom: 60px;
}
.dashboard-info-section {
  /**
   * Individual info card styling
   */
}
.dashboard-info-section .info-card {
  background: white;
  padding: 35px;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.dashboard-info-section .info-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #073a6a, #669999);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}
.dashboard-info-section .info-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}
.dashboard-info-section .info-card:hover::before {
  transform: scaleX(1);
}
.dashboard-info-section .info-card:hover .info-card-icon {
  animation: pulse 2s infinite;
}
.dashboard-info-section .info-card {
  /**
   * Card icon with gradient background
   */
}
.dashboard-info-section .info-card .info-card-icon {
  width: 70px;
  height: 70px;
  margin: 0 auto 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: white;
}
.dashboard-info-section .info-card .info-card-icon.icon-licenses {
  background: linear-gradient(135deg, #4caf50, #66bb6a);
}
.dashboard-info-section .info-card .info-card-icon.icon-account {
  background: linear-gradient(135deg, #00ACC1, #4DD0E1);
}
.dashboard-info-section .info-card .info-card-icon.icon-member {
  background: linear-gradient(135deg, #FF6B35, #FF8A65);
}
.dashboard-info-section .info-card {
  /**
   * Card content
   */
}
.dashboard-info-section .info-card h3 {
  font-size: 1.2rem;
  color: #073a6a;
  margin-bottom: 15px;
  font-weight: 600;
}
.dashboard-info-section .info-card .info-card-value {
  font-size: 2.5rem;
  color: #073a6a;
  font-weight: 700;
  margin-bottom: 10px;
}
.dashboard-info-section .info-card .info-card-value.small-text {
  font-size: 1.1rem;
  word-break: break-word;
}
.dashboard-info-section .info-card .info-card-label {
  color: #669999;
  font-size: 1rem;
  margin-bottom: 0;
}
.dashboard-info-section .info-card {
  /**
   * Hint section at bottom of card
   */
}
.dashboard-info-section .info-card .info-card-hint {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid rgba(0, 51, 102, 0.1);
  color: #37474F;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dashboard-info-section .info-card .info-card-hint .hint-icon {
  font-size: 1.2rem;
}

/**
 * Not Logged In Warning Box
 * Warning displayed when user is not authenticated
 */
.not-logged-in-wrapper {
  padding: 60px 20px;
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}
.not-logged-in-wrapper .not-logged-in-box {
  background: #fff3cd;
  border: 2px solid #ffc107;
  border-radius: 12px;
  padding: 40px;
}
.not-logged-in-wrapper .not-logged-in-box h2 {
  color: #856404;
  margin-bottom: 20px;
}
.not-logged-in-wrapper .not-logged-in-box h2 .lock-icon {
  vertical-align: middle;
  margin-right: 8px;
}
.not-logged-in-wrapper .not-logged-in-box .warning-text {
  color: #856404;
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 25px;
}
.not-logged-in-wrapper .not-logged-in-box .login-hint {
  color: #856404;
  margin-bottom: 30px;
}

/**
 * Plugin Debugging Box
 * Shown when user is logged in but plugin access check failed
 */
.plugin-debug-box {
  padding: 40px;
  text-align: center;
  background: #f5f5f5;
  border: 2px dashed #ccc;
  border-radius: 8px;
}

/**
 * Dashboard Icon Transforms
 * Specific rotation/transform for icons
 */
.icon-refresh {
  transform: rotate(-90deg);
}

.icon-exit {
  transform: scaleX(-1);
}

/**
 * Info Card Icon Images
 * 40px icons used inside info-card-icon wrappers
 */
.info-card-icon img {
  width: 40px;
  height: 40px;
}
.info-card-icon img.icon-rotated {
  transform: rotate(-90deg);
}

/**
 * Small inline icons
 * Used in lists and text
 */
.small-inline-icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
  vertical-align: middle;
}

/**
 * Responsive styles for dashboard
 */
@media (max-width: 768px) {
  #customer-dashboard .dashboard-layout {
    grid-template-columns: 1fr;
  }
  .dashboard-info-section .dashboard-info-grid {
    grid-template-columns: 1fr;
  }
}
/**
 * @file _index.scss
 *
 * @description
 * Central index file that forwards all partials
 * Allows single @use statement in main SCSS file
 *
 * @version 1.0.8
 * @created 20251008-144218
 * @modified 20251116-112744
 *
 * @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
 */
.account-settings-hero .hero-title {
  color: white !important;
}

.account-settings-container {
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
}
.account-settings-container .success-message,
.account-settings-container .error-message {
  padding: 20px 25px;
  margin-bottom: 30px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  animation: slideIn 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  font-size: 1.05em;
  transition: all 0.3s ease;
}
.account-settings-container .success-message .message-icon,
.account-settings-container .error-message .message-icon {
  font-size: 28px;
  margin-right: 15px;
  flex-shrink: 0;
}
.account-settings-container .success-message {
  background: linear-gradient(135deg, #e8f5e9, #f1f8e9);
  border-left: 4px solid #4caf50;
  color: #2e7d32;
}
.account-settings-container .error-message {
  background: linear-gradient(135deg, #ffebee, #fff3e0);
  border-left: 4px solid #FF6B35;
  color: #c62828;
}
.account-settings-container .error-message.pm4u-password-error {
  background: linear-gradient(135deg, #ffebee, #fce4ec);
  border-left: 4px solid #d32f2f;
  box-shadow: 0 6px 20px rgba(211, 47, 47, 0.2);
  font-weight: 500;
}
.account-settings-container .error-message.pm4u-password-error .message-icon {
  font-size: 32px;
  animation: shake 0.5s ease;
}
.account-settings-container .settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 30px;
  margin-bottom: 40px;
}
@media (max-width: 768px) {
  .account-settings-container .settings-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
.account-settings-container .settings-card {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}
.account-settings-container .settings-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}
.account-settings-container .settings-card.full-width {
  grid-column: 1/-1;
}
.account-settings-container .settings-card h2 {
  color: #073a6a;
  font-size: 1.5em;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}
.account-settings-container .settings-card h2 .card-icon {
  font-size: 1.2em;
  margin-right: 10px;
}
.account-settings-container .settings-card .current-value {
  background: #f8f9fa;
  padding: 10px 15px;
  border-radius: 6px;
  margin-bottom: 20px;
}
.account-settings-container .settings-card .current-value strong {
  color: #073a6a;
}
.account-settings-container .settings-card .security-hint {
  color: #666;
  font-size: 0.9em;
  margin-bottom: 20px;
}
.account-settings-container .settings-card .no-address,
.account-settings-container .settings-card .no-history {
  color: #999;
  font-style: italic;
  padding: 20px;
  text-align: center;
  background: #f8f9fa;
  border-radius: 6px;
}
.account-settings-container .settings-form .form-group {
  margin-bottom: 20px;
}
.account-settings-container .settings-form .form-group label {
  display: block;
  color: #212529;
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 0.95em;
}
.account-settings-container .settings-form .form-group input[type=email],
.account-settings-container .settings-form .form-group input[type=text],
.account-settings-container .settings-form .form-group input[type=password] {
  width: 100%;
  padding: 12px 15px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 1em;
  transition: all 0.3s ease;
  background: white;
}
.account-settings-container .settings-form .form-group input[type=email].field-changed,
.account-settings-container .settings-form .form-group input[type=text].field-changed,
.account-settings-container .settings-form .form-group input[type=password].field-changed {
  border-color: #4caf50;
  background: linear-gradient(90deg, white 98%, #4caf50 98%);
}
.account-settings-container .settings-form .form-group input[type=email]:invalid,
.account-settings-container .settings-form .form-group input[type=text]:invalid,
.account-settings-container .settings-form .form-group input[type=password]:invalid {
  border-color: #FF6B35;
}
.account-settings-container .settings-form .password-input-wrapper {
  position: relative;
}
.account-settings-container .settings-form .password-input-wrapper input[type=password],
.account-settings-container .settings-form .password-input-wrapper input[type=text] {
  padding-right: 45px;
}
.account-settings-container .settings-form .password-input-wrapper .toggle-password {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
  color: #666;
  transition: color 0.3s ease;
}
.account-settings-container .settings-form .password-input-wrapper .toggle-password:hover {
  color: #073a6a;
}
.account-settings-container .settings-form .password-input-wrapper .toggle-password .dashicons {
  font-size: 20px;
  width: 20px;
  height: 20px;
}
.account-settings-container .settings-form .info-box {
  background: linear-gradient(135deg, #e3f2fd, #e8eaf6);
  border-left: 4px solid #00ACC1;
  padding: 15px 20px;
  margin: 20px 0;
  border-radius: 6px;
}
.account-settings-container .settings-form .info-box strong {
  color: #073a6a;
  display: block;
  margin-bottom: 8px;
}
.account-settings-container .settings-form .info-box ul {
  margin: 10px 0 0 20px;
}
.account-settings-container .settings-form .info-box ul li {
  margin-bottom: 5px;
  color: #555;
}
.account-settings-container .settings-form .info-box.orphaned-user-warning {
  background: linear-gradient(135deg, #fff8e1, #fff3e0);
  border-left: 4px solid #ff9800;
  color: #795548;
}
.account-settings-container .settings-form .info-box.orphaned-user-warning strong {
  color: #e65100;
}
.account-settings-container .settings-form .fallback-info {
  margin-top: 15px;
  text-align: center;
}
.account-settings-container .settings-form .fallback-info p {
  margin: 0;
}
.account-settings-container .settings-form .fallback-info p small {
  color: #666;
}
.account-settings-container .settings-form .fallback-info p small a {
  color: #669999;
  text-decoration: none;
}
.account-settings-container .settings-form .fallback-info p small a:hover {
  text-decoration: underline;
}
.account-settings-container .address-display {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}
.account-settings-container .address-display p {
  margin: 5px 0;
  color: #212529;
}
.account-settings-container .address-display p:first-child {
  font-weight: 600;
  color: #073a6a;
}
.account-settings-container .history-table-wrapper {
  overflow-x: auto;
}
.account-settings-container .history-table-wrapper .history-table {
  width: 100%;
  border-collapse: collapse;
}
.account-settings-container .history-table-wrapper .history-table thead {
  background: linear-gradient(135deg, #073a6a, #669999);
}
.account-settings-container .history-table-wrapper .history-table thead th {
  color: white;
  padding: 12px;
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
}
.account-settings-container .history-table-wrapper .history-table tbody tr {
  border-bottom: 1px solid #e0e0e0;
  transition: background 0.2s ease;
}
.account-settings-container .history-table-wrapper .history-table tbody tr:hover {
  background: #f8f9fa;
}
.account-settings-container .history-table-wrapper .history-table tbody tr td {
  padding: 12px;
  color: #212529;
}
.account-settings-container .history-table-wrapper .history-table tbody tr td .change-type {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.85em;
  font-weight: 600;
}
.account-settings-container .history-table-wrapper .history-table tbody tr td .change-type.email {
  background: #e3f2fd;
  color: #1976d2;
}
.account-settings-container .history-table-wrapper .history-table tbody tr td .change-type.password {
  background: #f3e5f5;
  color: #7b1fa2;
}
.account-settings-container .history-table-wrapper .history-table tbody tr td .change-type.address {
  background: #fff3e0;
  color: #f57c00;
}
.account-settings-container .history-table-wrapper .history-table tbody tr td .status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.85em;
  font-weight: 600;
}
.account-settings-container .history-table-wrapper .history-table tbody tr td .status-badge.status-completed {
  background: #e8f5e9;
  color: #2e7d32;
}
.account-settings-container .history-table-wrapper .history-table tbody tr td .status-badge.status-pending {
  background: #fff3e0;
  color: #f57c00;
}
.account-settings-container .history-table-wrapper .history-table tbody tr td .status-badge.status-failed {
  background: #ffebee;
  color: #c62828;
}
.account-settings-container .history-table-wrapper .history-table tbody tr td .status-badge.status-cancelled {
  background: #f5f5f5;
  color: #616161;
}
.account-settings-container .support-form-section {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 2px solid #e0e0e0;
}
.account-settings-container .support-form-section h2 {
  color: #073a6a;
  font-size: 1.8em;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
}
.account-settings-container .support-form-section h2 .section-icon {
  font-size: 1.2em;
  margin-right: 15px;
}
.account-settings-container .support-form-section .support-card {
  background: white;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.account-settings-container .support-form-section .support-card > p {
  color: #666;
  margin-bottom: 30px;
  font-size: 1.1em;
}
.account-settings-container .support-form-section .support-card .support-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
}
.account-settings-container .support-form-section .support-card .support-options .support-option {
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  text-align: center;
  transition: all 0.3s ease;
}
.account-settings-container .support-form-section .support-card .support-options .support-option:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.account-settings-container .support-form-section .support-card .support-options .support-option h3 {
  color: #073a6a;
  font-size: 1.2em;
  margin-bottom: 10px;
}
.account-settings-container .support-form-section .support-card .support-options .support-option p {
  color: #666;
  margin-bottom: 15px;
  font-size: 0.95em;
}
.account-settings-container .navigation-footer {
  text-align: center;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #e0e0e0;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-5px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(5px);
  }
}
/**
 * @file _index.scss
 *
 * @description
 * Central index file that forwards all partials
 * Allows single @use statement in main SCSS file
 *
 * @version 1.0.8
 * @created 20251008-144218
 * @modified 20251116-112744
 *
 * @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 _shop-landing.scss
 *
 * @description
 * Shop landing page styles including hero, pricing cards, and demo banner
 * Features gradient backgrounds and interactive elements
 * MIGRATED TO UNIFIED BUTTON SYSTEM (Phase 2, 20251101-111500)
 *
 * @version 2.0.0
 * @created 20250926-161337
 * @modified 20251101-111500
 *
 * @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
 */
/* ========================================
   SHOP LANDING PAGE
   ======================================== */
/**
 * Shop Hero specific styles
 * Extends base hero-section from _hero-sections.scss
 * Uses rocket icon (1f680.svg) to symbolize launching/boosting websites
 */
.shop-hero-section a {
  color: white;
  text-decoration: underline;
  transition: color 0.3s ease;
}
.shop-hero-section a:hover {
  color: #ff6b35;
}
.shop-hero-section::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 20px 20px;
  animation: moveBackground 60s linear infinite;
  z-index: 1;
}
.shop-hero-section .hero-cta.btn-group-2 {
  justify-content: center;
}

/**
 * Background animation
 */
@keyframes moveBackground {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(20px, 20px);
  }
}
/**
 * Products Section
 */
.products-section {
  padding: 80px 20px;
  background: #f8f9fa;
}
.products-section .container {
  max-width: 1200px;
  margin: 0 auto;
}
.products-section .section-title {
  font-size: 36px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 60px;
  color: #1e1e1e;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.products-section .section-title img {
  width: 32px;
  height: 32px;
}

/**
 * Features Section
 */
.features-section {
  padding: 80px 20px;
  background: white;
}
.features-section .container {
  max-width: 1200px;
  margin: 0 auto;
}
.features-section .section-title {
  font-size: 36px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 60px;
  color: #1e1e1e;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.features-section .section-title img {
  width: 32px;
  height: 32px;
}
.features-section .features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px;
  margin-top: 60px;
}
.features-section .features-grid .feature-item {
  text-align: center;
  padding: 30px;
  border-radius: 12px;
  background: #f8f9fa;
  transition: all 0.3s ease;
}
.features-section .features-grid .feature-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  background: white;
}
.features-section .features-grid .feature-item:hover img {
  animation: pulse 2s infinite;
}
.features-section .features-grid .feature-item img {
  margin-bottom: 20px;
  width: 48px;
  height: 48px;
}
.features-section .features-grid .feature-item h3 {
  font-size: 22px;
  font-weight: 700;
  color: #1e1e1e;
  margin: 0 0 15px;
}
.features-section .features-grid .feature-item p {
  color: #666;
  line-height: 1.6;
  margin: 0;
}

/**
 * CTA Section
 */
.cta-section {
  background: linear-gradient(135deg, #37474F 0%, #00ACC1 100%);
  color: white;
  padding: 80px 20px;
  text-align: center;
}
.cta-section a {
  color: white;
  text-decoration: underline;
  transition: color 0.3s ease;
}
.cta-section a:hover {
  color: #ff6b35;
}
.cta-section .container {
  max-width: 1200px;
  margin: 0 auto;
}
.cta-section .cta-title {
  font-size: 36px;
  font-weight: 700;
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.cta-section .cta-title img {
  width: 32px;
  height: 32px;
}
.cta-section .cta-subtitle {
  font-size: 20px;
  margin: 0 0 40px;
  opacity: 0.95;
}
.cta-section .cta-buttons.btn-group-2 {
  justify-content: center;
}

/**
 * Legacy shop landing page styles (keeping for compatibility)
 */
#shop-landing-page {
  /**
   * Hero section with gradient
   */
}
#shop-landing-page .hero {
  background: linear-gradient(135deg, #073a6a 0%, #669999 100%);
  padding: 100px 0;
  color: white;
}
#shop-landing-page .hero-content {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 0 20px;
}
#shop-landing-page .hero-text h1 {
  font-size: 48px;
  margin-bottom: 20px;
  color: white;
}
#shop-landing-page .hero-text p {
  font-size: 20px;
  line-height: 1.6;
  margin-bottom: 30px;
}
#shop-landing-page {
  /**
   * Badge element
   */
}
#shop-landing-page .badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.2);
  padding: 5px 15px;
  border-radius: 20px;
  font-size: 14px;
  margin-bottom: 20px;
}
#shop-landing-page {
  /**
   * Hero buttons - NOW USING UNIFIED BUTTON SYSTEM
   * HTML should use: <div class="btn-group-2">
   *   <a href="#" class="btn-first btn-normal">...</a>
   *   <a href="#" class="btn-third btn-normal">...</a>
   * </div>
   * No custom styles needed - all handled by _buttons4u.scss
   */
  /**
   * Demo cookie banner
   */
}
#shop-landing-page .demo-cookie-banner {
  background: white;
  color: #333;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  cursor: not-allowed;
}
#shop-landing-page .demo-cookie-banner h3 {
  color: #073a6a;
  margin-bottom: 15px;
}
#shop-landing-page .demo-cookie-banner p {
  color: #666;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 20px;
}
#shop-landing-page .demo-cookie-banner .cookie-options {
  margin-bottom: 25px;
}
#shop-landing-page .demo-cookie-banner .cookie-option {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
}
#shop-landing-page .demo-cookie-banner .cookie-option span {
  color: #333;
  font-size: 14px;
}
#shop-landing-page .demo-cookie-banner {
  /**
   * Cookie toggle switches
   */
}
#shop-landing-page .demo-cookie-banner .cookie-toggle {
  width: 50px;
  height: 26px;
  background: #ddd;
  border-radius: 13px;
  position: relative;
  cursor: pointer;
  transition: background 0.3s;
}
#shop-landing-page .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 4px rgba(0, 0, 0, 0.2);
}
#shop-landing-page .demo-cookie-banner .cookie-toggle.active {
  background: #4caf50;
}
#shop-landing-page .demo-cookie-banner .cookie-toggle.active:after {
  transform: translateX(24px);
}
#shop-landing-page .demo-cookie-banner .cookie-toggle[data-service=necessary] {
  background: #4caf50;
  cursor: not-allowed;
  opacity: 0.8;
}
#shop-landing-page .demo-cookie-banner .cookie-toggle[data-service=necessary]:after {
  transform: translateX(24px);
}
#shop-landing-page .demo-cookie-banner {
  /**
   * Demo buttons - NOW USING UNIFIED BUTTON SYSTEM
   * HTML should use: <div class="btn-group-2">
   *   <button class="btn-first btn-small">...</button>
   *   <button class="btn-checkout btn-small">...</button>
   * </div>
   * Note: Using btn-small for compact demo banner
   * No custom styles needed - all handled by _buttons4u.scss
   */
}
#shop-landing-page {
  /**
   * Features section
   */
}
#shop-landing-page .features {
  padding: 80px 0;
  background: #f9fafb;
}
#shop-landing-page {
  /**
   * Pricing section
   */
}
#shop-landing-page .pricing {
  padding: 80px 0;
}
#shop-landing-page .pricing .pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 1000px;
  margin: 0 auto;
}
#shop-landing-page .pricing {
  /**
   * Price card
   */
}
#shop-landing-page .pricing .price-card {
  background: white;
  border-radius: 12px;
  padding: 40px;
  text-align: center;
  position: relative;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}
#shop-landing-page .pricing .price-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}
#shop-landing-page .pricing .price-card.featured {
  border: 2px solid #073a6a;
  transform: scale(1.05);
}
#shop-landing-page .pricing .price-card.featured .popular-badge {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  background: #073a6a;
  color: white;
  padding: 5px 20px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}
#shop-landing-page .pricing .price-card h3 {
  color: #073a6a;
  margin-bottom: 20px;
}
#shop-landing-page .pricing .price-card .price {
  font-size: 48px;
  font-weight: bold;
  color: #073a6a;
  margin-bottom: 30px;
}
#shop-landing-page .pricing .price-card .price small {
  font-size: 18px;
  color: #666;
  font-weight: normal;
}
#shop-landing-page .pricing .price-card .price-features {
  list-style: none;
  padding: 0;
  margin-bottom: 30px;
}
#shop-landing-page .pricing .price-card .price-features li {
  padding: 10px 0;
  border-bottom: 1px solid #eee;
  color: #666;
  display: flex;
  align-items: center;
  gap: 10px;
}
#shop-landing-page .pricing .price-card .price-features li::before {
  content: "✓";
  color: #4caf50;
  font-weight: bold;
  font-size: 18px;
  flex-shrink: 0;
}
#shop-landing-page .pricing .price-card .price-features li:last-child {
  border-bottom: none;
}
#shop-landing-page .pricing .price-card .btn-checkout {
  width: 100%;
}

/**
 * Responsive styles for shop landing page
 */
@media (max-width: 768px) {
  .section-title {
    font-size: 28px !important;
  }
  .features-grid {
    grid-template-columns: 1fr !important;
    gap: 30px;
  }
  #shop-landing-page .hero-content {
    grid-template-columns: 1fr;
    text-align: center;
  }
  #shop-landing-page .pricing-grid {
    grid-template-columns: 1fr !important;
  }
}
/* ========================================
   CHECKOUT PAGE (§ 312j BGB Compliant)
   Created: 20251026-121614
   ======================================== */
.checkout-page-wrapper {
  padding: 60px 0;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  min-height: calc(100vh - 200px);
}
.checkout-page-wrapper .checkout-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.checkout-page-wrapper .checkout-header {
  text-align: center;
  margin-bottom: 40px;
}
.checkout-page-wrapper .checkout-header h1 {
  color: #073a6a;
  font-size: 36px;
  margin-bottom: 10px;
}
.checkout-page-wrapper .checkout-header p {
  color: #666;
  font-size: 16px;
}
.checkout-page-wrapper {
  /* 2-Column Grid (Desktop) / 2-Row Stack (Mobile) */
}
.checkout-page-wrapper .checkout-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
@media (max-width: 768px) {
  .checkout-page-wrapper .checkout-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}
.checkout-page-wrapper {
  /* Product Summary Box (Left Column) */
}
.checkout-page-wrapper .checkout-product-box {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  position: relative;
}
.checkout-page-wrapper .checkout-product-box h2 {
  color: #073a6a;
  font-size: 24px;
  margin-bottom: 20px;
}
.checkout-page-wrapper .checkout-product-box .product-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  background: #4caf50;
  color: white;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}
.checkout-page-wrapper .checkout-product-box .product-price {
  font-size: 48px;
  font-weight: bold;
  color: #073a6a;
  margin-bottom: 15px;
}
.checkout-page-wrapper .checkout-product-box .product-price del {
  font-size: 28px;
  color: #999;
  margin-right: 10px;
}
.checkout-page-wrapper .checkout-product-box .product-price small {
  font-size: 18px;
  color: #666;
  font-weight: normal;
}
.checkout-page-wrapper .checkout-product-box .discount-label {
  display: inline-block;
  background: #fff3cd;
  color: #856404;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 25px;
}
.checkout-page-wrapper .checkout-product-box h3 {
  font-size: 18px;
  color: #073a6a;
  margin: 25px 0 15px 0;
}
.checkout-page-wrapper .checkout-product-box .product-features-list {
  list-style: none;
  padding: 0;
  margin: 0 0 25px 0;
}
.checkout-page-wrapper .checkout-product-box .product-features-list li {
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  color: #333;
}
.checkout-page-wrapper .checkout-product-box .product-features-list li:last-child {
  border-bottom: none;
}
.checkout-page-wrapper .checkout-product-box .product-features-list li .inline-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.checkout-page-wrapper .checkout-product-box .product-features-list li::before {
  content: "✓";
  color: #4caf50 !important;
  font-size: 18px;
  font-weight: bold;
  display: none;
}
.checkout-page-wrapper .checkout-product-box .product-features-list li:has(.inline-icon)::before {
  display: none;
}
.checkout-page-wrapper .checkout-product-box .btn-back-to-product {
  display: inline-block;
  color: #4caf50;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.3s;
}
.checkout-page-wrapper .checkout-product-box .btn-back-to-product:hover {
  color: #073a6a;
  text-decoration: underline;
}
.checkout-page-wrapper {
  /* Legal Checkboxes Box (Right Column) */
}
.checkout-page-wrapper .checkout-legal-box {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (min-width: 769px) {
  .checkout-page-wrapper .checkout-legal-box {
    position: sticky;
    top: 130px;
    align-self: flex-start;
  }
}
.checkout-page-wrapper .checkout-legal-box h3 {
  color: #073a6a;
  font-size: 20px;
  margin-bottom: 10px;
}
.checkout-page-wrapper .checkout-legal-box .legal-intro {
  font-size: 14px;
  color: #666;
  margin-bottom: 15px;
}
.checkout-page-wrapper .checkout-legal-box .legal-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 20px;
}
.checkout-page-wrapper .checkout-legal-box .checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}
.checkout-page-wrapper .checkout-legal-box .checkbox-label .legal-checkbox {
  margin-top: 4px;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  cursor: pointer;
}
.checkout-page-wrapper .checkout-legal-box .checkbox-label .checkbox-text {
  font-size: 14px;
  color: #333;
  line-height: 1.6;
}
.checkout-page-wrapper .checkout-legal-box .checkbox-label .checkbox-text a {
  color: #4caf50;
  text-decoration: underline;
}
.checkout-page-wrapper .checkout-legal-box .checkbox-label .checkbox-text a:hover {
  color: #073a6a;
}
.checkout-page-wrapper .checkout-legal-box .stripe-info-box {
  background: #f8f9fa;
  border-left: 4px solid #4caf50;
  padding: 15px;
  border-radius: 6px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.checkout-page-wrapper .checkout-legal-box .stripe-info-box .inline-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-top: 2px;
}
.checkout-page-wrapper .checkout-legal-box .stripe-info-box .stripe-info-text {
  flex: 1;
}
.checkout-page-wrapper .checkout-legal-box .stripe-info-box .stripe-info-text h4 {
  color: #073a6a;
  font-size: 16px;
  margin: 0 0 8px 0;
}
.checkout-page-wrapper .checkout-legal-box .stripe-info-box .stripe-info-text p {
  font-size: 14px;
  color: #666;
  margin: 0;
  line-height: 1.5;
}
.checkout-page-wrapper .checkout-legal-box .btn-checkout {
  width: 100%;
}
.checkout-page-wrapper .checkout-legal-box .checkout-error-msg {
  background: #fee;
  color: #c33;
  padding: 12px 15px;
  border-radius: 6px;
  font-size: 14px;
  margin-top: 15px;
  border: 1px solid #fcc;
}
.checkout-page-wrapper {
  /* Error State */
}
.checkout-page-wrapper .checkout-error-container {
  padding: 60px 20px;
}
.checkout-page-wrapper .checkout-error-box {
  background: #fee;
  border: 2px solid #fcc;
  border-radius: 12px;
  padding: 40px;
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}
.checkout-page-wrapper .checkout-error-box h2 {
  color: #c33;
  margin-bottom: 15px;
}
.checkout-page-wrapper .checkout-error-box h2 img {
  vertical-align: middle;
}
.checkout-page-wrapper .checkout-error-box p {
  color: #c33;
  font-size: 16px;
  margin-bottom: 25px;
}
.checkout-page-wrapper {
  /* Loading State */
}
.checkout-page-wrapper .checkout-loading {
  text-align: center;
  padding: 60px 20px;
}
.checkout-page-wrapper .checkout-loading .spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #f0f0f0;
  border-top-color: #073a6a;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 20px;
}
.checkout-page-wrapper .checkout-loading p {
  color: #666;
  font-size: 16px;
}

/* ========================================
   RELEASE INFO SECTION (RP4U)
   Created: 20251026-145000
   ======================================== */
.release-info {
  padding: 80px 20px;
  background: #f8f9fa;
}
.release-info .container {
  max-width: 1200px;
  margin: 0 auto;
}
.release-info .section-header {
  text-align: center;
  margin-bottom: 60px;
}
.release-info .section-header h2 {
  font-size: 36px;
  font-weight: 700;
  color: #073a6a;
  margin-bottom: 15px;
}
.release-info .section-header p {
  font-size: 18px;
  color: #666;
}
.release-info .release-timeline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-bottom: 50px;
}
@media (max-width: 768px) {
  .release-info .release-timeline {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
.release-info .timeline-item {
  background: white;
  border: 2px solid #e1e1e1;
  border-radius: 12px;
  padding: 30px;
  text-align: center;
  transition: all 0.3s ease;
}
.release-info .timeline-item.active {
  border-color: #669999;
  background: #f0f9f9;
}
.release-info .timeline-item:first-child .timeline-badge {
  background: #4caf50;
}
.release-info .timeline-item .timeline-badge {
  width: 60px;
  height: 60px;
  background: #073a6a;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}
.release-info .timeline-item .timeline-badge img {
  filter: brightness(0) invert(1);
}
.release-info .timeline-item h4 {
  font-size: 20px;
  font-weight: 700;
  color: #073a6a;
  margin-bottom: 10px;
}
.release-info .timeline-item p {
  color: #666;
  font-size: 15px;
  margin: 0;
}
.release-info .release-cta {
  text-align: center;
  padding: 40px;
  background: linear-gradient(135deg, #073a6a 0%, #669999 100%);
  border-radius: 12px;
  color: white;
}
.release-info .release-cta p {
  margin: 0 0 20px;
  font-size: 20px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
/**
 * @file _index.scss
 *
 * @description
 * Central index file that forwards all partials
 * Allows single @use statement in main SCSS file
 *
 * @version 1.0.8
 * @created 20251008-144218
 * @modified 20251116-112744
 *
 * @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 _4uweb-landing.scss
 *
 * @description
 * Styles for 4uweb.de main landing page
 * Includes hero section with network globe, service cards,
 * and team presentation (no portfolio)
 *
 * @version 1.5.0
 * @created 20251020-083622
 * @modified 20251123-085457
 *
 * @author Frank Hackenberg
 * @author_uri https://foryourweb.de
 * Copyright (c) [fh] - 4UWeb
 */
/**
 * 4uweb.de Hero Section
 * Extends universal .hero-section from _hero-sections.scss
 * Only overrides: moving dots pattern
 */
.fouruweb-hero::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 20px 20px;
  animation: moveBackground 60s linear infinite;
  z-index: 1;
}
@keyframes moveBackground {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(20px, 20px);
  }
}
.fouruweb-hero .hero-content {
  position: relative;
  z-index: 10;
}
.fouruweb-hero .hero-icon-wrapper .hero-icon {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
  position: relative;
}
.fouruweb-hero .hero-icon-wrapper .hero-icon img {
  width: 144px;
  height: 144px;
}
@media (max-width: 768px) {
  .fouruweb-hero .hero-icon-wrapper {
    margin-bottom: 30px;
  }
  .fouruweb-hero .hero-icon-wrapper .hero-icon {
    width: 150px;
    height: 150px;
  }
  .fouruweb-hero .hero-icon-wrapper .hero-icon img {
    width: 90px;
    height: 90px;
  }
}
@media (max-width: 480px) {
  .fouruweb-hero .hero-icon-wrapper .hero-icon {
    width: 120px;
    height: 120px;
  }
  .fouruweb-hero .hero-icon-wrapper .hero-icon img {
    width: 70px;
    height: 70px;
  }
}
.fouruweb-hero:hover .hero-icon {
  animation: pulseOnce 1.2s ease-out;
}
.fouruweb-hero .hero-title {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 20px;
  color: #000;
  animation: fadeInUp 0.8s ease;
}
@media (max-width: 768px) {
  .fouruweb-hero .hero-title {
    font-size: 2.5rem;
  }
}
.fouruweb-hero .hero-subtitle {
  font-size: 24px;
  font-weight: 400;
  line-height: 1.6;
  margin: 0 0 20px;
  color: white;
  opacity: 0.95;
  animation: fadeInUp 0.8s ease 0.2s backwards;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 768px) {
  .fouruweb-hero .hero-subtitle {
    font-size: 1.2rem;
  }
}
.fouruweb-hero .hero-cta {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  justify-content: center;
}
.fouruweb-hero .hero-cta .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.3s ease;
  background: white;
  color: #073a6a;
  border: none;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.fouruweb-hero .hero-cta .btn-primary img {
  width: 20px;
  height: 20px;
}
.fouruweb-hero .hero-cta .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  background: #FF6B35;
  color: white;
}
.fouruweb-hero .hero-cta .btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.3s ease;
  background: transparent;
  color: white;
  border: 2px solid white;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.fouruweb-hero .hero-cta .btn-secondary img {
  width: 20px;
  height: 20px;
}
.fouruweb-hero .hero-cta .btn-secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  background: white;
  color: #073a6a;
}
@media (max-width: 768px) {
  .fouruweb-hero .hero-cta .btn-primary,
  .fouruweb-hero .hero-cta .btn-secondary {
    width: 100%;
    justify-content: center;
  }
}

.fouruweb-services {
  padding: 100px 20px;
  background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
}
.fouruweb-services .section-title {
  text-align: center;
  font-size: 2.5rem;
  color: #073a6a;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}
.fouruweb-services .section-title img {
  width: 32px;
  height: 32px;
}
.fouruweb-services .section-subtitle {
  text-align: center;
  font-size: 1.2rem;
  color: #37474F;
  max-width: 700px;
  margin: 0 auto 60px;
  line-height: 1.6;
}
.fouruweb-services .services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  max-width: 1400px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .fouruweb-services .services-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
.fouruweb-services .service-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 35px 28px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 51, 102, 0.1);
  position: relative;
  overflow: hidden;
}
.fouruweb-services .service-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #073a6a, #669999);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.fouruweb-services .service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
  border-color: #669999;
}
.fouruweb-services .service-card:hover::before {
  transform: scaleX(1);
}
.fouruweb-services .service-card:hover .service-icon img {
  transform: scale(1.1) rotate(5deg);
}
.fouruweb-services .service-card .service-icon {
  margin-bottom: 20px;
}
.fouruweb-services .service-card .service-icon img {
  width: 48px;
  height: 48px;
  transition: transform 0.3s ease;
}
.fouruweb-services .service-card h3 {
  font-size: 1.4rem;
  color: #073a6a;
  margin-bottom: 15px;
  font-weight: 700;
}
.fouruweb-services .service-card p {
  font-size: 1rem;
  line-height: 1.6;
  color: #666;
  margin: 0;
}

.fouruweb-portfolio {
  padding: 100px 20px;
  background: #073a6a;
  color: #ffffff;
}
.fouruweb-portfolio .section-title {
  text-align: center;
  font-size: 2.5rem;
  color: #ffffff;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}
.fouruweb-portfolio .section-title img {
  width: 32px;
  height: 32px;
}
.fouruweb-portfolio .section-subtitle {
  text-align: center;
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.8);
  max-width: 700px;
  margin: 0 auto 60px;
  line-height: 1.6;
}
.fouruweb-portfolio .portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 35px;
  max-width: 1400px;
  margin: 0 auto 60px;
}
@media (max-width: 768px) {
  .fouruweb-portfolio .portfolio-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }
}
.fouruweb-portfolio .portfolio-item {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: all 0.3s ease;
}
.fouruweb-portfolio .portfolio-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
  border-color: #669999;
}
.fouruweb-portfolio .portfolio-item:hover .portfolio-overlay {
  opacity: 1;
}
.fouruweb-portfolio .portfolio-item .portfolio-image {
  position: relative;
  background: white;
  padding: 60px 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}
.fouruweb-portfolio .portfolio-item .portfolio-image > img {
  width: 64px;
  height: 64px;
}
.fouruweb-portfolio .portfolio-item .portfolio-image .portfolio-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.fouruweb-portfolio .portfolio-item .portfolio-image .portfolio-overlay .portfolio-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  background: #FF6B35;
  color: #ffffff;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
  transition: all 0.3s ease;
}
.fouruweb-portfolio .portfolio-item .portfolio-image .portfolio-overlay .portfolio-link img {
  width: 24px;
  height: 24px;
}
.fouruweb-portfolio .portfolio-item .portfolio-image .portfolio-overlay .portfolio-link:hover {
  background: rgb(255, 69.6336633663, 2);
  transform: scale(1.05);
}
.fouruweb-portfolio .portfolio-item .portfolio-image .portfolio-overlay .portfolio-tag {
  display: inline-block;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
}
.fouruweb-portfolio .portfolio-item .portfolio-content {
  padding: 30px 25px;
}
.fouruweb-portfolio .portfolio-item .portfolio-content h3 {
  font-size: 1.4rem;
  color: #ffffff;
  margin-bottom: 12px;
  font-weight: 700;
}
.fouruweb-portfolio .portfolio-item .portfolio-content p {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}
.fouruweb-portfolio .team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 35px;
  max-width: 1400px;
  margin: 0 auto 60px;
}
@media (max-width: 768px) {
  .fouruweb-portfolio .team-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }
}
.fouruweb-portfolio .team-member {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 40px 30px;
  text-align: center;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.fouruweb-portfolio .team-member:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
  border-color: #669999;
}
.fouruweb-portfolio .team-member .team-avatar {
  margin-bottom: 25px;
  display: flex;
  justify-content: center;
}
.fouruweb-portfolio .team-member .team-avatar .avatar-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.fouruweb-portfolio .team-member .team-avatar .avatar-circle img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  transition: filter 0.4s ease;
  filter: grayscale(66%);
}
.fouruweb-portfolio .team-member:hover .team-avatar .avatar-circle img {
  filter: grayscale(0%);
}
.fouruweb-portfolio .team-member .team-info h3 {
  font-size: 1.5rem;
  color: #ffffff;
  margin-bottom: 8px;
  font-weight: 700;
}
.fouruweb-portfolio .team-member .team-info h3 a {
  color: #ffffff;
  text-decoration: none;
}
.fouruweb-portfolio .team-member .team-info h3 a:hover {
  color: #bdddf4;
}
.fouruweb-portfolio .team-member .team-info .team-role {
  font-size: 1rem;
  color: #bdddf4;
  font-weight: 600;
  margin-bottom: 20px;
}
.fouruweb-portfolio .team-member .team-info .team-description {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 15px;
}
.fouruweb-portfolio .team-member .team-info .team-profile-link {
  display: inline-block;
  color: #bdddf4 !important;
  text-decoration: none !important;
  font-size: 0.95rem;
  font-weight: 600;
  transition: color 0.2s ease, letter-spacing 0.2s ease;
}
.fouruweb-portfolio .team-member .team-info .team-profile-link:hover {
  color: #ffffff !important;
  letter-spacing: 0.03em;
}

.fouruweb-cta {
  padding: 120px 20px;
  background: linear-gradient(135deg, #37474F 0%, #00ACC1 100%);
  color: #ffffff;
  position: relative;
  overflow: hidden;
}
.fouruweb-cta::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: patternMove 30s linear infinite;
  opacity: 0.3;
}
@keyframes patternMove {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(50px, 50px);
  }
}
.fouruweb-cta .cta-content {
  position: relative;
  z-index: 10;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}
.fouruweb-cta .cta-content .cta-icon {
  margin-bottom: 30px;
}
.fouruweb-cta .cta-content .cta-icon img {
  width: 64px;
  height: 64px;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}
.fouruweb-cta .cta-content h2 {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 20px;
  color: #ffffff;
}
@media (max-width: 768px) {
  .fouruweb-cta .cta-content h2 {
    font-size: 2.2rem;
  }
}
.fouruweb-cta .cta-content p {
  font-size: 1.3rem;
  line-height: 1.6;
  margin-bottom: 40px;
  color: rgba(255, 255, 255, 0.9);
}
.fouruweb-cta .cta-content .cta-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}
.fouruweb-cta .cta-content .cta-buttons .btn-large {
  padding: 18px 36px;
  font-size: 1.2rem;
}
.fouruweb-cta .cta-content .cta-buttons .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #FF6B35;
  color: #ffffff;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.3);
}
.fouruweb-cta .cta-content .cta-buttons .btn-primary img {
  width: 24px;
  height: 24px;
}
.fouruweb-cta .cta-content .cta-buttons .btn-primary:hover {
  background: rgb(255, 69.6336633663, 2);
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}
.fouruweb-cta .cta-content .cta-buttons .btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  color: #ffffff;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  border: 2px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
}
.fouruweb-cta .cta-content .cta-buttons .btn-secondary img {
  width: 24px;
  height: 24px;
}
.fouruweb-cta .cta-content .cta-buttons .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

@media (max-width: 1200px) {
  .fouruweb-hero .hero-title {
    font-size: 3rem;
  }
  .fouruweb-hero .hero-subtitle {
    font-size: 1.2rem;
  }
}
@media (max-width: 968px) {
  .fouruweb-hero {
    min-height: auto;
    padding: 80px 20px 60px;
  }
  .fouruweb-services,
  .fouruweb-portfolio,
  .fouruweb-team {
    padding: 70px 20px;
  }
  .fouruweb-cta {
    padding: 80px 20px;
  }
  .section-title {
    font-size: 2rem !important;
  }
  .section-subtitle {
    font-size: 1.1rem !important;
  }
}
@media (max-width: 768px) {
  .fouruweb-hero .hero-visual .globe-container {
    max-width: 350px;
  }
  .service-card,
  .portfolio-item,
  .team-member {
    padding: 25px 20px;
  }
  .hero-cta .btn-primary,
  .hero-cta .btn-secondary,
  .hero-cta .btn-tertiary {
    width: 100%;
    justify-content: center;
  }
  .cta-buttons .btn-large {
    width: 100%;
    justify-content: center;
  }
}
/**
 * @file _index.scss
 *
 * @description
 * Central index file that forwards all partials
 * Allows single @use statement in main SCSS file
 *
 * @version 1.0.8
 * @created 20251008-144218
 * @modified 20251116-112744
 *
 * @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 _contact-page.scss
 *
 * @description
 * Contact page styles including info cards, form styling, and responsive layout
 * Features icon cards with hover effects and modern form design
 * MIGRATED TO UNIFIED BUTTON SYSTEM (Phase 2, 20251101-111500)
 *
 * @version 2.0.0
 * @created 20250926-161338
 * @modified 20251101-111500
 *
 * @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
 */
/* ========================================
   CONTACT PAGE
   ======================================== */
/**
 * Contact Hero Section
 * Hero with handshake icon (1f91d.svg) representing partnership/collaboration
 * Base styles defined in _hero-sections.scss
 * Icon pulses once on hover over entire hero section
 */
/**
 * Contact Info Cards Section
 */
.contact-info-section {
  padding: 60px 20px;
  max-width: 1200px;
  margin: 0 auto;
}
.contact-info-section .contact-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin-bottom: 60px;
}
.contact-info-section {
  /**
   * Individual contact card
   */
}
.contact-info-section .contact-card {
  background: white;
  padding: 40px 30px;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.contact-info-section .contact-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #073a6a, #669999);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}
.contact-info-section .contact-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}
.contact-info-section .contact-card:hover::before {
  transform: scaleX(1);
}
.contact-info-section .contact-card:hover .contact-card-icon {
  animation: pulse 2s infinite;
}
.contact-info-section .contact-card {
  /**
   * Card icon with gradient background
   */
}
.contact-info-section .contact-card .contact-card-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  background: linear-gradient(135deg, #073a6a, #669999);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.3s ease;
}
.contact-info-section .contact-card .contact-card-icon .twemoji-icon {
  width: 48px !important;
  height: 48px !important;
  max-width: 48px !important;
  max-height: 48px !important;
}
.contact-info-section .contact-card {
  /**
   * Card content
   */
}
.contact-info-section .contact-card h3 {
  font-size: 1.5rem;
  color: #333;
  margin-bottom: 10px;
  font-weight: 600;
}
.contact-info-section .contact-card p {
  color: #666;
  margin-bottom: 15px;
  font-size: 1rem;
}
.contact-info-section .contact-card .contact-link {
  color: #073a6a;
  font-weight: 600;
  text-decoration: none;
  font-size: 1.1rem;
  transition: color 0.3s ease;
}
.contact-info-section .contact-card .contact-link:hover {
  color: #669999;
  text-decoration: underline;
}
.contact-info-section .contact-card .contact-highlight {
  color: #073a6a;
  font-weight: 700;
  font-size: 1.2rem;
}

/**
 * Form Section Introduction
 */
.form-section-intro {
  text-align: center;
  margin: 60px auto 40px;
  max-width: 600px;
  padding: 0 20px;
}
.form-section-intro h2 {
  font-size: 2.5rem;
  color: #333;
  margin-bottom: 15px;
  font-weight: 700;
}
.form-section-intro p {
  font-size: 1.1rem;
  color: #666;
  line-height: 1.6;
}

/**
 * Formidable Forms Custom Styling
 */
.frm_forms {
  max-width: 1200px !important;
  margin: 0 auto;
  padding: 40px;
  background: white;
  border-radius: 20px;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);
  /**
   * Form field styling
   */
}
.frm_forms .frm_form_field {
  margin-bottom: 25px;
}
.frm_forms .frm_form_field label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #333;
  font-size: 1rem;
}
.frm_forms .frm_form_field input[type=text],
.frm_forms .frm_form_field input[type=email],
.frm_forms .frm_form_field textarea,
.frm_forms .frm_form_field select {
  width: 100%;
  padding: 15px;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  font-size: 1rem;
  transition: all 0.3s ease;
  background: #f8f9fa;
}
.frm_forms .frm_form_field textarea {
  min-height: 150px;
  resize: vertical;
}
.frm_forms {
  /**
   * Submit button - NOW USING UNIFIED BUTTON SYSTEM
   * HTML should use: <button class="btn-single btn-normal">Senden</button>
   * Formidable Forms: Add custom class "btn-single btn-normal" to form button
   * No custom styles needed - all handled by _buttons4u.scss
   */
}
.frm_forms .frm_submit {
  text-align: center;
  margin-top: 30px;
}

/**
 * Responsive styles for contact page
 */
@media (max-width: 768px) {
  .contact-info-section .contact-info-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .form-section-intro h2 {
    font-size: 2rem;
  }
  .frm_forms {
    padding: 25px;
    border-radius: 15px;
  }
}
/**
 * @file _index.scss
 *
 * @description
 * Central index file that forwards all partials
 * Allows single @use statement in main SCSS file
 *
 * @version 1.0.8
 * @created 20251008-144218
 * @modified 20251116-112744
 *
 * @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 _payment-success.scss
 *
 * @description
 * Payment success page styles including license display and next steps
 * Features success animations and license key presentation
 * MIGRATED TO UNIFIED BUTTON SYSTEM (Phase 2, 20251101-111500)
 *
 * @version 2.0.0
 * @created 20250926-161339
 * @modified 20251101-111500
 *
 * @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
 */
/* ========================================
   PAYMENT SUCCESS PAGE
   ======================================== */
/**
 * Payment Success Hero
 * Extended in _hero-sections.scss
 */
/**
 * License Display Section
 */
.license-display-section {
  padding: 40px 20px;
  max-width: 800px;
  margin: 0 auto;
}
.license-display-section .license-container h2 {
  font-size: 2rem;
  color: #073a6a;
  margin-bottom: 30px;
  text-align: center;
}
.license-display-section {
  /**
   * License box with key display
   */
}
.license-display-section .license-box {
  background: white;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  border: 2px solid #4caf50;
  margin-bottom: 30px;
  /**
   * License key display with copy button
   */
}
.license-display-section .license-box .license-key-display {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 25px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 10px;
}
.license-display-section .license-box .license-key-display .license-key {
  font-family: "Courier New", monospace;
  font-size: 1.2rem;
  font-weight: 600;
  color: #073a6a;
  letter-spacing: 1px;
  flex: 1;
  text-align: center;
}
.license-display-section .license-box .license-key-display .copy-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: linear-gradient(135deg, #00ACC1 0%, #4DD0E1 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}
.license-display-section .license-box .license-key-display .copy-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(0, 172, 193, 0.3);
}
.license-display-section .license-box .license-key-display .copy-btn.copied {
  background: linear-gradient(135deg, #4caf50 0%, #66bb6a 100%);
}
.license-display-section .license-box {
  /**
   * License details grid
   */
}
.license-display-section .license-box .license-details {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 20px;
}
.license-display-section .license-box .license-details .license-detail-row {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.license-display-section .license-box .license-details .license-detail-row .detail-label {
  font-size: 0.9rem;
  color: #669999;
  margin-bottom: 5px;
}
.license-display-section .license-box .license-details .license-detail-row .detail-value {
  font-size: 1.1rem;
  font-weight: 600;
  color: #073a6a;
}
.license-display-section .license-box .license-details .license-detail-row .detail-value.status-active {
  color: #4caf50;
}

/**
 * Info Box
 */
.info-box {
  background: #f0f9ff;
  border: 2px solid #00ACC1;
  border-radius: 12px;
  padding: 25px;
  margin-bottom: 30px;
}
.info-box .info-box-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.info-box .info-box-header .info-icon {
  font-size: 1.5rem;
}
.info-box .info-box-header h3 {
  margin: 0;
  color: #073a6a;
  font-size: 1.3rem;
}
.info-box .info-box-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.info-box .info-box-content li {
  padding: 10px 0;
  border-bottom: 1px solid rgba(0, 172, 193, 0.2);
  color: #37474F;
  line-height: 1.6;
}
.info-box .info-box-content li:last-child {
  border-bottom: none;
}
.info-box .info-box-content li strong {
  font-weight: 600;
}
.info-box .info-box-content li a {
  color: #00ACC1;
  text-decoration: none;
  font-weight: 600;
}
.info-box .info-box-content li a:hover {
  text-decoration: underline;
}

/**
 * Email Confirmation Box
 */
.email-confirmation {
  background: #e8f5e9;
  border-left: 4px solid #4caf50;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 30px;
}
.email-confirmation p {
  margin: 0 0 15px 0;
  color: #2e7d32;
  font-weight: 600;
}
.email-confirmation ol {
  margin: 0;
  padding-left: 25px;
  color: #37474F;
}
.email-confirmation ol li {
  margin-bottom: 8px;
}

/**
 * No License Warning Box
 */
.no-license-box {
  background: #fff3cd;
  border: 2px solid #ffc107;
  border-radius: 12px;
  padding: 30px;
  text-align: center;
}
.no-license-box h2 {
  color: #856404;
  margin-bottom: 15px;
}
.no-license-box p {
  color: #856404;
  margin-bottom: 15px;
}
.no-license-box .session-info {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(133, 100, 4, 0.2);
}
.no-license-box .session-info p {
  margin: 0;
  color: #856404;
  font-family: monospace;
}
.no-license-box .session-info p small {
  font-size: 0.9rem;
}

/**
 * Next Steps Section
 */
.next-steps-section {
  padding: 60px 20px;
  background: #f8f9fa;
}
.next-steps-section .next-steps-container {
  max-width: 1200px;
  margin: 0 auto;
}
.next-steps-section .next-steps-container h2 {
  text-align: center;
  font-size: 2rem;
  color: #073a6a;
  margin-bottom: 40px;
}
.next-steps-section .steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin-bottom: 50px;
}
.next-steps-section .steps-grid .step-card {
  background: white;
  padding: 30px;
  border-radius: 12px;
  position: relative;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}
.next-steps-section .steps-grid .step-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
.next-steps-section .steps-grid .step-card .step-number {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #FF6B35 0%, #FF8A65 100%);
  color: white;
  font-size: 1.3rem;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
}
.next-steps-section .steps-grid .step-card h4 {
  color: #073a6a;
  margin: 0 0 10px 0;
  font-size: 1.2rem;
}
.next-steps-section .steps-grid .step-card p {
  color: #669999;
  margin: 0 0 15px 0;
  line-height: 1.5;
}
.next-steps-section .steps-grid .step-card .step-link {
  color: #00ACC1;
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
}
.next-steps-section .steps-grid .step-card .step-link:hover {
  text-decoration: underline;
}
.next-steps-section .action-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

/**
 * Responsive styles
 */
@media (max-width: 768px) {
  .license-display-section .license-key-display {
    flex-direction: column;
  }
  .license-display-section .license-key-display .license-key {
    font-size: 1rem;
    word-break: break-all;
  }
  .license-display-section .license-key-display .copy-btn {
    width: 100%;
    justify-content: center;
  }
  .license-display-section .license-details {
    flex-direction: column;
    align-items: stretch;
  }
  .license-display-section .license-details .license-detail-row {
    flex-direction: row;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
  }
}
/**
 * Icon Helpers for Payment Success Page
 * Various inline icon sizes for different contexts
 */
.icon-inline {
  vertical-align: middle;
  margin-right: 4px;
}

.icon-inline-medium {
  vertical-align: middle;
  margin-right: 6px;
}

.icon-inline-large {
  vertical-align: middle;
  margin-left: 8px;
}

/**
 * @file _index.scss
 *
 * @description
 * Central index file that forwards all partials
 * Allows single @use statement in main SCSS file
 *
 * @version 1.0.8
 * @created 20251008-144218
 * @modified 20251116-112744
 *
 * @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 _documentation.scss
 *
 * @description
 * Documentation page styles including typography, code blocks,
 * info boxes and hierarchical heading styles
 *
 * @version 1.0.1
 * @created 20250926-161800
 * @modified 20250926-180543
 *
 * @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
 */
/* ========================================
   DOCUMENTATION STYLES
   ======================================== */
/**
 * Documentation Hero Section
 * Hero with book icon (1f4d6.svg) representing knowledge/documentation
 * Base styles defined in _hero-sections.scss
 * Icon pulses once on hover over entire hero section
 */
/**
 * Documentation Wrapper
 */
.cct4u-documentation-wrapper {
  padding: 60px 20px;
  background: #f8f9fa;
  /**
   * Main Documentation Container
   */
}
.cct4u-documentation-wrapper .cct4u-documentation {
  max-width: 1200px;
  margin: 0 auto;
  background: white;
  padding: 60px;
  border-radius: 15px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  line-height: 1.8;
  /**
   * Heading Hierarchy
   */
}
.cct4u-documentation-wrapper .cct4u-documentation h2 {
  border-bottom: 3px solid #073a6a;
  padding-bottom: 15px;
  margin-top: 40px;
  margin-bottom: 25px;
  color: #073a6a;
  font-size: 2rem;
  font-weight: 700;
}
.cct4u-documentation-wrapper .cct4u-documentation h2:first-child {
  margin-top: 0;
}
.cct4u-documentation-wrapper .cct4u-documentation h3 {
  color: #669999;
  margin-top: 30px;
  margin-bottom: 15px;
  font-size: 1.5rem;
  font-weight: 600;
}
.cct4u-documentation-wrapper .cct4u-documentation h4 {
  color: #37474F;
  margin-top: 25px;
  margin-bottom: 12px;
  font-size: 1.2rem;
  font-weight: 600;
}
.cct4u-documentation-wrapper .cct4u-documentation h5 {
  color: #073a6a;
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 1.1rem;
  font-weight: 600;
}
.cct4u-documentation-wrapper .cct4u-documentation {
  /**
   * Code Blocks
   */
}
.cct4u-documentation-wrapper .cct4u-documentation pre {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 10px;
  overflow-x: auto;
  font-size: 14px;
  border-left: 4px solid #669999;
  margin: 25px 0;
}
.cct4u-documentation-wrapper .cct4u-documentation pre code {
  background: transparent;
  color: inherit;
  padding: 0;
}
.cct4u-documentation-wrapper .cct4u-documentation code {
  background: #f1f1f1;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.9em;
  color: #d63384;
  font-family: "Courier New", monospace;
}
.cct4u-documentation-wrapper .cct4u-documentation {
  /**
   * Content Elements
   */
}
.cct4u-documentation-wrapper .cct4u-documentation hr {
  margin: 40px 0;
  border: none;
  border-top: 2px solid #e8e8e8;
}
.cct4u-documentation-wrapper .cct4u-documentation p {
  margin-bottom: 15px;
  color: #444;
  line-height: 1.8;
}
.cct4u-documentation-wrapper .cct4u-documentation {
  /**
   * Lists
   */
}
.cct4u-documentation-wrapper .cct4u-documentation ol, .cct4u-documentation-wrapper .cct4u-documentation ul {
  margin: 20px 0;
  padding-left: 25px;
}
.cct4u-documentation-wrapper .cct4u-documentation ol li, .cct4u-documentation-wrapper .cct4u-documentation ul li {
  margin-bottom: 12px;
  line-height: 1.8;
}
.cct4u-documentation-wrapper .cct4u-documentation ol li strong, .cct4u-documentation-wrapper .cct4u-documentation ul li strong {
  color: #073a6a;
  font-weight: 600;
}
.cct4u-documentation-wrapper .cct4u-documentation ol ol, .cct4u-documentation-wrapper .cct4u-documentation ul ul, .cct4u-documentation-wrapper .cct4u-documentation ol ul, .cct4u-documentation-wrapper .cct4u-documentation ul ol {
  margin-top: 10px;
  margin-bottom: 10px;
}

/**
 * Generic Documentation/FAQ Pages
 */
.docs-page,
.faq-page,
.changelog-page {
  min-height: 80vh;
}
.docs-page .page-hero,
.faq-page .page-hero,
.changelog-page .page-hero {
  background: linear-gradient(135deg, #073a6a 0%, #669999 100%);
  color: white;
  padding: 80px 0;
  text-align: center;
}
.docs-page .page-hero h1,
.faq-page .page-hero h1,
.changelog-page .page-hero h1 {
  color: white;
  margin-bottom: 10px;
  font-size: 48px;
}

/**
 * Responsive adjustments
 */
@media (max-width: 768px) {
  .cct4u-documentation-wrapper {
    padding: 30px 15px;
  }
  .cct4u-documentation-wrapper .cct4u-documentation {
    padding: 30px 20px;
    border-radius: 10px;
  }
  .cct4u-documentation-wrapper .cct4u-documentation h2 {
    font-size: 1.5rem;
  }
  .cct4u-documentation-wrapper .cct4u-documentation h3 {
    font-size: 1.3rem;
  }
  .cct4u-documentation-wrapper .cct4u-documentation pre {
    padding: 15px;
    font-size: 12px;
  }
}
/**
 * @file _index.scss
 *
 * @description
 * Central index file that forwards all partials
 * Allows single @use statement in main SCSS file
 *
 * @version 1.0.8
 * @created 20251008-144218
 * @modified 20251116-112744
 *
 * @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 _downloads-page.scss
 *
 * @description
 * Downloads page styles for plugin downloads.
 * Shows user's purchased plugins with download buttons.
 * Clean, modern design with Corporate Identity colors.
 * MIGRATED TO UNIFIED BUTTON SYSTEM (Phase 2, 20251101-111500)
 *
 * @version 2.2.0
 * @created 20251031-201419
 * @modified 20251103-170700
 *
 * @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
 */
/* ========================================
   DOWNLOADS PAGE
   ======================================== */
.downloads-page-wrapper {
  width: 100%;
  min-height: 60vh;
  scroll-behavior: smooth;
}

/* ========================================
   HERO SECTION - SPECIFIC STYLES
   ======================================== */
.downloads-hero::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 20px 20px;
  animation: moveBackground 60s linear infinite;
  z-index: 1;
}
.downloads-hero .hero-icon img {
  filter: none !important;
}

/* ========================================
   CONTENT SECTION
   ======================================== */
.downloads-content {
  padding: 60px 20px;
  background: #f5f7fa;
}
.downloads-content .container {
  max-width: 1200px;
  margin: 0 auto;
}

/* ========================================
   INFO BOX (Not logged in / No licenses)
   ======================================== */
.downloads-info-box {
  background: white;
  border-radius: 12px;
  padding: 60px 40px;
  text-align: center;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
  max-width: 600px;
  margin: 0 auto;
}
.downloads-info-box .info-box-icon {
  margin-bottom: 30px;
}
.downloads-info-box .info-box-icon img {
  opacity: 0.7;
}
.downloads-info-box .info-box-content h3 {
  color: #073a6a;
  font-size: 28px;
  margin-bottom: 20px;
  font-weight: 600;
}
.downloads-info-box .info-box-content p {
  color: #37474F;
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 30px;
}
.downloads-info-box .info-box-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ========================================
   DOWNLOADS GRID
   ======================================== */
.downloads-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 30px;
  margin-bottom: 60px;
}
@media (max-width: 768px) {
  .downloads-grid {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   DOWNLOAD CARD
   ======================================== */
.download-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  scroll-margin-top: 100px;
}
.download-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.12);
}
.download-card:target {
  animation: highlightCard 2s ease;
}

.download-card-header {
  padding: 30px 30px 20px;
  background: linear-gradient(135deg, rgba(7, 58, 106, 0.05) 0%, rgba(102, 153, 153, 0.05) 100%);
  border-bottom: 2px solid rgba(7, 58, 106, 0.1);
}
.download-card-header .download-card-icon {
  margin-bottom: 15px;
}
.download-card-header .download-card-icon img {
  opacity: 0.8;
}
.download-card-header h3 {
  color: #073a6a;
  font-size: 22px;
  font-weight: 600;
  margin: 0;
}

.download-card-body {
  padding: 25px 30px;
  flex: 1;
}
.download-card-body .download-description {
  color: #37474F;
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 20px;
}
.download-card-body .download-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 15px;
}
.download-card-body .download-meta .meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #666;
  font-size: 14px;
}
.download-card-body .download-meta .meta-item img {
  opacity: 0.6;
}
.download-card-body .download-warning {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 152, 0, 0.1);
  border-left: 3px solid #ff9800;
  padding: 12px 15px;
  border-radius: 6px;
  margin-top: 15px;
}
.download-card-body .download-warning img {
  flex-shrink: 0;
}
.download-card-body .download-warning span {
  color: #e65100;
  font-size: 14px;
  font-weight: 500;
}

/* ========================================
   VERSION SELECTOR
   ======================================== */
.download-version-selector {
  padding: 20px 30px;
  background: linear-gradient(135deg, rgba(7, 58, 106, 0.02) 0%, rgba(102, 153, 153, 0.02) 100%);
  border-top: 1px solid #e9ecef;
  border-bottom: 1px solid #e9ecef;
}
.download-version-selector label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #073a6a;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
}
.download-version-selector label img {
  opacity: 0.7;
}
.download-version-selector .version-selector {
  width: 100%;
  padding: 0 15px;
  border: 2px solid #e1e8ed;
  border-radius: 8px;
  background: white;
  color: #37474F;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23455A64" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3e%3cpolyline points="6 9 12 15 18 9"%3e%3c/polyline%3e%3c/svg%3e');
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  padding-right: 40px;
}
.download-version-selector .version-selector:hover {
  border-color: #669999;
  box-shadow: 0 2px 8px rgba(102, 153, 153, 0.15);
}
.download-version-selector .version-selector:focus {
  outline: none;
  border-color: #073a6a;
  box-shadow: 0 0 0 3px rgba(7, 58, 106, 0.1);
}
.download-version-selector .version-selector option {
  padding: 10px;
  color: #37474F;
}

.download-card-footer {
  padding: 20px 30px;
  background: #f8f9fa;
  border-top: 1px solid #e9ecef;
}
.download-card-footer .btn-group-2 {
  flex-direction: column !important;
  width: 100%;
  gap: 10px;
}
.download-card-footer .btn-group-2 > * {
  width: 100%;
}

/* ========================================
   HELP SECTION
   ======================================== */
.downloads-help-section {
  background: white;
  border-radius: 12px;
  padding: 40px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
}
.downloads-help-section h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #073a6a;
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 30px;
}
.downloads-help-section h3 img {
  opacity: 0.8;
}
.downloads-help-section .help-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}
.downloads-help-section .help-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 30px 20px;
  background: linear-gradient(135deg, rgba(7, 58, 106, 0.05) 0%, rgba(102, 153, 153, 0.05) 100%);
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}
.downloads-help-section .help-card:hover {
  background: linear-gradient(135deg, rgba(7, 58, 106, 0.1) 0%, rgba(102, 153, 153, 0.1) 100%);
  border-color: #669999;
  transform: translateY(-3px);
}
.downloads-help-section .help-card img {
  margin-bottom: 15px;
  opacity: 0.8;
}
.downloads-help-section .help-card h4 {
  color: #073a6a;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}
.downloads-help-section .help-card p {
  color: #37474F;
  font-size: 14px;
  margin: 0;
}

/* ========================================
   BUTTONS (General) - NOW USING UNIFIED BUTTON SYSTEM
   ======================================== */
/* ========================================
   DOWNLOAD NOTIFICATIONS
   ======================================== */
.download-notification {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 99999;
  background: white;
  padding: 20px 25px;
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transform: translateX(400px);
  transition: all 0.3s ease;
}
.download-notification.show {
  opacity: 1;
  transform: translateX(0);
}
.download-notification.success {
  border-left: 4px solid #4caf50;
}
.download-notification.success .notification-icon {
  color: #4caf50;
  background: rgba(76, 175, 80, 0.1);
}
.download-notification.error {
  border-left: 4px solid #f44336;
}
.download-notification.error .notification-icon {
  color: #f44336;
  background: rgba(244, 67, 54, 0.1);
}
.download-notification .notification-content {
  display: flex;
  align-items: center;
  gap: 15px;
}
.download-notification .notification-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 18px;
}
.download-notification .notification-message {
  color: #37474F;
  font-size: 15px;
  font-weight: 500;
}
@media (max-width: 480px) {
  .download-notification {
    right: 10px;
    left: 10px;
    top: 10px;
  }
}

/* ========================================
   ANIMATIONS
   ======================================== */
@keyframes moveBackground {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(20px, 20px);
  }
}
@keyframes highlightCard {
  0% {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 30px rgba(102, 153, 153, 0.6), 0 10px 40px rgba(0, 0, 0, 0.15);
    transform: scale(1.02);
  }
  100% {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    transform: scale(1);
  }
}
/**
 * @file _index.scss
 *
 * @description
 * Central index file that forwards all partials
 * Allows single @use statement in main SCSS file
 *
 * @version 1.0.8
 * @created 20251008-144218
 * @modified 20251116-112744
 *
 * @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
 */
.faq-hero .hero-title {
  color: white;
}

.faq-container {
  max-width: 1000px;
  margin: 60px auto;
  padding: 0 20px;
}
@media (max-width: 768px) {
  .faq-container {
    margin: 40px auto;
  }
}

.faq-category {
  margin-bottom: 60px;
}
.faq-category:last-of-type {
  margin-bottom: 40px;
}
.faq-category .category-title {
  color: #073a6a;
  font-size: 1.8em;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  padding-bottom: 15px;
  border-bottom: 3px solid #669999;
}
.faq-category .category-title .category-icon {
  font-size: 1.3em;
  margin-right: 15px;
}
@media (max-width: 768px) {
  .faq-category .category-title {
    font-size: 1.5em;
  }
}

.faq-item {
  background: white;
  border-radius: 12px;
  margin-bottom: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: all 0.3s ease;
}
.faq-item:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}
.faq-item .faq-question {
  width: 100%;
  padding: 20px 25px;
  background: white;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  transition: all 0.3s ease;
}
.faq-item .faq-question:hover {
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
}
.faq-item .faq-question:hover .question-text {
  color: #669999;
}
.faq-item .faq-question .question-text {
  font-size: 1.1em;
  font-weight: 600;
  color: #212529;
  flex: 1;
  padding-right: 15px;
  transition: color 0.3s ease;
}
@media (max-width: 768px) {
  .faq-item .faq-question .question-text {
    font-size: 1em;
  }
}
.faq-item .faq-question .faq-icon {
  font-size: 1.2em;
  color: #669999;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}
.faq-item .faq-question[aria-expanded=true] {
  background: linear-gradient(135deg, #073a6a, #669999);
}
.faq-item .faq-question[aria-expanded=true] .question-text {
  color: white;
}
.faq-item .faq-question[aria-expanded=true] .faq-icon {
  transform: rotate(180deg);
  color: white;
}
.faq-item .faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-in-out;
}
.faq-item .faq-answer.active {
  max-height: 2000px;
}
.faq-item .faq-answer .faq-answer-content {
  padding: 25px;
  background: #fafbfc;
  border-top: 2px solid #f8f9fa;
}
.faq-item .faq-answer p {
  color: #212529;
  line-height: 1.8;
  margin-bottom: 15px;
}
.faq-item .faq-answer p:last-child {
  margin-bottom: 0;
}
.faq-item .faq-answer ol, .faq-item .faq-answer ul {
  margin: 15px 0;
  padding-left: 25px;
}
.faq-item .faq-answer ol li, .faq-item .faq-answer ul li {
  color: #212529;
  line-height: 1.8;
  margin-bottom: 10px;
}
.faq-item .faq-answer ol li:last-child, .faq-item .faq-answer ul li:last-child {
  margin-bottom: 0;
}
.faq-item .faq-answer ol {
  counter-reset: item;
}
.faq-item .faq-answer ol li {
  counter-increment: item;
}
.faq-item .faq-answer ol li::marker {
  font-weight: 600;
  color: #669999;
}
.faq-item .faq-answer ul li::marker {
  color: #669999;
}
.faq-item .faq-answer a {
  color: #669999;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s ease;
}
.faq-item .faq-answer a:hover {
  color: #073a6a;
  text-decoration: underline;
}
.faq-item .faq-answer strong {
  color: #073a6a;
  font-weight: 600;
}
.faq-item .faq-answer .faq-table {
  width: 100%;
  margin: 20px 0;
  border-collapse: collapse;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.faq-item .faq-answer .faq-table thead {
  background: linear-gradient(135deg, #073a6a, #669999);
}
.faq-item .faq-answer .faq-table thead th {
  color: white;
  padding: 15px;
  text-align: left;
  font-weight: 600;
  font-size: 0.95em;
}
.faq-item .faq-answer .faq-table tbody tr {
  border-bottom: 1px solid #e0e0e0;
  transition: background 0.2s ease;
}
.faq-item .faq-answer .faq-table tbody tr:hover {
  background: #f8f9fa;
}
.faq-item .faq-answer .faq-table tbody tr:last-child {
  border-bottom: none;
}
.faq-item .faq-answer .faq-table tbody tr td {
  padding: 12px 15px;
  color: #212529;
}
.faq-item .faq-answer .faq-table tbody tr td:first-child {
  font-weight: 600;
}
@media (max-width: 768px) {
  .faq-item .faq-answer .faq-table {
    font-size: 0.9em;
  }
  .faq-item .faq-answer .faq-table thead th,
  .faq-item .faq-answer .faq-table tbody td {
    padding: 10px;
  }
}

.faq-support-cta {
  background: linear-gradient(135deg, #f8f9fa, #ffffff);
  border-radius: 16px;
  padding: 40px;
  text-align: center;
  margin-top: 60px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.faq-support-cta h3 {
  color: #073a6a;
  font-size: 2em;
  margin-bottom: 15px;
}
@media (max-width: 768px) {
  .faq-support-cta h3 {
    font-size: 1.6em;
  }
}
.faq-support-cta p {
  color: #212529;
  font-size: 1.1em;
  margin-bottom: 25px;
}
@media (max-width: 768px) {
  .faq-support-cta p {
    font-size: 1em;
  }
}
.faq-support-cta .btn-primary {
  display: inline-flex;
  align-items: center;
  padding: 15px 40px;
  background: linear-gradient(135deg, #073a6a, #669999);
  color: white;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1.1em;
  transition: all 0.3s ease;
}
.faq-support-cta .btn-primary .dashicons {
  margin-right: 10px;
  font-size: 20px;
}
.faq-support-cta .btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(7, 58, 106, 0.4);
}
@media (max-width: 768px) {
  .faq-support-cta .btn-primary {
    padding: 12px 30px;
    font-size: 1em;
  }
}

.timeline-heading {
  color: #073a6a;
  margin-top: 20px;
}
.timeline-heading .timeline-icon {
  vertical-align: middle;
  margin-right: 6px;
}

.timeline-box {
  padding: 15px;
  border-left: 4px solid;
  margin: 15px 0;
}
.timeline-box.grace-period {
  background: #f8f9fa;
  border-left-color: #00acc1;
}
.timeline-box.feature-lock {
  background: #fff3cd;
  border-left-color: #ffc107;
}
.timeline-box.final-warning {
  background: #f8d7da;
  border-left-color: #dc3545;
}
.timeline-box.reset-box {
  background: #721c24;
  color: white;
  border-left-color: #a94442;
}
.timeline-box.reset-box p {
  color: white;
}
.timeline-box.reset-box ul {
  color: white;
}
.timeline-box .box-title {
  margin: 0 0 8px 0;
}
.timeline-box .box-title strong {
  font-weight: 600;
}
.timeline-box ul {
  margin: 0;
  padding-left: 20px;
}
.timeline-box ul li {
  margin-bottom: 6px;
}
.timeline-box ul li:last-child {
  margin-bottom: 0;
}

.feature-heading {
  color: #073a6a;
  margin-top: 25px;
}
.feature-heading .feature-icon {
  vertical-align: middle;
  margin-right: 6px;
}

.icon-inline {
  vertical-align: middle;
  margin-right: 4px;
}

.faq-container .navigation-footer {
  text-align: center;
  margin-top: 40px;
  padding-top: 30px;
  border-top: 2px solid #e0e0e0;
}
.faq-container .navigation-footer .btn-back {
  display: inline-flex;
  align-items: center;
  padding: 12px 30px;
  background: #ffffff;
  color: #212529;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.3s ease;
}
.faq-container .navigation-footer .btn-back .dashicons {
  margin-right: 10px;
}
.faq-container .navigation-footer .btn-back:hover {
  background: rgb(229.5, 229.5, 229.5);
  transform: translateY(-2px);
}

/**
 * @file _index.scss
 *
 * @description
 * Central index file that forwards all partials
 * Allows single @use statement in main SCSS file
 *
 * @version 1.0.8
 * @created 20251008-144218
 * @modified 20251116-112744
 *
 * @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
 */
.fh-hero .hero-title {
  color: white;
}

.fh-landing-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 30px 60px;
}

.fh-landing-container .section-header {
  text-align: center;
  margin-bottom: 50px;
}

.fh-landing-container .section-title {
  color: #073a6a;
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}
.fh-landing-container .section-title .section-icon {
  display: flex;
  align-items: center;
}

.fh-landing-container .section-subtitle {
  font-size: 1.15rem;
  color: #64748b;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.6;
}

.story-section,
.skills-section,
.contact-section {
  scroll-margin-top: 110px;
}

.story-section {
  padding: 40px 0 60px;
}

.story-intro {
  text-align: center;
  font-size: 1.1rem;
  color: #64748b;
  margin-bottom: 50px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}

.career-timeline {
  position: relative;
  padding-left: 160px;
  margin-left: 20px;
}
.career-timeline::before {
  content: "";
  position: absolute;
  left: 120px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  background: linear-gradient(180deg, #073a6a 0%, #669999 100%);
  border-radius: 3px;
}

.timeline-item {
  position: relative;
  margin-bottom: 35px;
}
.timeline-item:last-child {
  margin-bottom: 0;
}
.timeline-item .timeline-marker {
  position: absolute;
  left: -160px;
  top: 5px;
  width: 110px;
  text-align: right;
}
.timeline-item .timeline-marker .timeline-year {
  display: inline-block;
  background: linear-gradient(135deg, #073a6a 0%, #669999 100%);
  color: white;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 6px 14px;
  border-radius: 20px;
  box-shadow: 0 3px 12px rgba(7, 58, 106, 0.25);
  white-space: nowrap;
}
.timeline-item::before {
  content: "";
  position: absolute;
  left: -46px;
  top: 12px;
  width: 15px;
  height: 15px;
  background: white;
  border: 3px solid #669999;
  border-radius: 50%;
  z-index: 1;
}
.timeline-item .timeline-content {
  background: white;
  padding: 25px 30px;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  border-left: 4px solid #669999;
  transition: all 0.3s ease;
}
.timeline-item .timeline-content:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}
.timeline-item .timeline-content h3 {
  color: #073a6a;
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 12px;
}
.timeline-item .timeline-content p {
  color: #64748b;
  line-height: 1.7;
  margin: 0 0 10px;
  font-size: 0.95rem;
}
.timeline-item .timeline-content p:last-child {
  margin-bottom: 0;
}

.skills-section {
  padding: 60px 40px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  margin: 40px -30px;
  border-radius: 0;
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
}

.skill-category {
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}
.skill-category:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}
.skill-category h3 {
  color: #073a6a;
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 2px solid #669999;
}
.skill-category h3 img {
  width: 20px;
  height: 20px;
}
.skill-category ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.skill-category ul li {
  padding: 6px 0;
  color: #64748b;
  font-size: 0.85rem;
  border-bottom: 1px solid #f0f0f0;
}
.skill-category ul li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.contact-section {
  padding: 60px 0;
}

.contact-content {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: start;
}

.contact-form-wrapper {
  background: white;
  padding: 0;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.contact-form-wrapper .frm_forms .frm_form_fields {
  padding: 0;
}
.contact-form-wrapper .frm_forms .frm_form_field {
  margin-bottom: 18px;
}
.contact-form-wrapper .frm_forms .frm_primary_label {
  display: block;
  font-weight: 600;
  color: #073a6a;
  margin-bottom: 6px;
  font-size: 0.9rem;
}
.contact-form-wrapper .frm_forms input[type=text],
.contact-form-wrapper .frm_forms input[type=email],
.contact-form-wrapper .frm_forms input[type=tel],
.contact-form-wrapper .frm_forms input[type=url],
.contact-form-wrapper .frm_forms textarea {
  width: 100%;
  padding: 10px 14px;
  border: 2px solid #e2e8f0;
  border-radius: 6px;
  font-size: 0.95rem;
  transition: all 0.2s ease;
  background: #f8fafc;
  box-sizing: border-box;
}
.contact-form-wrapper .frm_forms input[type=text]:focus,
.contact-form-wrapper .frm_forms input[type=email]:focus,
.contact-form-wrapper .frm_forms input[type=tel]:focus,
.contact-form-wrapper .frm_forms input[type=url]:focus,
.contact-form-wrapper .frm_forms textarea:focus {
  outline: none;
  border-color: #073a6a;
  background: white;
  box-shadow: 0 0 0 3px rgba(7, 58, 106, 0.1);
}
.contact-form-wrapper .frm_forms textarea {
  resize: vertical;
  min-height: 120px;
}
.contact-form-wrapper .frm_forms .frm_submit {
  margin-top: 20px;
}
.contact-form-wrapper .frm_forms .frm_submit button,
.contact-form-wrapper .frm_forms .frm_submit input[type=submit] {
  width: 100%;
  padding: 14px 28px;
  background: linear-gradient(135deg, #073a6a 0%, rgb(3.8407079646, 31.8230088496, 58.1592920354) 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}
.contact-form-wrapper .frm_forms .frm_submit button:hover,
.contact-form-wrapper .frm_forms .frm_submit input[type=submit]:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(7, 58, 106, 0.3);
}
.contact-form-wrapper .frm_forms .frm_error {
  color: #dc2626;
  font-size: 0.85rem;
  margin-top: 4px;
}
.contact-form-wrapper .frm_forms .frm_required {
  color: #dc2626;
}
.contact-form-wrapper .frm_forms .frm_message {
  padding: 15px;
  background: #dcfce7;
  border: 1px solid #86efac;
  border-radius: 6px;
  color: #166534;
  margin-bottom: 20px;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px;
  background: #f8fafc;
  border-radius: 8px;
  transition: all 0.2s ease;
}
.contact-info-item:hover {
  background: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
.contact-info-item > img {
  flex-shrink: 0;
  margin-top: 2px;
  width: 22px;
  height: 22px;
}
.contact-info-item > div {
  flex: 1;
}
.contact-info-item strong {
  display: block;
  color: #073a6a;
  font-size: 0.9rem;
  margin-bottom: 4px;
}
.contact-info-item p {
  margin: 0;
  color: #64748b;
  font-size: 0.9rem;
}
.contact-info-item small {
  display: block;
  margin-top: 4px;
  color: #94a3b8;
  font-size: 0.8rem;
}
.contact-info-item a {
  color: #669999;
  text-decoration: none;
}
.contact-info-item a:hover {
  text-decoration: underline;
}
.contact-info-item .btn-download,
.contact-info-item .btn-protected,
.contact-info-item .btn-blog {
  display: inline-block;
  min-width: 220px;
  padding: 10px 20px;
  background: #073a6a;
  color: white;
  border-radius: 5px;
  font-size: 0.85rem;
  text-align: center;
  text-decoration: none !important;
  transition: all 0.2s ease;
  line-height: 16px;
}
.contact-info-item .btn-download:hover,
.contact-info-item .btn-protected:hover,
.contact-info-item .btn-blog:hover {
  background: rgb(3.8407079646, 31.8230088496, 58.1592920354);
  text-decoration: none;
  color: white;
}
.contact-info-item .btn-protected {
  background: #669999;
}
.contact-info-item .btn-protected:hover {
  background: rgb(81.6, 122.4, 122.4);
}
.contact-info-item .btn-blog {
  background: #64748b;
}
.contact-info-item .btn-blog:hover {
  background: rgb(78.6610878661, 91.2468619247, 109.3389121339);
}

.fh-landing-container .navigation-footer {
  margin-top: 40px;
  text-align: center;
}

.fh-protected-container {
  padding-top: 40px;
}

.protected-documents {
  margin-bottom: 60px;
}

.documents-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.document-card {
  background: white;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: all 0.3s ease;
}
.document-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.document-card.document-unavailable {
  opacity: 0.6;
}

.document-icon {
  margin-bottom: 15px;
}
.document-icon img {
  width: 48px;
  height: 48px;
}

.document-info {
  margin-bottom: 20px;
}
.document-info h3 {
  color: #073a6a;
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 8px;
}
.document-info p {
  color: #64748b;
  font-size: 0.9rem;
  margin: 0;
  line-height: 1.5;
}

.document-action {
  margin-top: auto;
}

.btn-document-download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: linear-gradient(135deg, #073a6a 0%, rgb(3.8407079646, 31.8230088496, 58.1592920354) 100%);
  color: white;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}
.btn-document-download:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(7, 58, 106, 0.3);
  color: white;
  text-decoration: none;
}
.btn-document-download img {
  width: 20px;
  height: 20px;
}

.document-pending {
  color: #94a3b8;
  font-size: 0.9rem;
  font-style: italic;
}

.btn-document-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: linear-gradient(135deg, #669999 0%, rgb(81.6, 122.4, 122.4) 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}
.btn-document-toggle:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 153, 153, 0.3);
}
.btn-document-toggle img {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}

.document-card-expandable .document-dropdown {
  display: none;
  width: 100%;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #e2e8f0;
}
.document-card-expandable.expanded .document-dropdown {
  display: block;
}
.document-card-expandable.expanded .btn-document-toggle img {
  transform: rotate(180deg);
}

.document-list {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}
.document-list li {
  margin-bottom: 8px;
}
.document-list li:last-child {
  margin-bottom: 0;
}
.document-list li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 15px;
  background: #f8fafc;
  border-radius: 6px;
  color: #073a6a;
  text-decoration: none;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}
.document-list li a:hover {
  background: #073a6a;
  color: white;
}
.document-list li a:hover img {
  filter: brightness(0) invert(1);
}
.document-list li a img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.protected-contact {
  margin-bottom: 40px;
}

.contact-card {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 12px;
  padding: 30px;
  text-align: center;
}
.contact-card p {
  color: #64748b;
  font-size: 1.05rem;
  margin: 0 0 20px;
  line-height: 1.6;
}

.contact-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}

.protected-footer {
  text-align: center;
  padding: 20px 0;
  border-top: 1px solid #e2e8f0;
}
.protected-footer p {
  margin: 0;
  color: #94a3b8;
}

.access-denied {
  padding: 40px 0;
}

.access-card {
  background: white;
  border-radius: 12px;
  padding: 40px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  max-width: 700px;
  margin: 0 auto;
}
.access-card h2 {
  color: #073a6a;
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0 0 15px;
  text-align: center;
}
.access-card > p {
  color: #64748b;
  font-size: 1.05rem;
  line-height: 1.6;
  text-align: center;
  margin: 0 0 30px;
}

.access-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
  margin-bottom: 30px;
}

.access-option {
  background: #f8fafc;
  border-radius: 10px;
  padding: 25px;
  text-align: center;
}
.access-option h3 {
  color: #073a6a;
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.access-option p {
  color: #64748b;
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0 0 15px;
}

.back-link {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid #e2e8f0;
}
.back-link a {
  color: #669999;
  text-decoration: none;
  font-size: 0.95rem;
}
.back-link a:hover {
  text-decoration: underline;
}

.single-post .ast-article-single {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 30px 60px;
}
.single-post .ast-article-single .entry-header {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 2px solid #f1f5f9;
}
.single-post .ast-article-single .entry-header .entry-title {
  color: #073a6a;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 15px;
}
.single-post .ast-article-single .entry-header .entry-meta {
  color: #94a3b8;
  font-size: 0.9rem;
}
.single-post .ast-article-single .entry-header .entry-meta a {
  color: #669999;
  text-decoration: none;
}
.single-post .ast-article-single .entry-header .entry-meta a:hover {
  text-decoration: underline;
}
.single-post .ast-article-single .entry-content {
  color: #475569;
  font-size: 1.05rem;
  line-height: 1.8;
}
.single-post .ast-article-single .entry-content h2 {
  color: #073a6a;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 35px 0 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid #669999;
}
.single-post .ast-article-single .entry-content h3 {
  color: #073a6a;
  font-size: 1.25rem;
  font-weight: 700;
  margin: 30px 0 12px;
}
.single-post .ast-article-single .entry-content p {
  margin-bottom: 18px;
}
.single-post .ast-article-single .entry-content ul, .single-post .ast-article-single .entry-content ol {
  margin: 15px 0 25px 20px;
}
.single-post .ast-article-single .entry-content ul li, .single-post .ast-article-single .entry-content ol li {
  margin-bottom: 8px;
  line-height: 1.7;
}
.single-post .ast-article-single .entry-content a {
  color: #669999;
  text-decoration: none;
}
.single-post .ast-article-single .entry-content a:hover {
  text-decoration: underline;
}
.single-post .ast-article-single .entry-content code {
  background: #f1f5f9;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
  color: #073a6a;
}
.single-post .ast-article-single .entry-content pre {
  background: #1e293b;
  color: #e2e8f0;
  padding: 20px;
  border-radius: 8px;
  overflow-x: auto;
  margin: 20px 0;
}
.single-post .ast-article-single .entry-content pre code {
  background: none;
  padding: 0;
  color: inherit;
}
.single-post .ast-article-single .entry-content blockquote {
  border-left: 4px solid #669999;
  padding: 15px 25px;
  margin: 25px 0;
  background: #f8fafc;
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: #64748b;
}
.single-post .ast-article-single .post-navigation {
  margin-top: 40px;
  padding-top: 30px;
  border-top: 2px solid #f1f5f9;
}
.single-post .ast-article-single .post-navigation a {
  color: #669999;
  text-decoration: none;
}
.single-post .ast-article-single .post-navigation a:hover {
  text-decoration: underline;
}

.single-post .navigation.post-navigation {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px 30px 40px;
}

@media (max-width: 768px) {
  .single-post .ast-article-single {
    padding: 30px 20px 40px;
  }
  .single-post .ast-article-single .entry-header .entry-title {
    font-size: 1.6rem;
  }
  .single-post .ast-article-single .entry-content {
    font-size: 1rem;
  }
  .single-post .ast-article-single .entry-content h2 {
    font-size: 1.3rem;
  }
  .single-post .ast-article-single .entry-content h3 {
    font-size: 1.1rem;
  }
}
.fh-blog-listing {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 30px 60px;
}

.display-posts-listing {
  list-style: none;
  padding: 0;
  margin: 0;
}
.display-posts-listing .listing-item {
  background: white;
  border-radius: 12px;
  padding: 25px 30px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  border-left: 4px solid #669999;
  transition: all 0.3s ease;
}
.display-posts-listing .listing-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.display-posts-listing .listing-item:last-child {
  margin-bottom: 0;
}
.display-posts-listing .listing-item a.title {
  display: block;
  color: #073a6a;
  font-size: 1.3rem;
  font-weight: 700;
  text-decoration: none;
  margin-bottom: 8px;
  line-height: 1.4;
  transition: color 0.2s ease;
}
.display-posts-listing .listing-item a.title:hover {
  color: #669999;
}
.display-posts-listing .listing-item .date {
  display: block;
  color: #94a3b8;
  font-size: 0.85rem;
  margin-bottom: 12px;
  font-weight: 500;
}
.display-posts-listing .listing-item .excerpt {
  display: block;
  color: #64748b;
  font-size: 0.95rem;
  line-height: 1.7;
}
.display-posts-listing .listing-item .excerpt a.excerpt-more {
  color: #669999;
  font-weight: 600;
  text-decoration: none;
  margin-left: 5px;
}
.display-posts-listing .listing-item .excerpt a.excerpt-more:hover {
  text-decoration: underline;
}

@media (max-width: 1024px) {
  .skills-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .fh-landing-container {
    padding: 0 20px 40px;
  }
  .fh-landing-container .section-header {
    margin-bottom: 35px;
  }
  .fh-landing-container .section-title {
    font-size: 1.6rem;
    flex-direction: column;
    gap: 10px;
  }
  .fh-landing-container .section-subtitle {
    font-size: 1rem;
  }
  .story-intro {
    font-size: 1rem;
    margin-bottom: 40px;
  }
  .career-timeline {
    padding-left: 25px;
    margin-left: 0;
  }
  .career-timeline::before {
    left: 0;
    width: 2px;
  }
  .timeline-item {
    margin-bottom: 25px;
  }
  .timeline-item .timeline-marker {
    position: relative;
    left: 0;
    top: 0;
    width: auto;
    text-align: left;
    margin-bottom: 10px;
  }
  .timeline-item .timeline-marker .timeline-year {
    font-size: 0.75rem;
    padding: 5px 12px;
  }
  .timeline-item::before {
    left: -29px;
    top: 8px;
    width: 10px;
    height: 10px;
  }
  .timeline-item .timeline-content {
    padding: 18px;
  }
  .timeline-item .timeline-content h3 {
    font-size: 1.1rem;
  }
  .timeline-item .timeline-content p {
    font-size: 0.9rem;
  }
  .skills-section {
    padding: 40px 20px;
    margin: 30px -20px;
  }
  .skills-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .contact-section {
    padding: 40px 0;
  }
  .contact-content {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .contact-form-wrapper {
    padding: 0;
  }
  .fh-blog-listing {
    padding: 30px 20px 40px;
  }
  .display-posts-listing .listing-item {
    padding: 20px;
  }
  .display-posts-listing .listing-item a.title {
    font-size: 1.1rem;
  }
  .display-posts-listing .listing-item .date {
    font-size: 0.8rem;
  }
  .display-posts-listing .listing-item .excerpt {
    font-size: 0.9rem;
  }
}
/**
 * @file _index.scss
 *
 * @description
 * Central index file that forwards all partials
 * Allows single @use statement in main SCSS file
 *
 * @version 1.0.8
 * @created 20251008-144218
 * @modified 20251116-112744
 *
 * @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 _legal-pages.scss
 *
 * @description
 * Styles for legal pages (AGB, Impressum, Datenschutz, etc.)
 * Features sticky sidebar TOC, responsive design
 * with local Twemoji icons and corporate colors.
 *
 * NOTE: Hero section styles are now in _hero-sections.scss (Universal Hero System)
 *
 * @version 2.2.1
 * @created 20251020-154050
 * @modified 20251107-143600
 *
 * @author Frank Hackenberg
 * @author_uri https://foryourweb.de
 * Copyright (c) [fh] - 4UWeb
 *
 * @package Astra_Child_Theme
 *
 * @dependencies
 * colors4u.scss - Color variables
 * _hero-sections.scss - Universal Hero System (20251104-162220)
 *
 * @changelog
 * [20251107-143600] - Fixed anchor scroll offset for sticky header
 *                   - .legal-section: scroll-margin-top increased from 2rem to 130px
 *                   - .legal-subsection: Added scroll-margin-top 130px
 *                   - Anchors now properly visible below fixed header (130px)
 * [20251107-124915] - Adjusted TOC item and link styling for consistency
 *                   - .legal-toc-item: Added line-height: 1.2, changed margin-bottom to 0
 *                   - .legal-toc-link: Changed align-items to flex-start, padding-bottom to 0
 * [20251104-162220] - Removed .legal-hero CSS (moved to Universal Hero System)
 *                   - Legal pages now use .hero-section base class
 *                   - All hero styling centralized in _hero-sections.scss
 *
 * @license GPL-3.0-or-later
 * @license_uri https://www.gnu.org/licenses/gpl-3.0.html
 */
/* =========================
   LEGAL HERO SECTION
   ========================= */
/* =========================
   LEGAL CONTENT WRAPPER
   ========================= */
.legal-content-wrapper {
  /* Full-width background */
  background: #f8f9fa;
  padding: 3rem 0;
  /* Responsive: Reduce padding on mobile */
}
@media (max-width: 768px) {
  .legal-content-wrapper {
    padding: 2rem 0;
  }
}

.legal-container {
  /* Container with max-width and padding */
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  /* Two-column layout on desktop */
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 3rem;
  align-items: start;
  /* Responsive: Single column on tablet and mobile */
}
@media (max-width: 1024px) {
  .legal-container {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 0 1.5rem;
  }
}

/* =========================
   SIDEBAR: TABLE OF CONTENTS
   ========================= */
.legal-sidebar {
  /* Sticky sidebar on desktop */
  position: sticky;
  top: 130px;
  /* Responsive: Not sticky on mobile, show at top */
}
@media (max-width: 1024px) {
  .legal-sidebar {
    position: static;
    order: -1;
  }
}

.legal-toc {
  /* TOC box styling */
  background: #ffffff;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  /* Responsive: Adjust padding on mobile */
}
@media (max-width: 768px) {
  .legal-toc {
    padding: 1.25rem;
  }
}

.legal-toc-title {
  /* TOC title styling */
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 1rem 0;
  color: #073a6a;
  border-bottom: 2px solid #669999;
  padding-bottom: 0.75rem;
}

.legal-toc-nav {
  /* Navigation wrapper */
  margin: 0;
}

.legal-toc-list {
  /* Reset list styling */
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc-counter;
}

.legal-toc-item {
  /* TOC list item */
  line-height: 1.2;
  margin-bottom: 0;
  /* Last item no margin */
}
.legal-toc-item:last-child {
  margin-bottom: 0;
}

.legal-toc-link {
  /* TOC link styling */
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 0.5rem 0 0.5rem;
  color: #212529;
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.2s ease;
  font-size: 0.95rem;
  /* Icons in TOC links (20251026-143000) */
}
.legal-toc-link img {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  opacity: 0.8;
}
.legal-toc-link {
  /* Hover state */
}
.legal-toc-link:hover {
  background: #f8f9fa;
  color: #073a6a;
  transform: translateX(4px);
}
.legal-toc-link {
  /* Active/current section */
}
.legal-toc-link.active {
  background: #669999;
  color: #212529;
  font-weight: 600;
}

.legal-toc-icon {
  /* Icon in TOC (legacy class - now using img selector above) */
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  opacity: 0.8;
}

/* =========================
   MAIN CONTENT
   ========================= */
.legal-content {
  /* Content area styling */
  background: #ffffff;
  border-radius: 8px;
  padding: 2.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  /* Responsive: Reduce padding on mobile */
}
@media (max-width: 768px) {
  .legal-content {
    padding: 1.5rem;
    border-radius: 4px;
  }
}

/* =========================
   LEGAL SECTIONS
   ========================= */
.legal-section {
  /* Section spacing */
  margin-bottom: 3rem;
  /* Add anchor scroll offset for sticky header */
  scroll-margin-top: 110px;
  /* Last section no margin */
}
.legal-section:last-child {
  margin-bottom: 0;
}
.legal-section {
  /* Responsive: Reduce spacing on mobile */
}
@media (max-width: 768px) {
  .legal-section {
    margin-bottom: 2rem;
  }
}

.legal-section-title {
  /* Section title with icon */
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.75rem;
  font-weight: 700;
  color: #073a6a;
  margin: 0 0 1.5rem 0;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #669999;
  /* Responsive: Smaller font and gap on mobile */
}
@media (max-width: 768px) {
  .legal-section-title {
    font-size: 1.5rem;
    gap: 0.75rem;
  }
}

.legal-section-icon {
  /* Icon before section title */
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  opacity: 0.9;
  /* Responsive: Smaller icon on mobile */
}
@media (max-width: 768px) {
  .legal-section-icon {
    width: 28px;
    height: 28px;
  }
}

/* =========================
   CONTENT TYPOGRAPHY
   ========================= */
.legal-content {
  /* Paragraph styling */
}
.legal-content p {
  font-size: 1rem;
  line-height: 1.7;
  color: #212529;
  margin: 0 0 1.25rem 0;
  /* Last paragraph in section no margin */
}
.legal-content p:last-child {
  margin-bottom: 0;
}
.legal-content {
  /* Strong/Bold text */
}
.legal-content strong {
  font-weight: 700;
  color: #073a6a;
}
.legal-content {
  /* Links */
}
.legal-content a {
  color: #073a6a;
  text-decoration: underline;
  transition: color 0.2s ease;
  /* Hover state */
}
.legal-content a:hover {
  color: #5b8888;
  text-decoration: none;
}
.legal-content a {
  /* External link icon */
}
.legal-content a[target=_blank]::after {
  content: " ↗";
  font-size: 0.85em;
  opacity: 0.7;
}
.legal-content {
  /* Lists */
}
.legal-content ul, .legal-content ol {
  margin: 0 0 1.25rem 0;
  padding-left: 2rem;
  line-height: 1.7;
}
.legal-content ul li, .legal-content ol li {
  margin-bottom: 0.5rem;
}
.legal-content ul li:last-child, .legal-content ol li:last-child {
  margin-bottom: 0;
}
.legal-content {
  /* Headings within content (H3, H4) */
}
.legal-content h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #073a6a;
  margin: 2rem 0 1rem 0;
}
.legal-content h3:first-child {
  margin-top: 0;
}
.legal-content h4 {
  font-size: 1.125rem;
  font-weight: 600;
  color: #212529;
  margin: 1.5rem 0 0.75rem 0;
}
.legal-content h4:first-child {
  margin-top: 0;
}

/* =========================
   SMOOTH SCROLLING
   ========================= */
html {
  /* Enable smooth scrolling for anchor links */
  scroll-behavior: smooth;
}

/* =========================
   ACCESSIBILITY
   ========================= */
/* Focus styles for keyboard navigation - removed 20251026-140200 */
/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .legal-toc-link {
    transition: none;
  }
}
/* =========================
   PRINT STYLES
   ========================= */
@media print {
  .legal-hero {
    /* Remove gradient for print */
    background: #3a7d87;
    color: #000;
    padding: 2rem;
  }
  .legal-sidebar {
    /* Hide TOC in print */
    display: none;
  }
  .legal-container {
    /* Single column for print */
    grid-template-columns: 1fr;
    max-width: 100%;
    padding: 0;
  }
  .legal-content {
    /* Remove box styling for print */
    box-shadow: none;
    border-radius: 0;
    padding: 0;
  }
  .legal-section {
    /* Page break control */
    page-break-inside: avoid;
  }
  .legal-section-title {
    /* Keep title with content */
    page-break-after: avoid;
  }
}
/* ============================================================
   LEGAL INTRO & SPECIAL SECTIONS (20251104-152519)
   ============================================================ */
.legal-intro {
  /* Intro text before main sections */
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: #f8f9fa;
  border-left: 4px solid #073a6a;
  border-radius: 4px;
}
.legal-intro p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
}

.legal-highlight {
  /* Highlighted legal section (e.g., for digital content rules) */
  margin-top: 2rem;
  padding: 1.5rem;
  background: #fffbeb;
  border-left: 4px solid #f59e0b;
  border-radius: 4px;
}
.legal-highlight h3 {
  margin-top: 0;
  color: #92400e;
  font-size: 1.125rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.legal-highlight h3 img {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.legal-info-box {
  /* Info box within highlighted sections */
  background: white;
  padding: 1.5rem;
  border-radius: 4px;
  margin-top: 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.legal-info-box p {
  margin: 0 0 1rem 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #374151;
}
.legal-info-box p:last-child {
  margin-bottom: 0;
}
.legal-info-box ol {
  margin: 0.5rem 0 1rem 0;
  padding-left: 1.5rem;
}
.legal-info-box ol li {
  margin-bottom: 0.75rem;
  line-height: 1.6;
}
.legal-info-box ol li strong {
  color: #1f2937;
}
.legal-info-box ol li:last-child {
  margin-bottom: 0;
}
.legal-info-box em {
  color: #6b7280;
}

.legal-subsection {
  /* Subsection within legal sections */
  margin-bottom: 2rem;
  scroll-margin-top: 110px;
}
.legal-subsection:last-child {
  margin-bottom: 0;
}
.legal-subsection h3 {
  font-size: 1.125rem;
  font-weight: 700;
  color: #073a6a;
  margin: 0 0 1rem 0;
}

.widerruf-formular {
  /* Widerrufsformular styling */
  margin-top: 2rem;
  padding: 2rem;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}
.widerruf-formular p {
  margin: 0 0 1rem 0;
  font-size: 0.95rem;
  line-height: 1.6;
}
.widerruf-formular p:last-child {
  margin-bottom: 0;
}
.widerruf-formular hr {
  margin: 2em 0;
  border: none;
  border-top: 1px solid #ddd;
}

/* ============================================================
   IMPRESSUM SPECIFIC STYLES (20251104-152519)
   ============================================================ */
.legal-container-simple {
  /* Simplified container for Impressum (no sidebar) */
  max-width: 900px;
  margin: 0 auto;
  padding: 3rem 2rem;
}
@media (max-width: 768px) {
  .legal-container-simple {
    padding: 2rem 1.5rem;
  }
}

.impressum-contact-box {
  /* Contact info box for Impressum */
  background: #f8f9fa;
  padding: 1.5rem;
  border-radius: 8px;
  border-left: 4px solid #073a6a;
  margin-top: 1rem;
}
.impressum-contact-box p {
  margin: 0;
  line-height: 1.8;
}
.impressum-contact-box p strong {
  color: #073a6a;
}
.impressum-contact-box p a {
  color: #073a6a;
  text-decoration: none;
  transition: color 0.2s ease;
}
.impressum-contact-box p a:hover {
  color: #5b8888;
  text-decoration: underline;
}

/* ============================================================
   LEGAL CREDIT
   ============================================================ */
.legal-credit {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid #e0e0e0;
  font-size: 0.875rem;
  color: #666;
  text-align: center;
}
.legal-credit a {
  color: #669999;
  text-decoration: none;
  transition: color 0.2s ease;
}
.legal-credit a:hover {
  color: #003366;
  text-decoration: underline;
}
@media print {
  .legal-credit {
    display: none;
  }
}

/**
 * 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;
}
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] {
  /**
   * Hide destination label and input by default
   * Versteckt Zielfeld und Label standardmäßig
   */
}
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] {
  /**
   * Styles for the route legend box
   * Styles für die Legenden-Box der Route
   */
}
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);
  }
}

/**
 * @file _responsive.scss
 *
 * @description
 * All responsive styles and media queries for mobile/tablet breakpoints
 * Centralized location for responsive design adjustments
 *
 * @version 1.0.0
 * @created 20250926-161900
 * @modified 20250926-161900
 *
 * @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
 */
/* ========================================
   RESPONSIVE STYLES - MOBILE & TABLET
   ======================================== */
@media (max-width: 768px) {
  /**
   * Login/Register Forms
   */
  .pm4u-login-wrapper,
  .pm4u-register-wrapper,
  .pm4u-forgot-wrapper {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .pm4u-login-features,
  .pm4u-register-benefits,
  .pm4u-forgot-info {
    display: none;
  }
  /**
   * Login Register Hub
   */
  .login-register .hub-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .login-register .hub-box {
    padding: 30px 20px;
  }
  .login-register .hub-box .box-title {
    font-size: 20px;
  }
  .login-register .hub-box .box-description {
    min-height: auto;
  }
  /**
   * Hero Sections
   */
  .hero-section,
  .contact-hero-section,
  .documentation-hero-section,
  .login-register-hero,
  .payment-success-hero-section,
  .dashboard-hero-section {
    padding: 60px 20px;
  }
  .hero-section .hero-title,
  .contact-hero-section .hero-title,
  .documentation-hero-section .hero-title,
  .login-register-hero .hero-title,
  .payment-success-hero-section .hero-title,
  .dashboard-hero-section .hero-title {
    font-size: 32px;
  }
  .hero-section .hero-title .inline-icon,
  .contact-hero-section .hero-title .inline-icon,
  .documentation-hero-section .hero-title .inline-icon,
  .login-register-hero .hero-title .inline-icon,
  .payment-success-hero-section .hero-title .inline-icon,
  .dashboard-hero-section .hero-title .inline-icon {
    width: 36px;
    height: 36px;
  }
  .hero-section .hero-subtitle,
  .contact-hero-section .hero-subtitle,
  .documentation-hero-section .hero-subtitle,
  .login-register-hero .hero-subtitle,
  .payment-success-hero-section .hero-subtitle,
  .dashboard-hero-section .hero-subtitle {
    font-size: 18px;
  }
  .contact-hero-subtitle {
    font-size: 1.1rem;
  }
  .dashboard-hero-section {
    padding: 50px 20px;
  }
  .dashboard-hero-section .dashboard-hero-title {
    font-size: 1.8rem;
  }
  /**
   * Dashboard
   */
  .dashboard-layout {
    grid-template-columns: 1fr;
  }
  .dashboard-info-grid,
  .licenses-grid {
    grid-template-columns: 1fr;
  }
  /**
   * Shop Landing
   */
  .hero-content {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .pricing-grid {
    grid-template-columns: 1fr !important;
  }
  /**
   * Contact Page
   */
  .contact-info-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .frm_forms {
    padding: 25px;
    border-radius: 15px;
  }
  .form-section-intro h2 {
    font-size: 2rem;
  }
  /**
   * License Display
   */
  .license-display-section .license-key-display {
    flex-direction: column;
  }
  .license-display-section .license-key-display .license-key {
    font-size: 1rem;
    word-break: break-all;
  }
  .license-display-section .license-key-display .copy-btn {
    width: 100%;
    justify-content: center;
  }
  .license-display-section .license-details {
    flex-direction: column;
    align-items: stretch;
  }
  .license-display-section .license-details .license-detail-row {
    flex-direction: row;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
  }
  /**
   * License Cards
   */
  .license-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .license-actions {
    flex-direction: column;
  }
  .no-licenses-actions {
    flex-direction: column;
  }
}
/**
 * Tablet Portrait
 */
@media (min-width: 769px) and (max-width: 1024px) {
  .licenses-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .dashboard-info-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .quick-actions-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .hub-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/**
 * Large Desktop
 */
@media (min-width: 1440px) {
  .licenses-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .dashboard-info-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .quick-actions-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}/*# sourceMappingURL=page-templates.css.map */