/* ============================================
   REIN & FEIN REINIGUNGSDIENST – Stylesheet
   ============================================

   This file controls ALL visual aspects of the website:
   colors, fonts, spacing, layout, animations, and responsive design.

   HOW IT WORKS:
   - "CSS Variables" (lines starting with --) are reusable values.
     Change one variable and it updates everywhere automatically.
   - The website has two color modes: Light and Dark.
     Each mode uses the same variable names but different color values.
   - The layout adapts to different screen sizes using "@media" rules
     at the bottom of this file (tablet, mobile, small phones).

   ============================================ */


/* ==============================================
   BRAND TOKENS (Design Colors & Spacing)
   ==============================================
   These are the core design values for the brand.
   Colors were derived from the company logo.
   To change the brand colors, edit these values.
*/
:root {
  /* --- Brand Colors --- */
  --color-brand-dark: #1e1a17;        /* Very dark brown (almost black) – from logo */
  --color-brand-cream: #f5f0e8;       /* Warm cream/beige – from logo */
  --color-brand-offwhite: #faf8f4;    /* Very light warm white – page background */
  --color-brand-warm-gray: #b8b0a4;   /* Warm gray – for muted text */
  --color-brand-mid-gray: #6b6560;    /* Medium gray – for secondary text */
  --color-brand-accent: #c8a96e;      /* Gold/amber – accent color for highlights */

  /* --- Light Mode Colors (default) ---
     These "semantic" names describe WHAT the color is used for,
     not what the color looks like. This makes theme switching easy. */
  --color-bg: var(--color-brand-offwhite);       /* Main page background */
  --color-bg-alt: #efe9df;                       /* Alternate background (used for alternating sections) */
  --color-surface: #ffffff;                      /* Card/form backgrounds */
  --color-text: var(--color-brand-dark);         /* Main text color */
  --color-text-muted: var(--color-brand-mid-gray); /* Less important text */
  --color-primary: var(--color-brand-dark);      /* Primary buttons & links */
  --color-primary-hover: #2e2924;                /* Button hover state */
  --color-border: #e0d9cf;                       /* Borders and dividers */
  --color-input-bg: #ffffff;                     /* Form input backgrounds */

  /* --- Fonts ---
     "Nunito" is used for headings (bold, friendly look).
     "Inter" is used for body text (clean, easy to read). */
  --font-display: 'Nunito', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* --- Spacing Scale ---
     Consistent spacing throughout the site.
     "rem" is a relative unit – scales with browser font size. */
  --space-xs: 0.25rem;    /* 4px – tiny gaps */
  --space-sm: 0.5rem;     /* 8px – small gaps */
  --space-md: 1rem;        /* 16px – medium gaps */
  --space-lg: 1.5rem;      /* 24px – large gaps */
  --space-xl: 2.5rem;      /* 40px – extra large gaps */
  --space-2xl: 4rem;       /* 64px – section padding */
  --space-3xl: 6rem;       /* 96px – major section padding */

  /* --- Rounded Corners --- */
  --radius-sm: 6px;        /* Slightly rounded (inputs, small elements) */
  --radius-md: 12px;       /* Medium rounded (cards) */
  --radius-lg: 20px;       /* Large rounded (form containers) */
  --radius-full: 9999px;   /* Fully round (buttons, pills, circles) */

  /* --- Shadows (depth/elevation effects) --- */
  --shadow-sm: 0 1px 3px rgba(30, 26, 23, 0.06);    /* Subtle shadow */
  --shadow-md: 0 4px 12px rgba(30, 26, 23, 0.08);    /* Medium shadow */
  --shadow-lg: 0 8px 30px rgba(30, 26, 23, 0.1);     /* Strong shadow */

  /* --- Animation Speeds --- */
  --transition-fast: 0.15s ease;   /* Quick interactions (button hover) */
  --transition-base: 0.25s ease;   /* Standard transitions (theme change) */
  --transition-slow: 0.4s ease;    /* Slow, smooth transitions */

  /* --- Header Height (used for scroll offset calculations) --- */
  --header-height: 72px;
}


/* ==============================================
   DARK MODE COLORS
   ==============================================
   When the user switches to dark mode, these color values
   override the light mode defaults above.
   The "[data-theme="dark"]" selector targets the <html> element
   when its data-theme attribute is set to "dark".
*/
[data-theme="dark"] {
  --color-bg: #151210;                              /* Dark page background */
  --color-bg-alt: #1e1a17;                          /* Slightly lighter dark background */
  --color-surface: #252119;                         /* Card backgrounds in dark mode */
  --color-text: var(--color-brand-cream);           /* Light text on dark background */
  --color-text-muted: var(--color-brand-warm-gray); /* Muted text in dark mode */
  --color-primary: var(--color-brand-cream);        /* Primary color flips to cream */
  --color-primary-hover: #ffffff;                   /* Hover becomes white */
  --color-border: #3a342d;                          /* Dark mode borders */
  --color-input-bg: #1e1a17;                        /* Dark input backgrounds */
}


/* ==============================================
   LOGO VISIBILITY
   ==============================================
   Two logo files exist:
   - rf_logo_blck.png (logo with dark background) → shown in DARK mode
   - rf_logo_wht.png (logo with light background) → shown in LIGHT mode
   CSS hides the wrong logo based on the current theme.
*/
[data-theme="light"] .logo-dark,
[data-theme="light"] .footer-logo.logo-dark {
  display: none;
}

[data-theme="dark"] .logo-light,
[data-theme="dark"] .footer-logo.logo-light {
  display: none;
}

[data-theme="light"] .logo-light,
[data-theme="light"] .footer-logo.logo-light {
  display: block;
}

[data-theme="dark"] .logo-dark,
[data-theme="dark"] .footer-logo.logo-dark {
  display: block;
}


/* ==============================================
   RESET & BASE STYLES
   ==============================================
   Removes default browser styling and sets up base rules
   so the design looks consistent across all browsers.
*/
*,
*::before,
*::after {
  box-sizing: border-box;  /* Makes width/height calculations include padding & border */
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;                      /* Smooth scrolling when clicking anchor links */
  scroll-padding-top: var(--header-height);     /* Prevents content from hiding behind the fixed header */
}

/* Accessibility: Disables animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;        /* Makes text look smoother on Mac */
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--transition-base), color var(--transition-base);
}

img {
  max-width: 100%;   /* Images never overflow their container */
  height: auto;
  display: block;
}

a {
  color: var(--color-text);
  text-decoration: none;    /* No underlines by default */
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-accent, var(--color-brand-accent));   /* Gold color on hover */
}

ul {
  list-style: none;   /* Removes default bullet points */
}

address {
  font-style: normal;   /* Override browser default italic style for <address> */
}

/* Keyboard focus indicator – visible ring when using Tab to navigate */
:focus-visible {
  outline: 2px solid var(--color-brand-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}


/* ==============================================
   LAYOUT CONTAINER
   ==============================================
   Centers content and limits maximum width to 1200px.
   Used as a wrapper inside every section.
*/
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;             /* Centers the container horizontally */
  padding: 0 var(--space-lg); /* Side padding so content doesn't touch screen edges */
}


/* ==============================================
   TYPOGRAPHY (Text Styles)
   ==============================================
*/
h1, h2, h3, h4 {
  font-family: var(--font-display);   /* Headings use Nunito font */
  font-weight: 900;                   /* Extra bold */
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/* Section headings – "clamp" makes the font size responsive:
   minimum 1.75rem, preferred 4vw, maximum 2.75rem */
.section-title {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  margin-bottom: var(--space-sm);
}

/* Subtitle text below section headings */
.section-subtitle {
  font-size: 1.05rem;
  color: var(--color-text-muted);
  max-width: 560px;
  margin-bottom: var(--space-2xl);
}


/* ==============================================
   BUTTONS
   ==============================================
   Reusable button styles. The primary button uses
   the brand's main color with a pill shape.
*/
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  padding: 0.85rem 2rem;
  border: none;
  border-radius: var(--radius-full);   /* Fully rounded "pill" shape */
  cursor: pointer;
  transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  text-decoration: none;
}

/* Hover effect: slight lift and shadow */
.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn:active {
  transform: translateY(0);   /* Pressed state – back to normal position */
}

/* Primary button style: dark background, light text (flips in dark mode) */
.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-bg);
}

.btn-primary:hover {
  background-color: var(--color-primary-hover);
  color: var(--color-bg);
}


/* ========================================
   HEADER (Top Navigation Bar)
   ========================================
   Fixed to the top of the screen. Always visible while scrolling.
*/
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;   /* Ensures header stays above all other content */
  height: var(--header-height);
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  transition: background-color var(--transition-base), border-color var(--transition-base);
}

/* Header layout: logo on left, nav in center, controls on right */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.logo-link {
  display: flex;
  align-items: center;
  flex-shrink: 0;   /* Prevents logo from shrinking when space is tight */
}

.logo {
  width: 120px;
  height: auto;
}

/* Navigation links – horizontal list */
.nav-list {
  display: flex;
  gap: var(--space-lg);
}

.nav-link {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: var(--space-xs) 0;
  position: relative;
}

/* Animated gold underline that appears on hover */
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;                    /* Starts invisible */
  height: 2px;
  background: var(--color-brand-accent);
  transition: width var(--transition-base);
}

.nav-link:hover::after {
  width: 100%;                 /* Expands to full width on hover */
}

/* Header controls area (language switcher + theme toggle + menu button) */
.header-controls {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

/* Language switcher – row of DE/EN/SR buttons */
.lang-switcher {
  display: flex;
  gap: 2px;
  background: var(--color-bg-alt);
  border-radius: var(--radius-full);
  padding: 3px;
}

.lang-btn {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  padding: 4px 10px;
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.lang-btn:hover {
  color: var(--color-text);
}

/* Active language button – highlighted with primary color */
.lang-btn.active {
  background: var(--color-primary);
  color: var(--color-bg);
}

/* Theme toggle button (sun/moon icon) */
.theme-toggle {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-full);
  background: var(--color-bg-alt);
  color: var(--color-text);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.theme-toggle:hover {
  background: var(--color-border);
}

/* Show/hide sun and moon icons based on current theme */
[data-theme="light"] .theme-icon--sun {
  display: none;   /* In light mode, hide the sun (show moon to switch to dark) */
}

[data-theme="dark"] .theme-icon--moon {
  display: none;   /* In dark mode, hide the moon (show sun to switch to light) */
}

/* Hamburger menu button – only visible on mobile (see responsive section below) */
.menu-toggle {
  display: none;              /* Hidden on desktop */
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 8px;
}

/* The three horizontal lines of the hamburger icon */
.hamburger-line {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform var(--transition-base), opacity var(--transition-base);
}

/* When menu is open, the three lines animate into an "X" shape */
.menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(2) {
  opacity: 0;   /* Middle line disappears */
}

.menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* ========================================
   HERO SECTION (Main Banner)
   ========================================
   The big welcome area at the top of the page.
   Takes up most of the screen height (90vh = 90% of viewport).
*/
.hero {
  min-height: 90vh;
  display: flex;
  align-items: center;
  padding-top: var(--header-height);   /* Prevents content from hiding behind the fixed header */
  background: var(--color-bg);
  overflow: hidden;
}

/* Two-column layout: text on left, sparkles on right */
.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-2xl);
  padding: var(--space-3xl) 0;
}

/* Small badge text above the main heading (e.g., "Professional Cleaning Service") */
.hero-badge {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-brand-accent);
  margin-bottom: var(--space-md);
}

/* Main hero heading – responsive font size */
.hero-title {
  font-size: clamp(2.25rem, 5.5vw, 4rem);
  margin-bottom: var(--space-lg);
  line-height: 1.08;
}

.hero-subtitle {
  font-size: 1.15rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-xl);
  max-width: 480px;
  line-height: 1.7;
}

/* Decorative sparkle stars – floating animation on the right side */
.hero-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.sparkle-cluster {
  position: relative;
  width: 300px;
  height: 300px;
}

.sparkle {
  position: absolute;
  color: var(--color-brand-accent);
  font-size: 3rem;
  opacity: 0.6;
  animation: sparkle-float 3s ease-in-out infinite;
}

/* Each sparkle has a slightly different size and position */
.sparkle-1 {
  top: 20%;
  left: 30%;
  font-size: 4.5rem;
  opacity: 0.8;
  animation-delay: 0s;
}

.sparkle-2 {
  top: 50%;
  right: 20%;
  font-size: 2.5rem;
  animation-delay: 1s;
}

.sparkle-3 {
  bottom: 20%;
  left: 40%;
  font-size: 3.5rem;
  opacity: 0.5;
  animation-delay: 2s;
}

/* Animation: sparkles gently float up and down */
@keyframes sparkle-float {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.5; }
  50% { transform: translateY(-12px) scale(1.1); opacity: 0.9; }
}


/* ========================================
   SERVICES SECTION
   ========================================
   Grid of 6 service cards (3 columns on desktop).
   Each card has an icon, title, and description.
*/
.services {
  padding: var(--space-3xl) 0;
  background: var(--color-bg-alt);   /* Alternate background color to create visual separation */
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* 3 equal-width columns */
  gap: var(--space-lg);
}

.service-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  border: 1px solid var(--color-border);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

/* Hover effect: card lifts up, gets a shadow, and border turns gold */
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-brand-accent);
}

/* Service icon container (the rounded square behind each icon) */
.service-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-lg);
  color: var(--color-text);
}

.service-name {
  font-size: 1.15rem;
  margin-bottom: var(--space-sm);
}

.service-desc {
  font-size: 0.92rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}


/* ========================================
   ABOUT SECTION
   ========================================
   Two-column layout: description text on left,
   three feature highlights on the right.
*/
.about {
  padding: var(--space-3xl) 0;
}

.about-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: start;
}

.about-text {
  font-size: 1.05rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
  line-height: 1.7;
}

/* Feature list (Reliable, Punctual, Detail-Oriented) */
.about-features {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.feature {
  display: flex;
  gap: var(--space-lg);
  align-items: flex-start;
}

/* Gold circle with checkmark icon */
.feature-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-brand-accent);
  color: #ffffff;
  font-weight: 700;
  font-size: 1.1rem;
  border-radius: var(--radius-full);
}

.feature-title {
  font-size: 1.05rem;
  margin-bottom: var(--space-xs);
}

.feature-desc {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}


/* ========================================
   WHY CHOOSE US SECTION
   ========================================
   2x2 grid of numbered cards explaining company advantages.
*/
.why-us {
  padding: var(--space-3xl) 0;
  background: var(--color-bg-alt);
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* 2 columns */
  gap: var(--space-lg);
}

.why-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  border: 1px solid var(--color-border);
  transition: border-color var(--transition-base);
}

.why-card:hover {
  border-color: var(--color-brand-accent);   /* Gold border on hover */
}

/* Big gold numbers (01, 02, 03, 04) */
.why-number {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2rem;
  color: var(--color-brand-accent);
  margin-bottom: var(--space-md);
  line-height: 1;
}

.why-card-title {
  font-size: 1.15rem;
  margin-bottom: var(--space-sm);
}

.why-card-desc {
  font-size: 0.92rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}


/* ========================================
   CONTACT SECTION
   ========================================
   Two-column layout: contact info on left, form on right.
*/
.contact {
  padding: var(--space-3xl) 0;
}

.contact-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: start;
}

.contact-text {
  font-size: 1.05rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-xl);
  line-height: 1.7;
}

/* Contact details list (phone, email, address) */
.contact-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.contact-detail-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-size: 0.95rem;
}

/* Gold color for the small icons next to contact info */
.contact-detail-item svg {
  flex-shrink: 0;
  color: var(--color-brand-accent);
}

.contact-detail-item a {
  color: var(--color-text);
}

.contact-detail-item a:hover {
  color: var(--color-brand-accent);
}

/* --- Contact Form Styling --- */
.contact-form {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
}

/* Each form field group (label + input + error message) */
.form-group {
  margin-bottom: var(--space-lg);
}

.form-group label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: var(--space-sm);
}

/* Text inputs and textarea styling */
.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text);
  background: var(--color-input-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

/* Focus state: gold border with subtle glow when user clicks into a field */
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-brand-accent);
  box-shadow: 0 0 0 3px rgba(200, 169, 110, 0.15);
}

.form-group textarea {
  resize: vertical;       /* User can only resize vertically */
  min-height: 120px;
}

/* Validation error state – red border on invalid fields */
.form-group input.invalid,
.form-group textarea.invalid {
  border-color: #c0392b;
}

/* Error message text – hidden by default, shown when field has "invalid" class */
.form-error {
  display: none;
  font-size: 0.8rem;
  color: #c0392b;
  margin-top: var(--space-xs);
}

/* Show error message when the sibling input has the "invalid" class */
.form-group input.invalid ~ .form-error,
.form-group textarea.invalid ~ .form-error {
  display: block;
}

/* Submit button – full width */
.btn-submit {
  width: 100%;
  padding: 1rem;
  font-size: 1.05rem;
}

/* Success and error messages shown after form submission */
.form-status {
  margin-top: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  font-weight: 500;
}

/* Green success message */
.form-status--success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

/* Red error message */
.form-status--error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

/* Dark mode versions of success/error messages */
[data-theme="dark"] .form-status--success {
  background: #1a3a1a;
  color: #a8d5a8;
  border-color: #2a5a2a;
}

[data-theme="dark"] .form-status--error {
  background: #3a1a1a;
  color: #d5a8a8;
  border-color: #5a2a2a;
}


/* ========================================
   FOOTER
   ========================================
   Dark bottom section. Always uses the dark brand color
   as background, regardless of light/dark mode.
*/
.site-footer {
  background: var(--color-brand-dark);
  color: var(--color-brand-cream);
  padding: var(--space-2xl) 0;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-lg);
}

.footer-logo {
  width: 100px;
  margin: 0 auto var(--space-sm);
}

/* Footer always shows the dark-background logo (regardless of theme)
   because the footer background is always dark */
.site-footer .footer-logo.logo-light {
  display: none !important;
}

.site-footer .footer-logo.logo-dark {
  display: block !important;
}

.footer-tagline {
  font-size: 0.88rem;
  color: var(--color-brand-warm-gray);
}

/* Footer navigation links (Impressum, Datenschutz, Kontakt) */
.footer-links {
  display: flex;
  gap: var(--space-xl);
  flex-wrap: wrap;
  justify-content: center;
}

.footer-links a {
  color: var(--color-brand-warm-gray);
  font-size: 0.88rem;
  transition: color var(--transition-fast);
}

.footer-links a:hover {
  color: var(--color-brand-cream);
}

.footer-copy {
  font-size: 0.8rem;
  color: var(--color-brand-mid-gray);
}


/* ========================================
   RESPONSIVE DESIGN
   ========================================
   These rules adjust the layout for different screen sizes.
   The website is "desktop-first" – the default styles above
   are for large screens, and these @media rules override
   them for smaller screens.
*/

/* --- TABLET (screens up to 1024px wide) --- */
@media (max-width: 1024px) {
  /* Hero: single column, centered text */
  .hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-subtitle {
    margin-left: auto;
    margin-right: auto;
  }

  /* Hide sparkle decorations on tablet (not enough space) */
  .hero-visual {
    display: none;
  }

  /* Services: 2 columns instead of 3 */
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* About and Contact: single column instead of side-by-side */
  .about-inner {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  .contact-inner {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }
}

/* --- MOBILE (screens up to 768px wide) --- */
@media (max-width: 768px) {
  :root {
    --header-height: 64px;   /* Slightly shorter header on mobile */
  }

  /* Mobile navigation: full-screen overlay that slides in from the right */
  .main-nav {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(100%);   /* Hidden off-screen to the right */
    transition: transform var(--transition-base);
    z-index: 999;
  }

  /* When menu is open, slide it into view */
  .main-nav.open {
    transform: translateX(0);
  }

  /* Vertical centered links in mobile menu */
  .nav-list {
    flex-direction: column;
    align-items: center;
    gap: var(--space-xl);
  }

  .nav-link {
    font-size: 1.25rem;   /* Larger touch targets on mobile */
  }

  /* Show the hamburger menu button on mobile */
  .menu-toggle {
    display: flex;
  }

  .hero {
    min-height: 80vh;
  }

  .hero-inner {
    padding: var(--space-2xl) 0;
  }

  /* Services and Why Us: single column on mobile */
  .services-grid {
    grid-template-columns: 1fr;
  }

  .why-grid {
    grid-template-columns: 1fr;
  }

  .section-title {
    font-size: clamp(1.5rem, 6vw, 2.25rem);
  }

  /* Smaller logo and language buttons on mobile */
  .logo {
    width: 100px;
  }

  .lang-switcher {
    gap: 1px;
    padding: 2px;
  }

  .lang-btn {
    font-size: 0.7rem;
    padding: 3px 7px;
  }
}


/* ========================================
   LEGAL PAGES (Impressum & Datenschutz)
   ========================================
   Styles for the legal notice and privacy policy pages.
   These pages share the same header/footer but have
   a simpler single-column text layout.
*/
.legal-page {
  padding-top: calc(var(--header-height) + var(--space-2xl));   /* Space for fixed header */
  padding-bottom: var(--space-3xl);
  min-height: 80vh;
}

/* "Back to Home" link with arrow */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-brand-accent);
  margin-bottom: var(--space-xl);
  text-decoration: none;
}

.back-link::before {
  content: '\2190';   /* Left arrow character ← */
  font-size: 1.2rem;
}

.back-link:hover {
  color: var(--color-text);
}

/* Legal page heading */
.legal-title {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  margin-bottom: var(--space-2xl);
}

/* Section headings within legal content (with bottom border) */
.legal-content h2 {
  font-size: 1.3rem;
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}

.legal-content h3 {
  font-size: 1.1rem;
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
}

/* Legal text paragraphs – limited width for readability */
.legal-content p {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
  max-width: 780px;
}

.legal-content strong {
  color: var(--color-text);
}

/* Bulleted list (used in privacy policy for GDPR rights) */
.legal-list {
  list-style: disc;
  padding-left: var(--space-xl);
  margin-bottom: var(--space-lg);
}

.legal-list li {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--color-text-muted);
  margin-bottom: var(--space-xs);
}

/* Placeholder text – shown in gold italic where real business data should be entered */
.placeholder {
  color: var(--color-brand-accent);
  font-style: italic;
}


/* --- SMALL PHONES (screens up to 400px wide) --- */
@media (max-width: 400px) {
  .container {
    padding: 0 var(--space-md);   /* Tighter side padding */
  }

  .service-card {
    padding: var(--space-lg);
  }

  .contact-form {
    padding: var(--space-lg);
  }
}