/* base.css — shared design tokens and components across all pages */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
.container { max-width: clamp(900px, 85vw, 1680px); margin: 0 auto; padding: 0 24px; }

:root {
      --dark:      #100E0E;
      --dark2:     #1c1c1c;
      --primary:   #359983;
      --primary-d: #2D8070;
      --primary-l: #41A892;
      --tint:      #EEF6E9;
      --deep:      #085C49;
      --accent:    #C5E0B4;
      --accent-d:  #A8C89A;
      --neutral:   #D8D8D8;
      --gray-50:   #f8fafc;
      --gray-100:  #f1f5f9;
      --gray-200:  #e2e8f0;
      --gray-400:  #94a3b8;
      --gray-600:  #475569;
      --gray-800:  #1e293b;
      --white:     #ffffff;
      --radius:    12px;
      --radius-lg: 20px;
      --shadow:    0 4px 24px rgba(16,14,14,.10);
      --shadow-lg: 0 12px 48px rgba(16,14,14,.18);
      --transition: 0.28s cubic-bezier(.4,0,.2,1);
      --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 32px; --sp-5: 40px;
      --sp-6: 48px; --sp-7: 64px; --sp-8: 80px; --sp-9: 100px;
      --spacing-0_5: 2px; --spacing-1: 4px; --spacing-1_5: 6px; --spacing-2: 8px;
      --spacing-3: 12px; --spacing-4: 16px; --spacing-5: 20px; --spacing-6: 24px; --spacing-8: 32px;
    }

/* Buttons */
.btn-orange { background: var(--primary); color: var(--white); box-shadow: 0 4px 16px rgba(53,153,131,.35); }
.btn-orange:hover { background: var(--primary-d); transform: translateY(-2px); }
.cg-btn { background: var(--primary); }
.cg-btn--lg  { padding: var(--spacing-4) var(--spacing-6); font-size: 1.1rem; }
.cg-btn--md  { padding: var(--spacing-3) var(--spacing-4); font-size: .95rem; }
.cg-btn--sm  { padding: var(--spacing-1_5) var(--spacing-4); font-size: .85rem; }
.cg-btn--xl  { padding: var(--spacing-5) var(--spacing-8); font-size: 1.5rem; }
.cg-btn--xs  { padding: var(--spacing-2) var(--spacing-2); font-size: .8rem; }
.cg-btn--xxs { padding: var(--spacing-0_5) var(--spacing-1); font-size: .72rem; }
.cg-btn-outline { background: transparent; border: 2px solid var(--gray-200); color: var(--gray-800); box-shadow: none; }
.cg-btn-outline:hover { border-color: var(--primary); color: var(--primary); background: var(--tint); }
.cg-btn:hover { background: var(--primary-l); transform: translateY(-2px); }

/* Cap the biggest button size at --lg on laptop screens and smaller; --xl only on wider desktops */
@media (max-width: 1440px) {
  .cg-btn--xl { padding: var(--spacing-4) var(--spacing-6); font-size: 1.1rem; }
}

/* Nav */
#mobile-menu a.active { color: var(--primary); }
#mobile-menu a:hover { color: var(--primary); }
#mobile-menu.open { display: flex; }
#navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 14px 0; background: var(--white); border-bottom: 1px solid var(--gray-200); transition: background var(--transition), padding var(--transition), box-shadow var(--transition); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.nav-links a { color: var(--gray-600); font-size: .9rem; font-weight: 500; transition: color var(--transition); }
.nav-links a.active, .nav-dropdown.active > a { color: var(--primary); }
.nav-links a:hover { color: var(--primary); }
.nav-links { display: flex; align-items: center; gap: 32px; list-style: none; }
.nav-right { display: flex; align-items: center; gap: 32px; }
.nav-cta { display: flex; align-items: center; gap: 12px; }
.nav-right > .nav-lang { color: var(--gray-600); font-size: .82rem; font-weight: 700; letter-spacing: .04em; padding: 6px 10px; border: 1px solid var(--gray-200); border-radius: 6px; transition: color var(--transition), border-color var(--transition); }
.nav-right > .nav-lang:hover { color: var(--primary); border-color: var(--primary); }
#navbar.scrolled { padding: 10px 0; box-shadow: 0 2px 12px rgba(0,0,0,.08); }
#reading-progress { position: absolute; top: 100%; left: 0; height: 6px; z-index: 1001; background: linear-gradient(90deg, var(--primary), var(--accent)); width: 0%; transition: width .1s linear; }
#progress-robot { position: absolute; top: calc(100% - 11px); z-index: 1002; width: 32px; height: 28px; object-fit: contain; transition: left .1s linear; pointer-events: auto; cursor: grab; user-select: none; -webkit-user-select: none; filter: drop-shadow(0 2px 4px rgba(0,0,0,.2)); }

/* Nav-Dropdown (Home / Unternehmen) */
.nav-dropdown { position: relative; }
.nav-dropdown > a { display: flex; align-items: center; gap: 5px; }
.nav-dropdown > a .chev { width: 11px; height: 11px; transition: transform var(--transition); flex-shrink: 0; }
.nav-dropdown:hover > a .chev, .nav-dropdown:focus-within > a .chev { transform: rotate(180deg); }
/* Unsichtbare Brücke über die Lücke zwischen Link und Menü, damit :hover beim Runterfahren mit der Maus nicht abreißt */
.nav-dropdown::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 30px; }
.dropdown-menu { position: absolute; top: calc(100% + 30px); left: 50%; transform: translateX(-50%) translateY(-6px); background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); box-shadow: var(--shadow-lg); min-width: 200px; padding: 6px; list-style: none; opacity: 0; visibility: hidden; transition: opacity var(--transition), transform var(--transition), visibility var(--transition); z-index: 200; }
.nav-dropdown:hover .dropdown-menu, .nav-dropdown:focus-within .dropdown-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.dropdown-menu li a { display: block; padding: 10px 14px; border-radius: 8px; font-size: .88rem; white-space: nowrap; }
.dropdown-menu li a:hover { background: #f0f9f7; color: var(--primary); }

/* Hamburger + mobiles Menü */
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 14px 10px; }
.hamburger span { width: 24px; height: 2px; background: var(--dark); border-radius: 2px; transition: var(--transition); }
#mobile-menu { display: none; flex-direction: column; background: var(--white); padding: 16px 24px 24px; gap: 4px; border-top: 1px solid var(--gray-200); }
#mobile-menu a { color: var(--gray-600); font-size: 1rem; font-weight: 500; padding: 12px 0; border-bottom: 1px solid var(--gray-100); transition: color var(--transition); }
.mobile-sub { padding-left: 20px; font-size: .88rem; opacity: .8; }
#mobile-menu .mobile-cta { margin-top: 12px; background: var(--primary); color: var(--white) !important; border-radius: 8px; padding: 14px 20px; text-align: center; font-weight: 700; border-bottom: none; }
#mobile-menu .mobile-cta:hover { background: var(--primary-d); }

@media (max-width: 1024px) {
  #navbar { padding: 12px 0; }
  #navbar.scrolled { padding: 8px 0; }
}
@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-right > .nav-lang { display: none; }
  .hamburger { display: flex; }
  /* Shuttle-Progressleiste ist ein Desktop-Detail, auf Mobil nur eine kleine Ablenkung
     und ihr Drag-Handler kann versehentliches Scrollen am oberen Bildschirmrand stoeren. */
  #reading-progress, #progress-robot { display: none; }
  .kontakt-intro { display: none; }

  /* Kontakt-Block: auf Mobil nimmt das Formular sonst fast den ganzen Bildschirm ein -
     Section-Padding und Abstände verkleinern (Formularfelder selbst bleiben touch-freundlich). */
  #kontakt.kontakt-section { padding: 48px 0; }
  #kontakt .kontakt-grid { gap: 28px; }
  #kontakt .kontakt-title { margin-bottom: 12px; padding-bottom: 12px; }
  #kontakt .kontakt-method { margin-bottom: 18px; }
  #kontakt .kontakt-form-title { margin-bottom: 16px; }
  #kontakt .kontakt-form { gap: 12px; }
}

/* Kontakt form (einheitlich auf allen Seiten - nicht pro Seite überschreiben,
   sonst driften Look & mobile Größe wieder auseinander) */
.kf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.km-label { font-weight: 700; color: var(--primary); font-size: 1.1rem; margin-bottom: 2px; }
.kontakt-form textarea { resize: vertical; min-height: 130px; }
.kontakt-form { display: flex; flex-direction: column; gap: 16px; }
.kontakt-method { display: flex; gap: 18px; align-items: center; margin-bottom: 28px; }
.kontakt-section { background: var(--tint); padding: 52px 0; }
.kontakt-title { color: var(--dark); margin-bottom: 16px; position: relative; padding-bottom: 16px; }
.kontakt-title::after { content:''; position:absolute; left:0; bottom:0; width:64px; height:3px; background: var(--primary); border-radius: 2px; }
.kontakt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.kontakt-sub { color: var(--gray-600); margin-bottom: 40px; font-size: 1rem; }
.km-icon { flex-shrink: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.km-icon svg { width: 40px; height: 40px; stroke: var(--primary); fill: none; }
.km-value { color: var(--gray-800); font-size: .95rem; transition: color var(--transition); }
.km-value:hover { color: var(--primary); }
.kontakt-form-title { color: var(--dark); margin-bottom: 24px; font-size: 1.35rem; }
.kontakt-form input, .kontakt-form textarea { width: 100%; padding: 14px 16px; border: 1px solid var(--gray-200); border-radius: 6px; font-family: inherit; font-size: .95rem; background: var(--white); color: var(--gray-800); transition: border-color var(--transition), box-shadow var(--transition); }
.kontakt-form input:focus, .kontakt-form textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(53,153,131,.1); }
.kf-submit { align-self: flex-start; background: var(--primary); color: var(--white); font-weight: 700; letter-spacing: .06em; padding: 14px 38px; border-radius: 4px; font-size: .9rem; transition: var(--transition); }
.kf-submit:hover { background: var(--primary-d); transform: translateY(-2px); }
.form-thanks { margin: 20px 0; padding: 18px 20px; border-radius: 8px; background: #f0f9f7; color: var(--primary-d); font-weight: 600; border: 1px solid var(--primary); }
.form-thanks--error { background: #fdf1f1; color: #b42318; border-color: #b42318; }
@media (max-width: 1024px) { .kontakt-grid { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 600px) { .kf-row { grid-template-columns: 1fr; } }

/* Footer */
.ft-address { font-size: .92rem; line-height: 1.8; color: rgba(255,255,255,.6); font-style: normal; }
.ft-legal a { color: rgba(255,255,255,.6); font-size: .85rem; transition: color var(--transition); }
.ft-legal a:hover { color: var(--white); }
.ft-legal { display: flex; gap: 24px; }
.ft-top-btn svg { width: 16px; height: 16px; stroke: var(--white); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ft-top-btn { position: absolute; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.1); border: none; cursor: pointer; transition: background .25s ease; z-index: 2; visibility: hidden; }
.ft-top-btn:hover { background: var(--primary); }
footer { position: relative; }