/* =====================================================
   Base Reset & Design Tokens (Light Theme Default)
   Palette: Sage Green (#a8b4a0) + Clean White
   Typography: Mulish (body) & Space Mono (headings / accents)
   ===================================================== */
:root {
  /* Core brand colors */
  --color-beige: #fafafa; /* Haupt-Hintergrund */
  --color-beige-alt: #ffffff; /* Abgesetzter Hintergrund */
  --color-burlywood: #a8b4a0; /* Primärer Akzent / Sage Green */
  --color-burlywood-alt: #8a9882; /* Dunklere Variante für Hover / Gradients */
  --color-burlywood-soft: #d4ddd0; /* Helle Nuance für Flächen */

  /* Semantic tokens */
  --bg: var(--color-beige);
  --bg-alt: var(--color-beige-alt);
  --surface: var(--color-burlywood-soft);
  --panel: var(--bg-alt); /* Vereinheitlichte Fläche für Boxen & Buttons */
  --text: #111111;
  --text-dim: #4D4A44;
  --accent: var(--color-burlywood);
  --accent-alt: var(--color-burlywood-alt);
  --border: #D6CCBE;
  --error: #B80000;

  /* Radii & Elevation */
  --radius-s: 4px;
  --radius-m: 10px;
  --radius-l: 18px;
  --shadow-sm: 0 2px 4px -1px rgba(0,0,0,.08);
  --shadow: 0 4px 16px -4px rgba(0,0,0,.14);

  /* Motion */
  --transition: .28s cubic-bezier(.4,.2,.2,1);

  /* Spacing scale */
  --space-2xs: clamp(.4rem, .6vw, .6rem);
  --space-xs: clamp(.6rem, 1vw, .85rem);
  --space-sm: clamp(.85rem, 1.4vw, 1.2rem);
  --space-md: clamp(1.1rem, 2vw, 1.6rem);
  --space-lg: clamp(1.6rem, 3vw, 2.2rem);
  --space-xl: clamp(2.2rem, 4vw, 3rem);
  --space-2xl: clamp(3rem, 6vw, 4.2rem);
  --space-section: clamp(4rem, 8vw, 7rem);

  --header-height: clamp(64px, 7vh, 96px);

  font-size: 16px;
  color-scheme: light;
}

html {
  scroll-padding-top: var(--header-height);
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Dark Theme Override (keeps brand accent) */
[data-theme='dark'] {
  --bg: #121212;
  --bg-alt: #1C1C1C;
  --surface: #222222;
  --text: #F5F5F5;
  --text-dim: #C5C5C5;
  --accent: var(--color-burlywood);
  --accent-alt: #c2d1bc;
  --border: #2A2A2A;
  --shadow-sm: 0 2px 4px -1px rgba(0,0,0,.45);
  --shadow: 0 4px 18px -4px rgba(0,0,0,.6);
  color-scheme: dark;
  /* Extended dark tokens */
  --surface-alt: #262626;
  --surface-accent: #2E2A26; /* subtle sage green tinted dark */
  --menu-bg: rgba(28,28,28,.97);
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  font-family: 'Mulish', 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-size: clamp(.95rem, .92rem + .2vw, 1.05rem);
}

button,
.btn,
.nav-toggle,
.lang-switch button {
  touch-action: manipulation;
}

img { max-width:100%; display:block; }
figure { margin:0; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-alt); }

h1,h2,h3 { line-height:1.15; font-weight:600; margin:0 0 .6em; font-family: 'Space Mono', monospace; }
p { margin:0 0 1em; }

img { max-width:100%; display:block; }
figure { margin:0; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-alt); }

h1,h2,h3 { line-height:1.15; font-weight:600; margin:0 0 .6em; }
p { margin:0 0 1em; }

/* Layout Utilities – Mobile-First */
.container { 
  width: 100%; 
  max-width: 1180px; 
  margin: 0 auto; 
  padding: 0 clamp(1rem, 5vw, 1.6rem); /* Besseres Mobile-Padding */
}
.narrow { max-width: 720px; }
.flex { display: flex; }
.between { justify-content: space-between; }
.center-v { align-items: center; }
.wrap-gap { flex-wrap: wrap; gap: var(--space-md); }
.grid-2 { 
  display: grid; 
  grid-template-columns: 1fr; /* Mobile: 1 Spalte */
  gap: var(--space-lg); 
  align-items: center; 
}

/* Desktop: 2 Spalten Grid */
@media (min-width: 768px) {
  .wrap-gap { gap: var(--space-lg); }
  .grid-2 { 
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: var(--space-xl); 
  }
}

/* =====================================================
   Section Spacing – Mobile-First mit 96px auf Desktop
   ===================================================== */
.section {
  padding-top: clamp(48px, 8vw, 96px);
  padding-bottom: clamp(48px, 8vw, 96px);
}

/* Desktop: volle 96px */
@media (min-width: 768px) {
  .section {
    padding-top: 96px;
    padding-bottom: 96px;
  }
}
#about .container.grid-2 {
  margin: 0 auto;
  margin-top: clamp(48px, 8vw, 96px);
  justify-items: center;
  max-width: 100%;
  gap: var(--space-lg);
}

@media (min-width: 768px) {
  #about .container.grid-2 {
    margin-top: 96px;
    max-width: clamp(740px, 80vw, 1080px);
    gap: var(--space-xl);
  }
}

/* Header */
.site-header { position: sticky; top:0; background: rgba(255,255,255,.92); border-bottom:1px solid var(--border); z-index:50; backdrop-filter: blur(6px); }
[data-theme='dark'] .site-header { background: rgba(207, 29, 29, 0.78); border-bottom:1px solid rgba(255,255,255,.05); }
.logo { display:inline-flex; align-items:center; gap:.55rem; text-decoration:none; font-weight:600; letter-spacing:.5px; font-size:1.15rem; color:#000; }
.logo img { display:block; height:auto; max-height:80px; width:auto; object-fit:contain; /* removed shadow/filter for clean integration */ }
.site-header .logo img { max-height:72px; }
@media (max-width:640px){ .site-header .logo img { max-height:58px; } }
/* Ensure footer smaller variant still clear */
.logo.small img { max-height:56px; }

.main-nav { position:relative; z-index: 60; }
.nav-toggle {
  --burger-line: clamp(18px, 6vw, 22px);
  --burger-height: 2px;
  --burger-gap: clamp(4px, 1vw, 5px);
  background:none;
  border:1px solid var(--border);
  border-radius: var(--radius-s);
  padding: clamp(.45rem, 1.8vw, .7rem) clamp(.55rem, 2vw, .85rem);
  cursor:pointer;
  display:none;
  flex-direction:column;
  gap: var(--burger-gap);
  min-width: clamp(42px, 10vw, 46px);
  min-height: clamp(42px, 10vw, 46px);
  align-items:center;
  justify-content:center;
  transition: border-color .3s ease, transform .35s ease;
}
.nav-toggle:hover,
.nav-toggle:focus-visible { border-color: var(--accent); }
.nav-toggle span {
  width: var(--burger-line);
  height: var(--burger-height);
  border-radius: 999px;
  background: var(--text);
  transition: transform .35s cubic-bezier(.4,.2,.2,1), opacity .25s ease;
  transform-origin: center;
}
.nav-toggle span:nth-child(2) { width: calc(var(--burger-line) * .85); }
.nav-toggle.is-active span:nth-child(1) {
  transform: translateY(calc(var(--burger-gap) + var(--burger-height))) rotate(45deg);
}
.nav-toggle.is-active span:nth-child(2) {
  opacity: 0;
}
.nav-toggle.is-active span:nth-child(3) {
  transform: translateY(calc(-1 * (var(--burger-gap) + var(--burger-height)))) rotate(-45deg);
}

.nav-links {
  list-style:none;
  margin:0;
  padding: clamp(1.4rem, 4.6vw, 2.1rem);
  position: fixed;
  left: 50%;
  top: calc(var(--header-height) + clamp(.8rem, 3vw, 1.4rem));
  width: min(320px, calc(100vw - clamp(2rem, 14vw, 3.6rem)));
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:stretch;
  gap: clamp(.75rem, 3.4vw, 1.05rem);
  background: rgba(255,255,255,.95);
  border-radius: var(--radius-l);
  border:1px solid var(--border);
  box-shadow: var(--shadow);
  transform: translate(-50%, -12px) scale(.94);
  transform-origin: top center;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  max-height: calc(100vh - (var(--header-height) + clamp(2.2rem, 14vw, 4.8rem)));
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling: touch;
  transition: transform .4s cubic-bezier(.4,.2,.2,1), opacity .3s ease, visibility .3s ease;
  z-index:55;
}
.nav-links.open {
  transform: translate(-50%, 0) scale(1);
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.nav-links li {
  list-style:none;
  padding: clamp(.35rem, 1.6vw, .55rem) 0;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.nav-links li:last-child { border-bottom:none; }
.nav-links a {
  font-size: clamp(.95rem, 3vw, 1.1rem);
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  position:relative;
  padding:.15rem 0;
  color:#000 !important;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:42px;
}
[data-theme='dark'] .nav-links {
  background: rgba(20,20,20,.96);
  border-color: rgba(168,180,160,.25);
}
[data-theme='dark'] .nav-links li { border-bottom:1px solid rgba(168,180,160,.18); }
[data-theme='dark'] .nav-links a { color: var(--text) !important; }
.nav-links a:after { content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background: var(--accent); transition: var(--transition); }
.nav-links a:hover:after, .nav-links a:focus:after { width:100%; }

body.nav-open { overflow:hidden; }

@media (prefers-reduced-motion: reduce) {
  .nav-toggle { transition: none; }
  .nav-toggle span { transition: none; }
  .nav-links { transition: none; }
}

@media (prefers-reduced-motion: reduce) and (max-width: 860px) {
  .nav-links { transform: translate(-50%, -12px); }
  .nav-links.open { transform: translate(-50%, 0); }
}


/* Theme Toggle */

.about-intro-block { margin-top: 0; margin-bottom: 0; }
.about-intro {
  position: relative;
  max-width: 100%;
  padding: clamp(1.5rem, 4vw, 3.8rem) clamp(1.2rem, 5vw, 4rem); /* Kompakteres Mobile-Padding */
  border-radius: var(--radius-m);
  border: 1px solid var(--border);
  background:
    linear-gradient(155deg, rgba(168, 180, 160, .2), rgba(255,255,255,0)),
    linear-gradient(45deg, rgba(255,255,255,.7), rgba(255,255,255,0));
  box-shadow: var(--shadow);
  display: grid;
  gap: var(--space-lg);
  overflow: hidden;
}

@media (min-width: 768px) {
  .about-intro {
    padding: clamp(2.5rem, 4vw, 3.8rem) clamp(2.2rem, 5vw, 4rem);
    border-radius: var(--radius-l);
    gap: var(--space-xl);
  }
}
.about-intro:before {
  content: "";
  position: absolute;
  inset: -35% 45% auto -25%;
  height: 120%;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(168, 180, 160, .24), transparent 72%);
  opacity: .78;
  pointer-events: none;
}
[data-theme='dark'] .about-intro {
  background:
    linear-gradient(150deg, rgba(168, 180, 160, .16), rgba(22,22,22,.92))
    , var(--surface-alt, #202020);
  border-color: rgba(255,255,255,.06);
  box-shadow: 0 16px 44px -18px rgba(0,0,0,.65);
}
[data-theme='dark'] .about-intro:before {
  background: radial-gradient(circle at center, rgba(168, 180, 160, .22), transparent 75%);
  opacity: .55;
}
.intro-note {
  grid-area: note;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(.28rem, .8vw, .55rem);
  align-items: center;
  color: var(--accent-alt);
  font-size: clamp(.58rem, .54rem + .24vw, .72rem);
  letter-spacing: .045em;
  text-transform: none;
  line-height: 1.4;
}
.note-tag {
  display: inline-flex;
  align-items: center;
  padding: .24rem .58rem;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(168,180,160,.32);
  color: var(--text);
  font-family: 'Space Mono', monospace;
  white-space: nowrap;
  letter-spacing: .045em;
  transition: transform .25s ease, box-shadow .25s ease;
}
.note-tag:hover,
.note-tag:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

@media (max-width: 540px) {
  .intro-note {
    gap: .3rem;
    font-size: .56rem;
    justify-content: flex-start;
  }
  .note-tag {
    padding: .22rem .5rem;
    letter-spacing: .04em;
  }
}
.intro-layout {
  position: relative;
  display: grid;
  gap: var(--space-lg);
  margin-top: clamp(1.8rem, 3vw, 2.4rem);
  align-items: start;
  grid-template-columns: 1fr;
  grid-template-areas:
    "note"
    "main"
    "visual";
}
.intro-main {
  grid-area: main;
  display: grid;
  gap: var(--space-lg);
}
.intro-main .intro-title {
  font-size: clamp(1.6rem, 5vw, 3.2rem); /* Kleinere Mobile-Schrift */
  margin: 0;
  background: linear-gradient(100deg, var(--accent-alt), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: .2px;
  line-height: 1.2;
  text-wrap: balance;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
  max-width: 18ch;
}
.intro-main .lead {
  margin: 0;
  color: var(--text-dim);
  max-width: 60ch;
}
#about-intro,
#about-heading,
#portfolio-heading,
#contact-heading {
  scroll-margin-top: calc(var(--header-height) + var(--space-sm));
}
.intro-stats {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}
.intro-stats li {
  display: grid;
  gap: var(--space-xs);
}
.stat-value {
  font-family: 'Space Mono', monospace;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  letter-spacing: .24em;
  color: var(--accent-alt);
}
.stat-label {
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-family: 'Space Mono', monospace;
}
.intro-cta { 
  display: flex; 
  flex-direction: column; /* Mobile: Buttons untereinander */
  gap: var(--space-sm); 
  width: 100%;
}

@media (min-width: 480px) {
  .intro-cta { 
    flex-direction: row; 
    flex-wrap: wrap;
    width: auto;
  }
}
.intro-visual {
  grid-area: visual;
  position: relative;
  margin: 0;
  display: grid;
  gap: var(--space-md);
  align-self: start;
}
.intro-visual .visual-stack {
  position: relative;
  border-radius: var(--radius-m);
  border: 1px solid rgba(168,180,160,.28);
  box-shadow: 0 12px 30px -18px rgba(0,0,0,.3);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  isolation: isolate;
  /* CLS-Vermeidung */
  min-height: 300px;
  contain: layout style;
}

@media (min-width: 768px) {
  .intro-visual .visual-stack {
    border-radius: var(--radius-l);
    box-shadow: 0 18px 40px -24px rgba(0,0,0,.3);
    min-height: auto;
  }
}
.intro-visual .visual-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .9s ease, transform 1.4s cubic-bezier(.3,.2,.1,1);
  filter: saturate(1.05) contrast(1.02);
}
.intro-visual .visual-frame.is-active {
  opacity: 1;
  transform: scale(1);
  z-index: 1;
}
.intro-visual .visual-frame.is-leaving {
  opacity: 0;
  transform: scale(1.02);
}
.intro-visual figcaption {
  font-family: 'Space Mono', monospace;
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-dim);
}
[data-theme='dark'] .note-pill {
  background: rgba(28,28,28,.8);
  border-color: rgba(168,180,160,.2);
}
[data-theme='dark'] .intro-visual .visual-stack { border-color: rgba(168,180,160,.18); }
@media (max-width: 960px) {
  .intro-layout { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .intro-layout {
    grid-template-areas:
      "visual"
      "note"
      "main";
  }
}
@media (max-width: 640px) {
  .intro-note { gap: var(--space-xs); justify-content: flex-start; }
  .intro-stats { gap: var(--space-md); }
}
.lead { font-size: clamp(.95rem,1.4vw,1.1rem); color: var(--text-dim); max-width: 50ch; }

/* Performance: avoid work for below-the-fold sections initially */
#portfolio.section,
#testimonials.section {
  content-visibility: auto;
  contain-intrinsic-size: 1px 1000px; /* reserve space to avoid jumps */
}

/* Buttons – Mobile-First Touch-Optimiert */
.btn { 
  --btn-bg: var(--panel); 
  --btn-color: var(--text); 
  --btn-border: var(--border); 
  font: 600 clamp(.85rem, .82rem + .2vw, .95rem)/1.2 'Space Mono', monospace; 
  letter-spacing: .06em; 
  display: inline-flex; 
  align-items: center; 
  justify-content: center;
  gap: .5rem; 
  padding: .875rem 1.25rem; /* Kompakteres Padding für Mobile */
  border-radius: var(--radius-m); 
  border: 1px solid var(--btn-border); 
  background: var(--btn-bg); 
  color: var(--btn-color); 
  cursor: pointer; 
  position: relative; 
  overflow: hidden; 
  transition: var(--transition); 
  text-transform: uppercase; 
  box-shadow: var(--shadow-sm); 
  min-height: 48px; /* Touch-Target mindestens 48px */
  min-width: 48px;
  width: 100%; /* Mobile: volle Breite */
  text-align: center;
}

/* Desktop: Auto-Breite */
@media (min-width: 640px) {
  .btn {
    width: auto;
    padding: 1rem 1.5rem;
  }
}

.btn.primary, .btn.outline, .btn.subtle { 
  background: var(--panel); 
  color: var(--text); 
  border-color: var(--border); 
  box-shadow: var(--shadow-sm); 
}

.btn:hover { 
  background: var(--accent); 
  color: #111; 
  border-color: var(--accent); 
  transform: translateY(-2px); 
  box-shadow: 0 4px 16px -4px rgba(0,0,0,.25); 
}

/* Touch: Kein Hover-Transform auf Touch-Geräten */
@media (hover: none) {
  .btn:hover {
    transform: none;
  }
  .btn:active {
    transform: scale(0.98);
    opacity: 0.9;
  }
}
.about-img {
  width: 100%;
  max-width: 100%; /* Mobile: volle Breite */
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow: var(--shadow);
  justify-self: center;
}

@media (min-width: 768px) {
  .about-img {
    max-width: clamp(320px, 36vw, 420px);
    border-radius: var(--radius-l);
  }
}

.about-img:after { display: none; }
.about-img img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  aspect-ratio: 3 / 4;
  filter: saturate(1.08) contrast(1.02);
}

#about .container.grid-2 .about-text {
  max-width: 100%; /* Mobile: volle Breite */
  justify-items: start;
  text-align: left;
}

@media (min-width: 768px) {
  #about .container.grid-2 .about-text {
    max-width: clamp(320px, 42vw, 520px);
  }
}
.about-text { display:grid; gap: var(--space-sm); }
.about-text h2 { margin:0; }
.about-text p { color: var(--text-dim); margin:0; }
.about-text .btn { justify-self: flex-start; }
.about-text .btn { margin-top: var(--space-xs); }
[data-theme='dark'] .about-img {
  box-shadow: 0 18px 42px -24px rgba(0,0,0,.75);
  border: 1px solid rgba(168,180,160,.22);
}

/* Mobile: show about-text first, then about-img */
@media (max-width: 768px) {
  #about .container.grid-2 { 
    grid-template-columns: 1fr; 
    grid-template-areas:
      "text"
      "image";
    gap: var(--space-lg);
  }
  #about .container.grid-2 .about-text { 
    grid-area: text; 
    max-width: 100%;
    text-align: center;
  }
  #about .container.grid-2 .about-text h2 {
    font-size: clamp(1.4rem, 5vw, 1.8rem);
  }
  #about .container.grid-2 .about-text .btn {
    justify-self: center;
  }
  #about .container.grid-2 .about-img { 
    grid-area: image;
    max-width: 100%;
  }
}
[data-theme='dark'] .about-img img { filter: saturate(1.05) contrast(1.04); }
.section-head { display:grid; gap: var(--space-xs); margin-bottom: var(--space-xl); }
.section-head h2 { margin:0; }
.filter-btn.active, .filter-btn:hover { background: var(--accent); color:#111; border-color: var(--accent); }
.portfolio-grid { columns: 1; column-gap:1.2rem; margin-bottom: 0; }
@media (min-width:640px){ .portfolio-grid { columns:2; } }
@media (min-width:980px){ .portfolio-grid { columns:3; } }
.pf-item { 
  break-inside: avoid; 
  margin: 0 0 var(--space-sm); 
  position: relative; 
  border-radius: var(--radius-m); 
  overflow: hidden; 
  background: var(--panel); 
  border: 1px solid var(--border); 
  box-shadow: var(--shadow-sm); 
  cursor: default;
  /* CLS-Vermeidung: Platz reservieren */
  contain: layout style;
}

.pf-item img { 
  width: 100%; 
  height: auto; 
  display: block; 
  transition: .6s ease;
  /* Aspect-Ratio für CLS-Vermeidung */
  aspect-ratio: auto;
}

.pf-item:hover img { 
  transform: none; 
}

.pf-item figcaption { 
  font-size: clamp(.6rem, 2vw, .7rem); 
  letter-spacing: .6px; 
  text-transform: uppercase; 
  padding: .6rem .8rem .7rem; 
  color: #fff; 
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.75)); 
  position: absolute; 
  left: 0; 
  bottom: 0; 
  width: 100%; 
}

.pf-item:focus-visible { 
  outline: 3px solid var(--accent); 
  outline-offset: 3px; 
}

/* Lightbox */
.lightbox {
  position:fixed;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: var(--space-sm);
  background: rgba(0,0,0,.65);
  opacity:0;
  visibility:hidden;
  transition: var(--transition);
  padding: clamp(1rem, 5vw, 2.6rem);
  z-index:200;
  text-align:center;
}
[data-theme='dark'] .lightbox { background: rgba(10,10,12,.8); }
.lightbox.open { opacity:1; visibility:visible; }
.lightbox-img {
  max-width: min(100%,1100px);
  max-height: 82vh;
  width: auto;
  height: auto;
  border-radius: var(--radius-m);
  box-shadow: 0 10px 48px -8px rgba(0,0,0,.75);
}
.lightbox-caption {
  margin-top: var(--space-xs);
  text-align:center;
  font-size:.8rem;
  letter-spacing:.7px;
  color: var(--text-dim);
  width: min(640px, 100%);
  margin-inline:auto;
}
.lightbox-close { 
  position: absolute; 
  top: 1rem; 
  right: 1rem; 
  background: var(--bg-alt); 
  border: 1px solid var(--border); 
  color: var(--text); 
  width: 48px; /* Touch-Target */
  height: 48px; 
  font-size: 1.5rem; 
  line-height: 1; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  border-radius: 50%; 
  cursor: pointer; 
  transition: var(--transition); 
}

.lightbox-close:hover { 
  background: var(--accent); 
  color: #111; 
  border-color: var(--accent); 
}

@media (max-width: 640px) {
  .lightbox { 
    padding: clamp(.75rem, 6vw, 1.6rem); 
  }
  .lightbox-img { 
    max-height: 70vh; 
    width: 100%; 
    object-fit: contain;
  }
  .lightbox-close { 
    top: clamp(.6rem, 4vw, 1rem); 
    right: clamp(.6rem, 4vw, 1rem); 
    width: 44px;
    height: 44px;
  }
}

/* Contact – Mobile-First Touch-Optimiert */
.contact-form { 
  display: grid; 
  gap: var(--space-md); 
  margin-top: var(--space-md); 
}

.form-row { 
  display: flex; 
  flex-direction: column; 
  gap: var(--space-xs); 
}

label { 
  font-size: clamp(.78rem, .75rem + .2vw, .85rem); 
  letter-spacing: .1em; 
  text-transform: uppercase; 
  color: var(--text-dim); 
  font-family: 'Space Mono', monospace; 
}

input:not([type="checkbox"]), textarea { 
  background: var(--bg-alt); 
  border: 1px solid var(--border); 
  border-radius: var(--radius-s); 
  padding: 1rem; /* Größeres Padding für Touch */
  font: 400 1rem/1.5 'Mulish', sans-serif; /* Größere Schrift für Lesbarkeit */
  color: var(--text); 
  resize: vertical; 
  transition: var(--transition); 
  min-height: 48px; /* Touch-Target */
  -webkit-appearance: none; /* iOS-Styling entfernen */
  appearance: none;
}

input:focus, textarea:focus { 
  outline: none; 
  border-color: var(--accent); 
  box-shadow: 0 0 0 3px rgba(168,180,160,.3); 
}

select { 
  background: var(--bg-alt); 
  border: 1px solid var(--border); 
  border-radius: var(--radius-s); 
  padding: 1rem; 
  font: 400 1rem/1.5 'Mulish', sans-serif; 
  color: var(--text); 
  transition: var(--transition); 
  min-height: 48px;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234D4A44' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

select:focus { 
  outline: none; 
  border-color: var(--accent); 
  box-shadow: 0 0 0 3px rgba(168,180,160,.3); 
}

textarea {
  min-height: 120px;
}

[data-theme='dark'] input, [data-theme='dark'] textarea { 
  background: #1d1d1d; 
  border-color: #2a2a2a; 
}

[data-theme='dark'] select { 
  background: #1d1d1d; 
  border-color: #2a2a2a;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23C5C5C5' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
}

/* Checkbox Touch-optimiert */
.form-row.inline {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-sm);
}

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  cursor: pointer;
  font-size: clamp(.85rem, .9vw, .95rem);
  line-height: 1.5;
}

.checkbox input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  margin: 0;
  cursor: pointer;
  flex-shrink: 0;
  border: 2px solid var(--border);
  border-radius: 4px;
  background: var(--bg-alt);
  position: relative;
  transition: var(--transition);
}

.checkbox input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}

.checkbox input[type="checkbox"]:checked::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 7px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

.checkbox input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

[data-theme='dark'] .checkbox input[type="checkbox"] {
  background: #1d1d1d;
  border-color: #444;
}

[data-theme='dark'] .checkbox input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}

/* Footer – Mobile-First */
.site-footer { 
  margin-top: auto; 
  padding: clamp(48px, 8vw, 96px) 0; 
  background: var(--bg-alt); 
  border-top: 1px solid var(--border); 
  font-size: .85rem; 
}

@media (min-width: 768px) {
  .site-footer {
    padding: 96px 0;
  }
}

[data-theme='dark'] .site-footer { 
  background: #161616; 
  border-top: 1px solid #222; 
}

.foot-links { 
  list-style: none; 
  padding: 0; 
  margin: 0; 
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm); 
}

.foot-links a { 
  color: var(--text-dim); 
  font-size: .8rem; 
  letter-spacing: .5px;
  padding: .5rem 0; /* Touch-freundlich */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.foot-links a:hover { 
  color: var(--accent); 
}

.foot-copy { 
  color: var(--text-dim); 
  font-size: .75rem; 
  letter-spacing: .4px;
  line-height: 1.6;
  margin-top: var(--space-xs);
}

.foot-col {
  width: 100%;
}

@media (min-width: 640px) {
  .foot-col {
    width: auto;
  }
}

/* Imprint */
.imprint p { font-size:.72rem; color: var(--text-dim); }
.privacy p { font-size:.72rem; color: var(--text-dim); }

.privacy-sections {
  display: grid;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}

.privacy-section {
  display: grid;
  gap: var(--space-xs);
  background: var(--bg-alt);
  padding: clamp(1.4rem, 2.8vw, 2rem);
  border-radius: var(--radius-m);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.privacy-section h2 {
  margin: 0;
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
}

.privacy-section h3 {
  margin: var(--space-sm) 0 var(--space-2xs);
  font-size: clamp(.92rem, 1.9vw, 1.05rem);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text);
}

.privacy-section ul {
  margin: var(--space-xs) 0 0;
  padding-left: 1.2rem;
  display: grid;
  gap: var(--space-2xs);
}

.privacy-section li {
  color: var(--text-dim);
}

@media (min-width: 820px) {
  .privacy-sections {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Legal Line (Impressum + Datenschutz in einer Linie) */
.legal-line { display:flex; gap: var(--space-xl); align-items:stretch; justify-content:space-between; }
.legal-block { flex:1 1 0; max-width: 660px; }
.legal-block h2 { font-size:1.1rem; margin-top:0; }
.legal-block p { font-size:.7rem; line-height:1.5; letter-spacing:.4px; }
.legal-divider { width:2px; background:#000; border-radius:1px; box-shadow:0 0 0 1px rgba(0,0,0,.08); }
@media (max-width:880px){
  .legal-line { flex-direction:column; }
  .legal-divider { width:100%; height:2px; }
}

/* Inline layout for Imprint + Privacy on larger screens */
@media (min-width: 860px) {
  #imprint.section + #privacy.section { margin-top:0; }
  #imprint.section, #privacy.section { padding-top: clamp(2rem,4vw,3rem); padding-bottom: clamp(2rem,4vw,3rem); }
  #imprint.section .container.narrow, #privacy.section .container.narrow { max-width: 100%; }
  .legal-inline-wrapper { display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items:start; }
  .legal-inline-wrapper > section { padding:0; }
}

/* Responsive Nav */
@media (max-width: 860px) {
  .nav-toggle { display:flex; }
}

@media (min-width: 861px) {
  body.nav-open { overflow:auto; }
  .nav-links {
    position: static;
    width: auto;
    height: auto;
    max-height: none;
    padding: 0;
    flex-direction: row;
    align-items:center;
    justify-content:flex-end;
    gap: 2.2rem;
    background: none;
    border:0;
    box-shadow:none;
    transform: none;
    overflow: visible;
    opacity: 1;
    visibility: visible;
    pointer-events:auto;
  }
  .nav-links.open { transform:none; }
  .nav-links li { padding:0; border:0; }
  .nav-links a {
    font-size:.9rem;
    text-transform:none;
    letter-spacing:.5px;
    justify-content:flex-start;
    padding:.6rem 0;
  }
  .nav-toggle { display:none; }
}

@media (max-width: 540px) {
  .nav-toggle { padding: .45rem .6rem; min-width: 44px; min-height: 44px; }
  .nav-links {
    width: min(280px, calc(100vw - clamp(1.6rem, 8vw, 2.2rem)));
    padding: clamp(1.2rem, 6vw, 1.7rem);
    gap: clamp(.7rem, 5vw, .95rem);
    max-height: calc(100vh - (var(--header-height) + clamp(2rem, 18vh, 4.4rem)));
  }
}

@media (min-width: 960px) {
  .intro-layout {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .85fr);
    grid-template-areas:
      "note note"
      "main visual";
  }
}

@media (max-width: 540px) {
  .container { padding: 0 clamp(1rem, 4vw, 1.4rem); }
  .intro-stats { gap: var(--space-sm); }
  .intro-main .lead { font-size: clamp(.95rem, .9rem + .5vw, 1.05rem); }
}

/* Animations Basics */
[data-animate] { opacity:0; transform: translateY(24px); transition: .9s cubic-bezier(.4,.2,.1,1); }
[data-animate].in { opacity:1; transform: translateY(0); }

/* Misc */
.placeholder-img { display:grid; place-items:center; font-size:.7rem; color: var(--text-dim); }
.privacy-raw pre { white-space: pre-wrap; word-wrap: break-word; font: inherit; color: inherit; background: transparent; border: 0; padding: 0; margin: 1rem 0; }
[hidden] { display: none !important; }

/* Accessibility tweaks */
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }

/* FAQ Section */
.faq { margin-bottom: 0; }
.faq-list { display: grid; gap: var(--space-md); margin-top: var(--space-lg); }
.faq-item {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  overflow: hidden;
  transition: var(--transition);
}
.faq-item[open] {
  box-shadow: var(--shadow);
}
.faq-item summary {
  padding: var(--space-md) var(--space-md);
  font: 600 clamp(.9rem, 1vw, 1.05rem)/1.4 'Mulish', sans-serif;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  transition: var(--transition);
  min-height: 56px; /* Touch-Target */
  -webkit-tap-highlight-color: transparent;
}

@media (min-width: 640px) {
  .faq-item summary {
    padding: var(--space-md) var(--space-lg);
  }
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: 'Space Mono', monospace;
  font-size: 1.2rem;
  color: var(--accent);
  transition: transform var(--transition);
}
.faq-item[open] summary::after {
  transform: rotate(45deg);
}
.faq-item summary:hover {
  background: var(--surface);
}
.faq-answer {
  padding: 0 var(--space-md) var(--space-md);
}

@media (min-width: 640px) {
  .faq-answer {
    padding: 0 var(--space-lg) var(--space-md);
  }
}
.faq-answer p {
  color: var(--text-dim);
  margin: 0;
  font-size: clamp(.9rem, .95vw, 1rem);
  line-height: 1.6;
}
[data-theme='dark'] .faq-item {
  background: var(--surface);
  border-color: rgba(168,180,160,.15);
}
[data-theme='dark'] .faq-item[open] {
  box-shadow: 0 8px 24px -8px rgba(0,0,0,.5);
}

/* Service-Bereich (Lokale SEO) */
.service-area {
  background: var(--bg-alt);
}
.service-area h2 {
  text-align: center;
  margin-bottom: var(--space-sm);
}
.service-intro {
  text-align: center;
  color: var(--text-dim);
  margin-bottom: var(--space-lg);
  font-size: clamp(.95rem, 1vw, 1.05rem);
}
.service-locations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}
.location-item {
  text-align: center;
  padding: var(--space-md);
  background: var(--surface);
  border-radius: var(--radius-m);
  border: 1px solid var(--border);
}
.location-item strong {
  display: block;
  font-size: 1rem;
  margin-bottom: .3rem;
  color: var(--text);
}
.location-item span {
  font-size: .85rem;
  color: var(--text-dim);
}
.trust-badges {
  display: flex;
  justify-content: center;
  gap: var(--space-xl);
  flex-wrap: wrap;
}
.trust-item {
  text-align: center;
}
.trust-number {
  display: block;
  font: 700 clamp(1.8rem, 3vw, 2.4rem)/1 'Space Mono', monospace;
  color: var(--accent);
}
.trust-label {
  font-size: .75rem;
  color: var(--text-dim);
  letter-spacing: .5px;
  text-transform: uppercase;
}
[data-theme='dark'] .service-area {
  background: var(--surface);
}
[data-theme='dark'] .location-item {
  background: var(--bg);
  border-color: rgba(168,180,160,.15);
}

/* Skip Link */
.skip-link { position:absolute; left:0; top:-60px; background: var(--accent); color:#111; padding:.8rem 1.1rem; border-radius:0 0 6px 0; font-size:.75rem; font-weight:600; letter-spacing:.6px; z-index:1000; transition: var(--transition); }
.skip-link:focus { top:0; }

/* Größerer Header-Container */
.site-header .container.flex.between.center-v {
  padding-top: clamp(.9rem, 1.6vw, 1.6rem);
  padding-bottom: clamp(.9rem, 1.6vw, 1.6rem);
  min-height: clamp(70px, 9vh, 100px);
}

/* Logo leicht größer für Proportion */
.site-header .logo {
  font-size: clamp(1.15rem, 1.4vw, 1.35rem);
}

/* Navigation vertikal etwas mittiger halten */
.site-header .nav-links a {
  padding: 0.9rem 0;
}

/* Mobile: nicht zu hoch werden lassen */
@media (max-width: 760px) {
  .site-header .container.flex.between.center-v {
    padding-top: .75rem;
    padding-bottom: .75rem;
    min-height: 64px;
    justify-content: space-between; /* Bessere Ausrichtung */
    position: relative;
  }
  .site-header .logo {
    position: relative;
    left: auto;
    font-size: clamp(.75rem, 3.5vw, .95rem);
    max-width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .site-header .lang-switch {
    position: absolute;
    right: clamp(1rem, 4vw, 1.4rem);
  }
  .site-header .nav-links a {
    padding: .85rem 0; /* Größere Touch-Targets */
    min-height: 48px;
    display: flex;
    align-items: center;
  }
  .site-header .main-nav {
    margin-left: auto;
  }
}

/* WhatsApp Floating Button */
.wa-float { position:fixed; right: clamp(1rem,2vw,1.4rem); bottom: clamp(1rem,2vw,1.4rem); width:62px; height:62px; background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center; border-radius:50%; box-shadow:0 6px 20px -4px rgba(0,0,0,.25); z-index:300; transition: var(--transition); border:1px solid rgba(0,0,0,.12); }
.wa-float:hover { background:#128C7E; transform: translateY(-4px); box-shadow:0 10px 26px -6px rgba(0,0,0,.3); }
.wa-float:active { transform: translateY(-1px); }
.wa-float .wa-icn { width:32px; height:32px; }
@media (max-width:640px){ .wa-float { width:54px; height:54px; } .wa-float .wa-icn { width:28px; height:28px; } }
@media (prefers-reduced-motion: reduce){ .wa-float { transition:none; } }

/* Instagram Floating Button */

/* Testimonials */
.testimonials { --dot-size:12px; margin-bottom: 0; }
.testimonial-slider { position:relative; max-width: 900px; margin: var(--space-lg) auto 0; }
.testimonial-slider .t-item { opacity:0; visibility:hidden; transform: translateY(18px); transition: opacity .8s var(--transition), transform .85s var(--transition); margin:0; }
.testimonial-slider .t-item.active { opacity:1; visibility:visible; transform: translateY(0); }
.testimonial-slider blockquote { font: 400 clamp(1rem,1.2rem + .4vw,1.3rem)/1.4 'Mulish',sans-serif; margin:0 0 1rem; position:relative; color: var(--text); }
.testimonial-slider blockquote:before { content:'“'; font:700 3.4rem/0.7 'Space Mono', monospace; position:absolute; left:-.2rem; top:.4rem; opacity:.25; color: var(--accent); }
.testimonial-slider figcaption { font-size:.65rem; letter-spacing:.15em; text-transform:uppercase; color: var(--text-dim); font-family:'Space Mono', monospace; }
/* Override legacy testimonial fade styles to ensure visibility in horizontal slider */
.testimonial-slider .t-item { opacity:1 !important; visibility:visible !important; transform:none !important; }
/* Remove space from old dot styles (not used anymore) */
.testimonial-dots { display:none !important; }
.testimonial-dots { display:flex; gap:.5rem; justify-content:center; margin-top:1.4rem; }
.testimonial-dots button { width: var(--dot-size); height: var(--dot-size); border-radius:50%; border:2px solid var(--accent); background: var(--bg-alt); cursor:pointer; padding:0; transition: var(--transition); position:relative; }
.testimonial-dots button[aria-selected='true'], .testimonial-dots button:hover { background: var(--accent); color:#111; box-shadow:0 0 0 4px rgba(168,180,160,.3); }
.testimonial-dots button:focus-visible { outline:2px solid var(--accent-alt); outline-offset:2px; }
@media (prefers-reduced-motion: reduce) { .testimonial-slider .t-item { transition:none; } }
/* Testimonials (horizontal auto) */
.testimonials { --t-height:auto; margin-bottom: 0; }
.testimonial-slider { position:relative; overflow:hidden; max-width:900px; margin: var(--space-lg) auto 0; }
.testimonial-slider .t-track { display:flex; align-items:stretch; gap:0; will-change: transform; }
.testimonial-slider .t-item { flex: 0 0 100%; max-width:100%; margin:0; display:flex; flex-direction:column; justify-content:center; background: var(--panel); border:1px solid var(--border); border-radius: var(--radius-l); padding: var(--space-lg) clamp(1.2rem,2vw,2.4rem); box-shadow: var(--shadow-sm); }
.testimonial-slider blockquote { font: 400 clamp(1.05rem,1.15rem + .35vw,1.4rem)/1.45 'Mulish',sans-serif; margin:0 0 1.1rem; position:relative; color: var(--text); white-space:normal; overflow:visible; text-overflow:unset; }
.testimonial-slider blockquote:before { content:'“'; font:700 3.2rem/0.7 'Space Mono', monospace; position:absolute; left:-.35rem; top:.3rem; opacity:.18; color: var(--accent); }
.testimonial-slider figcaption { font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color: var(--text-dim); font-family:'Space Mono', monospace; }
@media (max-width:560px){ .testimonial-slider .t-item { padding:1.6rem 1.3rem; } .testimonial-slider blockquote:before { font-size:2.8rem; left:-.25rem; } }
@media (prefers-reduced-motion: reduce) { .testimonial-slider .t-item { transition:none; } }

.visually-hidden { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.site-header { position: sticky; top:0; background: rgba(236, 236, 236, 0.92); border-bottom:1px solid var(--border); z-index:50; backdrop-filter: blur(6px); }
.site-header:before { content:""; position:absolute; inset:0; pointer-events:none; z-index:0; background:
  radial-gradient(circle at 18% 30%, rgba(212, 221, 208, 0.28), transparent 65%),
  radial-gradient(circle at 82% 70%, rgba(168,180,160,.18), transparent 70%);
}

/* =====================================================
   Mobile-First Finale Optimierungen
   ===================================================== */

/* Safe Area für iPhone X+ (Notch) */
@supports (padding: env(safe-area-inset-bottom)) {
  .site-footer {
    padding-bottom: calc(clamp(48px, 8vw, 96px) + env(safe-area-inset-bottom));
  }
  .wa-float {
    bottom: calc(clamp(1rem, 2vw, 1.4rem) + env(safe-area-inset-bottom));
  }
}

/* Sehr kleine Geräte (< 360px) */
@media (max-width: 359px) {
  :root {
    font-size: 14px;
  }
  
  .container {
    padding: 0 .75rem;
  }
  
  .section {
    padding-top: 36px;
    padding-bottom: 36px;
  }
  
  .intro-main .intro-title {
    font-size: 1.4rem;
  }
  
  .btn {
    padding: .75rem 1rem;
    font-size: .8rem;
  }
  
  .note-tag {
    padding: .18rem .4rem;
    font-size: .5rem;
  }
  
  .stat-value {
    font-size: 1.2rem;
  }
  
  .stat-label {
    font-size: .6rem;
  }
}

/* Performance: GPU-Beschleunigung für animierte Elemente */
.nav-links,
.lightbox,
.testimonial-slider .t-track,
[data-animate] {
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Scroll-Performance: Passives Touch für scrollbare Bereiche */
.nav-links,
.testimonial-slider {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Verhindere Text-Selektion auf interaktiven Elementen */
.btn,
.nav-toggle,
.faq-item summary,
.lightbox-close,
.wa-float {
  -webkit-user-select: none;
  user-select: none;
}

/* Verhindere ungewolltes Zoomen bei Input-Fokus auf iOS */
@media screen and (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="date"],
  input[type="time"],
  textarea,
  select {
    font-size: 16px; /* iOS zoomt bei < 16px */
  }
}

/* Optimierte Tap-Highlights */
a,
button,
.btn,
.nav-toggle,
.faq-item summary,
.pf-item {
  -webkit-tap-highlight-color: rgba(168, 180, 160, 0.2);
}

/* Print Styles - Basis für Mobile Print */
@media print {
  .site-header,
  .nav-toggle,
  .wa-float,
  .lightbox {
    display: none !important;
  }
  
  .section {
    padding: 24px 0;
    break-inside: avoid;
  }
  
  .pf-item {
    break-inside: avoid;
  }
}

/* Landscape Mode Optimierungen für Mobile */
@media (max-height: 500px) and (orientation: landscape) {
  .section {
    padding-top: 32px;
    padding-bottom: 32px;
  }
  
  .intro-visual .visual-stack {
    min-height: 200px;
    aspect-ratio: 4 / 3;
  }
  
  .lightbox-img {
    max-height: 60vh;
  }
}

/* Dark Mode Anpassungen für OLED-Displays */
@media (prefers-color-scheme: dark) {
  [data-theme='dark'] {
    --bg: #000000;
    --bg-alt: #0a0a0a;
  }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  :root {
    --border: #333333;
    --text-dim: #333333;
  }
  
  .btn {
    border-width: 2px;
  }
  
  a:focus-visible,
  button:focus-visible {
    outline-width: 3px;
  }
}