@charset "UTF-8";
/**
 * @file main4u.scss
 *
 * @description
 * Main SCSS file using @use and @forward pattern
 * This file should be compiled to main4u.css
 *
 * @version 2.0.0
 * @created 20250114-221000
 * @modified 20260501-000000
 *
 * @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.
 */
/* =========================
   BAUER EFM BRAND COLORS
   ========================= */
/* Bauer Signalrot */
/* Bauer Dunkel (fast schwarz) */
/* Bauer Grau (Portrait-Spalte) */
/* =========================
   BRAND COLORS (Core Identity)
   ========================= */
/* Brand primary (Navy Blue) */
/* 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 — all except Hero) */
/* HERO BUTTONS (on dark background) */
/* =========================
   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 */
/* Interactive / highlight blue — used for links, focus rings, --4u-accent */
/* 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
   (Kept for backwards-compatibility — do not use for new styles!)
   ========================= */
/* Legacy naming - mapped to new values */
/* Secondary strong – darker turquoise to allow white text AA */
/* Legacy primary variants - mapped to new btn-primary */
/* =========================
   CSS CUSTOM PROPERTIES
   Single source of truth — mapped from SCSS vars above.
   Components use these via var(--4u-*).
   ========================= */
:root {
  --4u-primary: #003366;
  --4u-secondary: #669999;
  --4u-accent: #c10c1a;
  --4u-success: #4caf50;
  --4u-warning: #f59e0b;
  --4u-danger: #ef4444;
  --4u-text-dark: #212529;
  --4u-text-gray: #6c757d;
  --4u-text-light: #ffffff;
  --4u-bg-white: #ffffff;
  --4u-bg-light: #f8f9fa;
  --4u-bg-gray: #e9ecef;
  --4u-border: #dee2e6;
  --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;
}

/* --- Titillium Web --- */
@font-face {
  font-display: swap;
  font-family: "Titillium Web";
  font-style: normal;
  font-weight: 400;
  src: url("/wp-content/themes/astra-child/files4u/fonts/titillium-web-v19-latin-regular.woff2") format("woff2");
}
/* --- Grandesign Neue Roman --- */
/* Grandesign Neue Roman Regular (weight 400) */
@font-face {
  font-display: swap;
  font-family: "Grandesign Neue Roman";
  font-style: normal;
  font-weight: 400;
  src: url("/wp-content/themes/astra-child/files4u/fonts/grandesign-neuer-roman.ttf") format("truetype");
}
/* -- Nixie One -- */
/* Nixie One Regular (weight 400) */
@font-face {
  font-display: swap;
  font-family: "Nixie One";
  font-style: normal;
  font-weight: 400;
  src: url("/wp-content/themes/astra-child/files4u/fonts/NixieOne-Regular.ttf") format("truetype");
}
/* --- Helvetica --- */
/* Helvetica Regular (weight 400) */
@font-face {
  font-display: swap;
  font-family: "Helvetica";
  font-style: normal;
  font-weight: 400;
  src: url("/wp-content/themes/astra-child/files4u/fonts/helvetica.woff") format("woff"), url("/wp-content/themes/astra-child/files4u/fonts/helvetica.ttf") format("truetype");
}
/* Helvetica Bold (weight 700) */
@font-face {
  font-display: swap;
  font-family: "Helvetica";
  font-style: normal;
  font-weight: 700;
  src: url("/wp-content/themes/astra-child/files4u/fonts/helvetica-bold.woff") format("woff"), url("/wp-content/themes/astra-child/files4u/fonts/helvetica-bold.ttf") format("truetype");
}
/* Helvetica Light (weight 300) */
@font-face {
  font-display: swap;
  font-family: "Helvetica";
  font-style: normal;
  font-weight: 300;
  src: url("/wp-content/themes/astra-child/files4u/fonts/helvetica-light.woff") format("woff"), url("/wp-content/themes/astra-child/files4u/fonts/helvetica-light.ttf") format("truetype");
}
/* --- Open Sans --- */
/* Open Sans Light (weight 300) */
@font-face {
  font-display: swap;
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300;
  src: url("/wp-content/themes/astra-child/files4u/fonts/opensans-light.woff2") format("woff2"), url("/wp-content/themes/astra-child/files4u/fonts/opensans-light.ttf") format("truetype");
}
/* Open Sans Regular (weight 400) */
@font-face {
  font-display: swap;
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  src: url("/wp-content/themes/astra-child/files4u/fonts/opensans-regular.woff2") format("woff2"), url("/wp-content/themes/astra-child/files4u/fonts/opensans-regular.ttf") format("truetype");
}
/* Open Sans Bold (weight 700) */
@font-face {
  font-display: swap;
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  src: url("/wp-content/themes/astra-child/files4u/fonts/opensans-bold.woff2") format("woff2"), url("/wp-content/themes/astra-child/files4u/fonts/opensans-bold.ttf") format("truetype");
}
/* --- Roboto --- */
/* Roboto Light (weight 300) */
@font-face {
  font-display: swap;
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300;
  src: url("/wp-content/themes/astra-child/files4u/fonts/roboto-light.woff2") format("woff2"), url("/wp-content/themes/astra-child/files4u/fonts/roboto-light.ttf") format("truetype");
}
/* Roboto Regular (weight 400) */
@font-face {
  font-display: swap;
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  src: url("/wp-content/themes/astra-child/files4u/fonts/roboto-regular.woff2") format("woff2"), url("/wp-content/themes/astra-child/files4u/fonts/roboto-regular.ttf") format("truetype");
}
/* Roboto Bold (weight 700) */
@font-face {
  font-display: swap;
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  src: url("/wp-content/themes/astra-child/files4u/fonts/roboto-bold.woff2") format("woff2"), url("/wp-content/themes/astra-child/files4u/fonts/roboto-bold.ttf") format("truetype");
}
/* --- Verdana --- */
/* Verdana Regular (weight 400) */
@font-face {
  font-display: swap;
  font-family: "Verdana";
  font-style: normal;
  font-weight: 400;
  src: url("/wp-content/themes/astra-child/files4u/fonts/verdana.woff2") format("woff2"), url("/wp-content/themes/astra-child/files4u/fonts/verdana.ttf") format("truetype");
}
/* Verdana Bold (weight 700) */
@font-face {
  font-display: swap;
  font-family: "Verdana";
  font-style: normal;
  font-weight: 700;
  src: url("/wp-content/themes/astra-child/files4u/fonts/verdana-bold.woff2") format("woff2"), url("/wp-content/themes/astra-child/files4u/fonts/verdana-bold.ttf") format("truetype");
}
/* SECTION --- Material Icons --- */
/* Material Icons Regular (weight 400) */
@font-face {
  font-display: swap;
  font-family: "Material Icons";
  font-style: normal;
  font-weight: 400;
  src: url("/wp-content/themes/astra-child/files4u/fonts/material-icons-v143-latin-regular.woff2") format("woff2"), url("/wp-content/themes/astra-child/files4u/fonts/material-icons-v143-latin-regular.ttf") format("truetype");
}
.google-material-icons,
.material-icons,
.material-symbols-outlined {
  font-family: "Material Icons";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: "liga";
  font-weight: normal;
}

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

/**
 * @file main4u.scss
 *
 * @description
 * Main SCSS file using @use and @forward pattern
 * This file should be compiled to main4u.css
 *
 * @version 2.0.0
 * @created 20250114-221000
 * @modified 20260501-000000
 *
 * @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
 */
/* ============================================
   GLOBAL RESET
   ============================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.entry-header,
.entry-content,
.entry-footer,
.ast-article-single,
.ast-article-inner {
  margin: revert;
  padding: revert;
}

html {
  scroll-behavior: smooth;
}

#page.site {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#masthead-fouruweb {
  flex-shrink: 0;
}

.fouruweb-footer {
  flex-shrink: 0;
}

#content.site-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17.6px;
  line-height: 1.6;
  color: var(--4u-text-dark);
  background-image: url("/wp-content/themes/astra-child/files4u/img/bg-image.webp") !important;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
  -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) {
  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;
  }
}
/**
 * @file main4u.scss
 *
 * @description
 * Main SCSS file using @use and @forward pattern
 * This file should be compiled to main4u.css
 *
 * @version 2.0.0
 * @created 20250114-221000
 * @modified 20260501-000000
 *
 * @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
 */
/**
 * 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 {
  /* Container für Nav + Service-Tiles — kein sticky, kein Background */
  position: relative;
  /* Nav bekommt sticky + Frosted-Glass */
}
.fouruweb-header .fouruweb-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  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: 0px 8px;
}
.fouruweb-header {
  /* 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 .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 {
  /* Primary Navigation — immer ausgeblendet, nur Burger-Menü */
}
.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 - nur auf Mobile */
}
.fouruweb-header .mobile-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-around;
  width: 42px;
  height: 30px;
  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: 32px;
  height: 2px;
  background: #c10c1a;
  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;
  height: 100dvh;
  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: 10px 10px 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(33, 37, 41, 0.08);
  background: transparent !important;
}
.mobile-menu-panel .mobile-menu li .dropdown-toggle {
  padding: 5px !important;
}
.mobile-menu-panel .mobile-menu li:last-child {
  border-bottom: none;
}
.mobile-menu-panel .mobile-menu li a {
  display: block;
  padding: 10px 5px;
  color: #212529 !important;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  transition: color 0.2s;
  background: transparent !important;
}
.mobile-menu-panel .mobile-menu li a:hover {
  color: #c10c1a !important;
  padding-left: 20px;
  background: transparent !important;
}
.mobile-menu-panel .mobile-menu li.current-menu-item > a, .mobile-menu-panel .mobile-menu li.current_page_item > a {
  color: #c10c1a !important;
  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: 0 !important;
  background: transparent !important;
  margin-left: 15px;
}
.mobile-menu-panel .mobile-menu .sub-menu li,
.mobile-menu-panel .mobile-menu .dropdown-menu li {
  list-style: none;
  background: transparent !important;
  border-bottom: 1px solid rgba(33, 37, 41, 0.05);
}
.mobile-menu-panel .mobile-menu .sub-menu li:last-child,
.mobile-menu-panel .mobile-menu .dropdown-menu li:last-child {
  border-bottom: none;
}
.mobile-menu-panel .mobile-menu .sub-menu li a,
.mobile-menu-panel .mobile-menu .dropdown-menu li a {
  font-size: 14px !important;
  padding: 2px 10px !important;
  color: #212529 !important;
  background: transparent !important;
}
.mobile-menu-panel .mobile-menu .sub-menu li a:hover,
.mobile-menu-panel .mobile-menu .dropdown-menu li a:hover {
  color: #c10c1a !important;
  background: transparent !important;
}
.mobile-menu-panel .mobile-menu .sub-menu li.current-menu-item > a, .mobile-menu-panel .mobile-menu .sub-menu li.current_page_item > a,
.mobile-menu-panel .mobile-menu .dropdown-menu li.current-menu-item > a,
.mobile-menu-panel .mobile-menu .dropdown-menu li.current_page_item > a {
  color: #c10c1a !important;
  font-weight: 600;
}

/* Overlay for mobile menu */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  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 .nav-container {
    grid-template-columns: 1fr auto;
  }
  .fouruweb-header {
    /* Burger einblenden ab Tablet */
  }
  .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 */
    /* 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 */
    /* Reduce nav-actions gap */
  }
  .fouruweb-header .nav-actions {
    gap: 3px;
  }
}
/* Extra small devices - Further optimization (< 375px) */
@media (max-width: 374px) {
  .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;
  }
}
/* Landscape Mobile: Nav kompakter */
@media (max-width: 900px) and (orientation: landscape) {
  .fouruweb-header .fouruweb-nav {
    padding: 0px 4%;
  }
  .fouruweb-header .custom-logo {
    max-height: 32px !important;
  }
}
/* Normal navigation mode (Customizer: "Normal navigation") */
body.show-normal-nav .fouruweb-header .main-navigation {
  display: flex !important;
}
body.show-normal-nav .fouruweb-header .mobile-menu-toggle {
  display: none !important;
}

/**
 * Service Tiles — Startseite
 *
 * @description Hero-Bereich mit 3 klickbaren Bild-Tiles (Engineering / Finance / Management)
 * @version 1.0.0
 * @created 20260308
 * @author Frank Hackenberg
 * @license GPL-3.0-or-later
 */
/* ============================================
   SERVICE TILES
   ============================================ */
.service-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  width: 100%;
  height: 22.22vw;
  gap: 0;
  overflow: visible;
}

.tile {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  height: 22.22vw;
  width: calc(100% + 1px);
  transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateZ(0);
}
.tile-img-wrap {
  position: relative;
  width: 100%;
  height: 100%;
}
.tile-img-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.5s ease, opacity 0.4s ease;
  display: block;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.tile-img--red {
  opacity: 0;
}
.tile:hover {
  aspect-ratio: unset;
  height: calc(22.22vw + 15px);
}
.tile:hover .tile-img-wrap img {
  transform: scale(1.08);
}
.tile.active {
  aspect-ratio: unset;
  height: calc(22.22vw + 35px);
}
.tile.active .tile-img--dark {
  opacity: 0;
}
.tile.active .tile-img--red {
  opacity: 1;
}
.tile-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.75rem 1rem;
  z-index: 2;
  color: #fff;
  text-align: center;
  background: rgba(0, 0, 0, 0.6);
  transition: background 0.4s ease;
}
.tile.active .tile-label {
  background: transparent;
}
.tile-title {
  display: block;
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .service-tiles {
    grid-template-columns: 1fr;
    height: auto;
  }
  .tile {
    height: 10dvh;
    min-height: 52px;
  }
  .tile.active {
    height: 15dvh;
    min-height: 70px;
  }
  .tile:hover:not(.active) {
    height: 10dvh;
  }
  .tile:hover:not(.active) .tile-img-wrap img {
    transform: none;
  }
}
@media (max-width: 900px) and (orientation: landscape) {
  .service-tiles {
    grid-template-columns: repeat(3, 1fr);
    height: auto;
  }
  .tile {
    height: 10vw;
    min-height: unset;
  }
  .tile.active {
    height: 10vw;
  }
  .tile:hover:not(.active) {
    height: 10vw;
  }
}
/* Content-Panels unterhalb der Tiles */
.tile-panels {
  background: rgba(0, 0, 0, 0.75);
}

.tile-panel {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.75rem 5%;
}
.tile-panel .tile-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.tile-panel .tile-subnav li a {
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  transition: color 0.2s ease;
}
.tile-panel .tile-subnav li a:hover, .tile-panel .tile-subnav li a:focus {
  color: #fff;
}
.tile-panel .tile-subnav .current-menu-item a,
.tile-panel .tile-subnav .current-page-ancestor a {
  color: #c10c1a;
  font-weight: 600;
}

/**
 * Unternehmen Header
 * Ersetzt die drei Service-Tiles auf der Unternehmen-Seite
 * Gleiche Gesamthöhe wie .service-tiles (22.22vw)
 */
.unternehmen-header {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 22.22vw;
}
.unternehmen-header .uh-top {
  display: flex;
  flex: 1;
  min-height: 0;
}
.unternehmen-header .uh-top .uh-col {
  display: flex;
}
.unternehmen-header .uh-top .uh-col--brand {
  flex: 4;
  background: #c10c1a;
  padding: 2rem 2.5rem;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.unternehmen-header .uh-top .uh-col--brand .uh-brand-link {
  display: block;
}
.unternehmen-header .uh-top .uh-col--brand .uh-brand-link img.custom-logo {
  width: auto;
  max-height: 35%;
  height: auto;
}
.unternehmen-header .uh-top .uh-col--brand .uh-site-name {
  display: block;
  font-family: "Titillium Web", sans-serif !important;
  font-size: 7rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #fff !important;
  line-height: 1;
  text-decoration: none;
  transform: scaleY(0.7);
  padding-left: 10%;
  margin-bottom: -30px;
}
.unternehmen-header .uh-top .uh-col--brand .uh-site-name .uh-ue {
  letter-spacing: -0.15em;
  padding-right: 0.7rem;
}
.unternehmen-header .uh-top .uh-col--brand .uh-tagline {
  display: block;
  font-size: 0.84rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 0.3rem;
  text-transform: uppercase;
  padding-left: 11%;
}
.unternehmen-header .uh-top .uh-col--portrait {
  flex: 2;
  background: #c10c1a;
  overflow: hidden;
  position: relative;
}
.unternehmen-header .uh-top .uh-col--portrait .uh-portrait {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: bottom center;
     object-position: bottom center;
  display: block;
}
.unternehmen-header .uh-top .uh-col--red {
  flex: 3.4;
  background: #c10c1a;
}
.unternehmen-header .uh-bar {
  height: 40px;
  background: #1d1d1b;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .unternehmen-header {
    height: auto;
  }
  .unternehmen-header .uh-top .uh-col--brand {
    padding: 1.2rem 1.5rem;
  }
  .unternehmen-header .uh-top .uh-col--brand .uh-site-name {
    font-size: 4.5rem;
    padding-left: 8%;
    margin-bottom: -18px;
  }
  .unternehmen-header .uh-top .uh-col--brand .uh-tagline {
    font-size: 0.65rem;
    padding-left: 9%;
  }
  .unternehmen-header .uh-top .uh-col--red {
    display: none;
  }
  .unternehmen-header .uh-top .uh-col--portrait {
    flex: 1.5;
  }
  .unternehmen-header .uh-bar {
    height: 28px;
  }
}
@media (max-width: 480px) {
  .unternehmen-header .uh-top .uh-col--brand {
    flex: 1;
    padding: 0.8rem 1rem;
  }
  .unternehmen-header .uh-top .uh-col--brand .uh-site-name {
    font-size: 3rem;
    padding-left: 5%;
    margin-bottom: -12px;
  }
  .unternehmen-header .uh-top .uh-col--brand .uh-tagline {
    font-size: 0.55rem;
    padding-left: 6%;
  }
  .unternehmen-header .uh-top .uh-col--portrait {
    flex: 1;
  }
}
@media (max-width: 900px) and (orientation: landscape) {
  .unternehmen-header {
    height: 100px;
  }
  .unternehmen-header .uh-top .uh-col--brand {
    padding: 0.5rem 1.2rem;
  }
  .unternehmen-header .uh-top .uh-col--brand .uh-site-name {
    font-size: 3rem;
    padding-left: 5%;
    margin-bottom: -10px;
  }
  .unternehmen-header .uh-top .uh-col--brand .uh-tagline {
    font-size: 0.6rem;
    padding-left: 6%;
  }
  .unternehmen-header .uh-top .uh-col--red {
    display: none;
  }
  .unternehmen-header .uh-top .uh-col--portrait {
    flex: 1;
  }
  .unternehmen-header .uh-bar {
    height: 20px;
  }
}
/**
 * @file main4u.scss
 *
 * @description
 * Main SCSS file using @use and @forward pattern
 * This file should be compiled to main4u.css
 *
 * @version 2.0.0
 * @created 20250114-221000
 * @modified 20260501-000000
 *
 * @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
 */
/**
 * Splash Screen
 * Vollbild-Intro mit Featured Image, Skip-Button und Legal-Links
 */
body.splash-page {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.splash-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.splash-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.splash-content a,
.splash-content button {
  pointer-events: auto;
}
.splash-content .wp-block-cover {
  background-image: none !important;
  background-color: transparent !important;
  min-height: unset !important;
  padding: 0 !important;
  width: 100%;
}
.splash-content .wp-block-cover__inner-container {
  pointer-events: auto;
}
.splash-content h1.welcome,
.splash-content .welcome {
  font-family: "Titillium Web", sans-serif !important;
  font-size: 12vw !important;
  font-weight: 700 !important;
  color: #c10c1a !important;
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
  margin-bottom: 0.1em !important;
  transform: scaleY(0.7);
  transform-origin: bottom center;
  display: block;
  text-align: center;
}
.splash-content h1.welcome span,
.splash-content .welcome span {
  letter-spacing: -0.15em !important;
  padding-right: 0.1em;
}
.splash-content h2.wp-block-heading {
  font-size: 1.24rem !important;
  font-weight: 400 !important;
  color: #fff !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  margin-bottom: 0.5em !important;
  margin-top: -12px;
  padding-left: 10px;
}
.splash-content h2.wp-block-heading a {
  color: #fff !important;
  text-decoration: none !important;
}
.splash-content h2.wp-block-heading a:hover {
  color: #c10c1a !important;
}
.splash-content h3.wp-block-heading {
  font-size: 1.2rem !important;
  font-weight: 300 !important;
  color: rgba(255, 255, 255, 0.75) !important;
  margin-top: 0 !important;
}

@media (max-width: 768px) {
  .splash-content {
    align-items: flex-start;
    padding-top: 30%;
  }
  .splash-content h1.welcome,
  .splash-content .welcome {
    font-size: 32vw !important;
  }
  .splash-content h2.wp-block-heading {
    font-size: 4vw !important;
    letter-spacing: 0.06em !important;
    padding-left: 6px;
  }
  .splash-content h3.wp-block-heading {
    font-size: 3.5vw !important;
  }
}
.splash-skip {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 3px;
  padding: 0.55rem 1.2rem;
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
  backdrop-filter: blur(4px);
}
.splash-skip:hover {
  background: rgba(193, 12, 26, 0.75);
  border-color: rgba(255, 255, 255, 0.7);
}
.splash-skip .splash-countdown {
  display: inline-block;
  min-width: 1.2em;
  text-align: right;
  opacity: 0.6;
  font-size: 0.75em;
  margin-left: 0.3em;
}

.splash-legal {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.splash-legal a {
  color: rgba(255, 255, 255, 0.6) !important;
  text-decoration: none;
  font-size: 0.7rem;
  font-weight: 300;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: color 0.2s ease;
}
.splash-legal a:hover {
  color: #ffffff !important;
}

/**
 * @file main4u.scss
 *
 * @description
 * Main SCSS file using @use and @forward pattern
 * This file should be compiled to main4u.css
 *
 * @version 2.0.0
 * @created 20250114-221000
 * @modified 20260501-000000
 *
 * @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 {
  border-top: 1px solid rgba(0, 0, 0, 0.042);
}
.fouruweb-footer .footer-inner {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  max-width: none;
  margin: 0 auto;
  margin-right: 10px;
  margin-left: 0;
  padding: 0.5rem 5% 1rem;
}
.fouruweb-footer .footer-legal {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  margin-right: auto;
  align-self: flex-end;
  padding-bottom: 0.15rem;
}
.fouruweb-footer .footer-legal a {
  text-decoration: none;
  font-size: 0.7rem !important;
  font-weight: 300;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #6c757d !important;
  line-height: 1.4;
  transition: color 0.2s ease;
}
.fouruweb-footer .footer-legal a:hover {
  color: #c10c1a !important;
}
.fouruweb-footer .footer-nav .footer-menu {
  display: flex;
  gap: 2.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: flex-end;
}
.fouruweb-footer .footer-nav .footer-menu a {
  text-decoration: none;
  font-size: 1.2rem !important;
  font-weight: 300;
  letter-spacing: 0em;
  text-transform: uppercase;
  color: #343a40 !important;
  transition: color 0.2s ease;
}
.fouruweb-footer .footer-nav .footer-menu a:hover {
  color: #c10c1a !important;
}
.fouruweb-footer .footer-nav .footer-menu .current-menu-item > a,
.fouruweb-footer .footer-nav .footer-menu .current-page-ancestor > a {
  color: #c10c1a !important;
  font-weight: 700 !important;
}
.fouruweb-footer #menu-footer .menu-item-home {
  margin-bottom: 0rem;
}
.fouruweb-footer #menu-footer .menu-item-home a {
  font-family: "Titillium Web", sans-serif !important;
  font-size: 3.8rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  color: #c10c1a !important;
  line-height: 1;
  display: inline-block;
  transform: scaleY(0.7);
}
.fouruweb-footer #menu-footer .menu-item-home a span {
  letter-spacing: -0.15em !important;
  padding-right: 0.4rem;
}

@media (max-width: 768px) {
  .fouruweb-footer .footer-inner {
    padding: 0.4rem 3% 0.2rem;
    gap: 0;
    align-items: center;
  }
  .fouruweb-footer .footer-legal a {
    font-size: 0.6rem !important;
    margin-right: 2rem;
  }
  .fouruweb-footer .footer-nav .footer-menu {
    gap: 1.2rem;
  }
  .fouruweb-footer .footer-nav .footer-menu a {
    font-size: 0.85rem !important;
  }
  .fouruweb-footer #menu-footer .menu-item-home a {
    font-size: 2rem !important;
  }
}
@media (max-width: 480px) {
  .fouruweb-footer .footer-inner {
    align-items: flex-start;
  }
  .fouruweb-footer .footer-legal {
    align-self: flex-start;
    margin-right: 2rem;
  }
  .fouruweb-footer .footer-nav .footer-menu {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.2rem 0.7rem;
  }
  .fouruweb-footer .footer-nav .footer-menu li {
    margin-bottom: 0;
    line-height: 0.8rem;
  }
  .fouruweb-footer .footer-nav .footer-menu a {
    font-size: 0.8rem !important;
  }
  .fouruweb-footer #menu-footer .menu-item-home a {
    font-size: 1.6rem !important;
  }
}
@media (max-width: 916px) and (orientation: landscape) {
  .fouruweb-footer .footer-inner {
    padding: 0.2rem 3% 0.3rem;
  }
  .fouruweb-footer .footer-nav .footer-menu a {
    font-size: 0.75rem !important;
  }
  .fouruweb-footer #menu-footer .menu-item-home a {
    font-size: 1.4rem !important;
  }
}
.fouruweb-footer-legacy {
  background: linear-gradient(180deg, rgb(10.2, 61.2, 107.1) 0%, #003366 50%, #00264d 100%);
  color: white;
  padding: 60px 5% 14px;
  margin-top: 80px;
}
.fouruweb-footer-legacy .footer-container {
  max-width: var(--4u-max-width);
  margin: 0 auto;
}
.fouruweb-footer-legacy .footer-top {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 10px;
}
.fouruweb-footer-legacy .footer-top .footer-column #block-11 .wp-block-columns h4 {
  margin-bottom: 3px;
}
.fouruweb-footer-legacy .footer-top .footer-column #block-11 .wp-block-columns ul {
  padding-left: 22px;
}
.fouruweb-footer-legacy .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-legacy .footer-top .footer-column h4 {
  margin-bottom: 10px;
  font-size: 18px;
  color: white;
}
.fouruweb-footer-legacy .footer-top .footer-column ul {
  list-style: none;
  padding: 0;
  margin-left: 6px;
}
.fouruweb-footer-legacy .footer-top .footer-column ul li {
  margin-bottom: 0;
}
.fouruweb-footer-legacy .footer-top .footer-column ul li a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: color 0.3s;
}
.fouruweb-footer-legacy .footer-top .footer-column ul li a:hover {
  color: white;
}
.fouruweb-footer-legacy .footer-top .footer-column ul li span {
  color: rgba(255, 255, 255, 0.5);
}
.fouruweb-footer-legacy .footer-top .footer-column p {
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 15px;
}
.fouruweb-footer-legacy .footer-logo {
  display: flex;
  align-items: center;
  gap: 0px;
  margin-bottom: 15px;
}
.fouruweb-footer-legacy .footer-logo p {
  margin: 0;
}
.fouruweb-footer-legacy .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-legacy .footer-logo span {
  font-size: 24px;
  font-weight: bold;
}
.fouruweb-footer-legacy .footer-bottom {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  opacity: 0.8;
}
.fouruweb-footer-legacy .footer-bottom p {
  margin: 0;
  color: white;
}
.fouruweb-footer-legacy .footer-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.fouruweb-footer-legacy .footer-branding-text {
  display: block;
}
.fouruweb-footer-legacy .footer-branding-text strong {
  font-size: 18px;
  font-weight: 700;
  color: white;
  margin-right: 0px;
}
.fouruweb-footer-legacy .footer-branding-text span {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
}
.fouruweb-footer-legacy .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;
  }
}
.fouruweb-footer .footer-container > .widget {
  font-size: 12px;
  margin-bottom: 10px;
}
.fouruweb-footer .footer-container > .widget p {
  margin: 0;
  line-height: 1.4;
}

.ast-footer-copyright {
  font-size: 12px;
}
.ast-footer-copyright a {
  color: #fff;
  text-decoration: underline;
}
.ast-footer-copyright a:hover {
  text-decoration: none;
}

/**
 * @file main4u.scss
 *
 * @description
 * Main SCSS file using @use and @forward pattern
 * This file should be compiled to main4u.css
 *
 * @version 2.0.0
 * @created 20250114-221000
 * @modified 20260501-000000
 *
 * @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: layout utilities, hero, features, pricing, buttons, animations.
 * Contains 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/footer elements */
.ast-main-header-wrap,
.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 custom elements visible! */
.fouruweb-header,
.fouruweb-footer {
  display: block !important;
}

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

.ast-container {
  padding-left: 60px !important;
  padding-right: 60px !important;
}
@media (max-width: 768px) {
  .ast-container {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}
@media (max-width: 480px) {
  .ast-container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

#content.site-content:has(.section-layout) {
  display: flex;
  flex-direction: column;
}
#content.site-content:has(.section-layout) .ast-container,
#content.site-content:has(.section-layout) #primary,
#content.site-content:has(.section-layout) main#main,
#content.site-content:has(.section-layout) .ast-article-single,
#content.site-content:has(.section-layout) .entry-content {
  flex: 1;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.section-layout {
  display: flex;
  flex: 1;
  gap: 0;
  align-items: stretch;
}

.section-sidebar {
  flex: 0 0 30%;
  padding-top: 0.5rem;
  padding-right: 2rem;
  border-right: 2px solid rgba(0, 0, 0, 0.12);
}
.section-sidebar .section-subnav {
  list-style: none;
  margin: 0;
  padding: 0;
}
.section-sidebar .section-subnav li {
  margin-bottom: 0.75rem;
  line-height: 1.5rem;
}
.section-sidebar .section-subnav a {
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--4u-text-dark) !important;
  transition: color 0.2s ease, font-size 0.2s ease;
}
.section-sidebar .section-subnav a:hover {
  color: #c10c1a !important;
}
.section-sidebar .section-subnav .current-menu-item > a {
  color: #c10c1a !important;
  font-size: 1.05rem !important;
  font-weight: 600;
}

.section-main {
  flex: 1;
  min-width: 0;
  padding-left: 2rem;
  font-size: 1.1rem;
}

@media (max-width: 768px) {
  .section-layout {
    flex-direction: column;
  }
  .section-sidebar {
    flex: none;
    padding-right: 0;
    border-right: none !important;
    border-bottom: 2px solid rgba(0, 0, 0, 0.12);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
  }
  .section-main {
    padding-left: 0;
  }
}
.entry-title,
.ast-article-single h1 {
  font-size: 1.5rem !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #444 !important;
}

@media (max-width: 768px) {
  .ast-no-thumbnail,
  .entry-title {
    display: none;
  }
  body.page-slug-home .ast-no-thumbnail,
  body.page-slug-home .entry-title,
  body.page-slug-kontakt .ast-no-thumbnail,
  body.page-slug-kontakt .entry-title,
  body.page-slug-impressum .ast-no-thumbnail,
  body.page-slug-impressum .entry-title,
  body.page-slug-datenschutz .ast-no-thumbnail,
  body.page-slug-datenschutz .entry-title {
    display: block;
  }
  .section-sidebar .section-subnav .current-menu-item > a {
    font-size: 1.5rem !important;
    line-height: 1.4rem !important;
    border: 0px solid red;
    /* --- IGNORE --- */
  }
}
/* ============================================
   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 — removed (site-specific)
   ============================================ */
/* ============================================
   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;
  }
  .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%;
  }
}
/* ============================================
   18. RESPONSIVE #primary SPACING
   ============================================ */
@media (max-width: 1200px) {
  .ast-plain-container.ast-no-sidebar #primary {
    border: 0px solid green;
    margin-top: 60px !important;
    margin-bottom: 40px !important;
  }
}
@media (max-width: 768px) {
  .ast-plain-container.ast-no-sidebar #primary {
    border: 0px solid red;
    margin-top: 30px !important;
    margin-bottom: 20px !important;
  }
}
/* ============================================
   DIVIDER TEXT
   Text mit Trennlinie links und rechts
   Usage: <p class="divider-text">...</p>
   ============================================ */
.divider-text {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1.5rem;
  padding: 0 64px;
}
.divider-text::before, .divider-text::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #ced4da;
}

/* ============================================
   19. PRINT STYLES
   ============================================ */
@media print {
  .fouruweb-header,
  .fouruweb-footer,
  .hero-buttons,
  .btn-buy,
  .mobile-menu-toggle {
    display: none !important;
  }
}
/* ============================================
   MAIL LETTER
   Box-Shadow um helles Briefumschlag-Icon
   ============================================ */
.mail-letter img {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.14);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border-radius: 0;
}
.mail-letter img:hover {
  transform: scale(1.15);
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.22), 0 4px 14px rgba(0, 0, 0, 0.2);
}

/**
 * @file main4u.scss
 *
 * @description
 * Main SCSS file using @use and @forward pattern
 * This file should be compiled to main4u.css
 *
 * @version 2.0.0
 * @created 20250114-221000
 * @modified 20260501-000000
 *
 * @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 main4u.scss
 *
 * @description
 * Main SCSS file using @use and @forward pattern
 * This file should be compiled to main4u.css
 *
 * @version 2.0.0
 * @created 20250114-221000
 * @modified 20260501-000000
 *
 * @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, #003366, #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, #003366, #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: #212529;
  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: #003366;
  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: #003366;
  font-weight: 700;
  font-size: 1.2rem;
}

[id^=frm_field][id$=_container]:has(input.frm_verify),
.frm_verify_container {
  display: none !important;
}

input.frm_verify {
  display: none !important;
}

/**
 * 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: 20px 40px 0;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.frm_forms .frm_fields_container .frm_half {
  grid-column: 1/7;
  align-self: start;
}
.frm_forms .frm_fields_container #frm_field_5_container {
  grid-column: 7/13;
  grid-row: 1/4;
  align-self: stretch;
}
.frm_forms .frm_fields_container #frm_field_6_container {
  grid-column: 7/13;
  grid-row: 4;
  align-self: center;
}
.frm_forms .frm_fields_container #frm_field_3_container, .frm_forms .frm_fields_container #frm_field_6_container {
  margin-bottom: 0;
}
.frm_forms {
  /**
   * 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: #212529;
}
.frm_forms .frm_form_field .frm_primary_label {
  font-size: inherit !important;
}
.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: 12px 15px !important;
  border: 1px solid #ced4da !important;
  border-radius: 3px !important;
  font-size: inherit;
  transition: border-color 0.2s ease;
  background: #ffffff !important;
  box-shadow: none !important;
}
.frm_forms .frm_form_field input[type=text]:focus,
.frm_forms .frm_form_field input[type=email]:focus,
.frm_forms .frm_form_field textarea:focus,
.frm_forms .frm_form_field select:focus {
  outline: none !important;
  border-color: rgba(33, 37, 41, 0.5) !important;
  box-shadow: none !important;
}
.frm_forms .frm_form_field textarea {
  min-height: 150px;
  resize: vertical;
}
.frm_forms .frm_submit {
  display: flex !important;
  justify-content: flex-start !important;
  margin-top: 25px;
}
.frm_forms .frm_submit .frm_button_submit {
  background: rgba(33, 37, 41, 0.06);
  color: #212529;
  border: 1px solid rgba(33, 37, 41, 0.35);
  border-radius: 3px;
  padding: 0.55rem 1.2rem;
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.frm_forms .frm_submit .frm_button_submit:hover {
  background: #c10c1a;
  color: #ffffff;
}

/**
 * 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: 10px;
    border-radius: 15px;
  }
  .frm_form_field .frm_submit {
    margin-top: 5px;
  }
  .frm_fields_container {
    display: flex !important;
    flex-direction: column;
    grid-template-columns: unset !important;
  }
  .frm_fields_container #frm_field_1_container {
    order: 1;
  }
  .frm_fields_container #frm_field_2_container {
    order: 2;
  }
  .frm_fields_container #frm_field_7_container {
    order: 3;
  }
  .frm_fields_container #frm_field_3_container {
    order: 4;
  }
  .frm_fields_container #frm_field_5_container {
    order: 5;
  }
  .frm_fields_container #frm_field_6_container {
    order: 6;
  }
  .frm_fields_container .frm_half, .frm_fields_container .frm6 {
    grid-column: unset !important;
    grid-row: unset !important;
    width: 100%;
  }
}/*# sourceMappingURL=main4u.css.map */