:root{
  /* Brand */
  --accent: #A08F6A;

  /* Base theme */
  --bg-0: #0f1012;
  --bg-1: #15171b;
  --bg-2: #1c1f25;

  --text-0: #f3f3f1;
  --text-1: #d6d6d2;
  --text-2: #a9aaa6;

  --border: rgba(255,255,255,0.10);
  --border-button: rgba(255,255,255,0.40);

  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,0.35);

  --font-body: "Roboto", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  --font-accent: "Merriweather", Georgia, "Times New Roman", serif;

/* =========================================================
   Header TOKENS
   ========================================================= */
    --contact-dock-width: min(460px, calc(100vw - 20px));
    --contact-dock-bottom-gap: 10px;
    --contact-dock-radius: 22px;

    --contact-dock-space-open: 250px;      /* Reserve, damit Footer nicht verdeckt ist */
    --contact-dock-space-collapsed: 86px;  /* Reserve im Pill-Modus */



  /* =========================================================
     COMPONENT TOKENS (passend zu deinem bestehenden Look)
     ========================================================= */

  /* Header surface */
  --header-bg: rgba(15,16,18,0.82);
  --header-blur: 10px;

  /* Interactive cards (Contact + Lang pills) */
  --card-bg-1: rgba(255,255,255,0.03);
  --card-bg-2: rgba(255,255,255,0.015);
  --card-bg-hover-2: rgba(255,255,255,0.02);

  --hover-lift: -1px;
  --hover-border: rgba(160,143,106,0.55);

  /* Accent fills */
  --accent-10: rgba(160,143,106,0.10);
  --accent-18: rgba(160,143,106,0.18);
  --accent-75: rgba(160,143,106,0.75);

  /* Pills */
  --pill-radius: 999px;

  /* To-top button */
  --toTop-bg: rgba(21,23,27,0.9);
  --toTop-size: 50px;
  --toTop-lift: -110px;

  /* Footer theme */
--footer-grad-1: #e7ddcf;
--footer-grad-2: #d9ccb9;
--footer-text: #151515;
--footer-border: rgba(0,0,0,0.10);

--footer-claim: rgba(0,0,0,0.70);
--footer-link: rgba(0,0,0,0.78);
--footer-link-hover: rgba(0,0,0,0.95);
--footer-label: rgba(0,0,0,0.55);
--footer-value: rgba(0,0,0,0.88);
--footer-divider: rgba(0,0,0,0.12);

--footer-bottom-bg: rgba(255,255,255,0.35);
--footer-bottom-text: rgba(0,0,0,0.65);

  /* =========================================================
   SHINE EFFECT TOKENS
   ========================================================= */
--shine-opacity: 0.9;
--shine-speed: 1.8s;
--shine-size: 1px;                 /* Border-Dicke */
--shine-white-1: rgba(255,255,255,0.28);
--shine-white-2: rgba(255,255,255,0.18);
--shine-accent: rgba(160,143,106,0.55);
--shine-fill: linear-gradient(180deg, var(--card-bg-1), var(--card-bg-2));


    /* =========================================================
     SPACING SCALE
     ========================================================= */
  --space-0: 0;
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.25rem;  /* 20px */
  --space-6: 1.5rem;   /* 24px */
  --space-7: 2rem;     /* 32px */
  --space-8: 2.5rem;   /* 40px */
  --space-9: 3rem;     /* 48px */
  --space-10: 4rem;    /* 64px */
  --space-11: 5rem;    /* 80px */
  --space-12: 6rem;    /* 96px */

/* =========================================================
   ANIMATION TOKENS (global)
   ========================================================= */
--anim-ease: cubic-bezier(.22,.61,.36,1);

--anim-page-dur: 650ms;
--anim-page-delay: 60ms;
--anim-page-distance: 10px;

--anim-reveal-dur: 1000ms;
--anim-reveal-delay: 0ms;
--anim-reveal-distance: 26px;

--star-gold: #d6c08a;         /* elegantes warmes Gold */
--star-gold-soft: rgba(214,192,138,0.55);

/* Intro Tile (Services) */
--intro-bg-1: rgba(160,143,106,0.22);
--intro-bg-2: rgba(255,255,255,0.015);
--intro-border: rgba(160,143,106,0.35);
--intro-title: var(--text-0);
--intro-text: var(--text-1);
--intro-eyebrow: var(--text-2);

/* Bildlsider controls Home */
  --hero-control-border: rgba(255,255,255,0.30);
  --hero-control-border-hover: rgba(255,255,255,0.55);
  --hero-control-bg: rgba(0,0,0,0.28);
  --hero-control-bg-hover: rgba(0,0,0,0.40);
  --hero-control-shadow: 0 10px 26px rgba(0,0,0,0.35);


}


.flow > * + *{
  margin-top: var(--space-4);
}


/* Reset / Base */
*{ box-sizing: border-box; }
html{
  height: 100%;
  font-size: 100%;
  overflow-x: clip;
}
body{
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;

  font-family: var(--font-body);
  background: var(--bg-0);
  color: var(--text-0);
  line-height: 1.5;

  overflow-x: clip;
}

.site-main{
  flex: 1;
  padding: 48px 0;
}

img{ max-width: 100%; height: auto; display: block; }

a{ color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
button{ font: inherit; }




/* =========================================================
   LAYOUT UTILITIES
   ========================================================= */

.container{
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: 22px;
}



/* =========================================================
   SECTION UTILITIES
   ========================================================= */

.section{
  padding-block: var(--space-10); /* 64px oben/unten */
}

.section--tight{
  padding-block: var(--space-8); /* 40px */
}

.section--loose{
  padding-block: var(--space-12); /* 96px */
}

.stack{
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.stack--tight{ gap: var(--space-3); }
.stack--loose{ gap: var(--space-7); }