@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Manrope:wght@500;600;700;800&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Manrope:wght@600;700;800&display=swap");

:root{
  /* Brand */
  --green:#3e8343;
  --blue:#0a3d54;

  /* Light UI */
  --bg:#ffffff;
  --surface:#f6f8fa;
  --card:#ffffff;
  --text:#0b1320;
  --muted:#52616b;
  --border: rgba(10,61,84,.14);

  --shadow: 0 14px 40px rgba(10,61,84,.10);
  --shadow-soft: 0 10px 24px rgba(10,61,84,.08);

  /* HARD EDGE */
  --radius: 0px;

  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-heading: "Manrope", "Inter", system-ui, sans-serif;

  --max: 1200px;

  /* Motion */
  --ease: cubic-bezier(.2,.7,.2,1);
  --t-fast: 150ms;
  --t-med: 280ms;
  --t-slow: 520ms;
}

a:hover{
  color: var(--green);
  text-decoration: underline;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

h1,h2,h3,h4,h5,h6,.brand-text,.main-nav a,.btn,.modal-title{
  font-family: var(--font-heading);
  letter-spacing: -0.03em;
}

h1, h2{font-weight:800}
h3, h4, h5, h6{font-weight:700}
p, li, input, textarea, label, small{font-family:var(--font-body)}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:hover{opacity:.92}
.container{max-width:var(--max);margin:0 auto;padding:0 20px}


h1{font-size:clamp(34px,4vw,56px);line-height:1.02;margin:0 0 14px}
h2{font-size:clamp(28px,3vw,40px);line-height:1.08;margin:0 0 12px}
h3{font-size:clamp(21px,2vw,28px);line-height:1.14;margin:0 0 10px}
p{margin:0 0 1rem}
.main-nav a{font-weight:700}
.nav-toggle{font-weight:700;letter-spacing:-0.02em}
input, textarea, select, button{font:inherit}

/* === HARD EDGE MODE (alles eckig) === */
*,
*::before,
*::after{
  border-radius: 0 !important;
}

/* Subtiles Premium-Overlay (optional, modern) */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 420px at 10% 10%, rgba(62,131,67,.09), transparent 60%),
    radial-gradient(900px 420px at 90% 15%, rgba(10,61,84,.08), transparent 58%),
    linear-gradient(180deg, rgba(0,0,0,.02), transparent 25%, rgba(0,0,0,.02));
  z-index:0;
}

/* Cursor-Glow (wird via JS bewegt) */
.cursor-glow{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1;
}
.cursor-glow::before{
  content:"";
  position:absolute;
  width: 520px;
  height: 520px;
  transform: translate(-50%, -50%);
  left: var(--x, 50%);
  top: var(--y, 50%);
  background: radial-gradient(circle,
    rgba(62,131,67,.16) 0%,
    rgba(10,61,84,.10) 28%,
    rgba(10,61,84,0) 62%
  );
  filter: blur(10px);
  opacity: .85;
  transition: opacity var(--t-med) var(--ease);
}

/* Header */
.site-header{
  position:sticky;top:0;z-index:1000;
  background: rgba(255,255,255,.88);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--border);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0; position:relative; z-index:2}
.brand{display:flex;align-items:center;gap:12px}
.brand-text{font-weight:800;letter-spacing:-0.03em}
.brand img{
  width:clamp(44px, 6vw, 72px);
  height:auto;
  object-fit:contain;
}

.main-nav .nav-toggle{display:none}
.main-nav ul{display:flex;gap:10px;align-items:center;list-style:none;margin:0;padding:0}
.main-nav a{
  padding:8px 12px;
  color:var(--text);
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.main-nav a:hover{background:rgba(10,61,84,.06)}
.main-nav a.btn{
  background:var(--green); color:white;
  box-shadow: 0 10px 22px rgba(62,131,67,.18);
}
.main-nav a.btn:hover{transform:translateY(-1px)}

@media (max-width: 900px){
  .main-nav .nav-toggle{
    display:block;
    background:rgba(10,61,84,.04);
    border:1px solid var(--border);
    color:var(--text);
    padding:8px 12px;
  }
  .main-nav ul{
    display:none;
    flex-direction:column;
    position:absolute;
    right:20px;
    top:64px;
    background:var(--card);
    padding:12px;
    box-shadow:var(--shadow);
    border:1px solid var(--border);
    min-width:220px;
    z-index:10;
  }
  .main-nav[aria-expanded="true"] ul{display:flex}
}

/* Hero */
.hero, .page-hero{
  position:relative;
  min-height:68vh;
  display:grid;
  place-items:center;
  isolation:isolate;
  overflow:hidden;
  z-index:2;
}
.page-hero.small{min-height:38vh}
.hero-bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:.50;z-index:-1;
  filter:saturate(.95) contrast(.95) brightness(.98);
}
.hero::after, .page-hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg, rgba(62,131,67,.12), rgba(10,61,84,.10)),
    radial-gradient(80% 60% at 50% 30%, rgba(62,131,67,.16), rgba(10,61,84,.08) 55%, rgba(255,255,255,.88) 100%);
  mix-blend-mode: multiply;
}
.hero-inner{text-align:center;padding:72px 0}
.hero h1, .page-hero h1{font-size:clamp(34px,4vw,56px);line-height:1.02;margin:0 0 12px;font-weight:800;color:#0f2233;text-align:center}
.hero p{max-width:860px;margin:0 auto 22px;color:#ffffff;font-size:clamp(17px,1.5vw,20px)}
.actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 20px;
  background:var(--green);color:#fff;border:0;cursor:pointer;
  box-shadow: 0 12px 26px rgba(62,131,67,.18);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.btn:hover{transform:translateY(-1px); box-shadow: 0 16px 34px rgba(62,131,67,.20)}
.btn.ghost{
  background:transparent;
  color:#ffffff;
  border:1px solid #ffffff;
  box-shadow:none;
}

.btn.ghost:hover{
  background:rgba(255,255,255,0.15);
}

/* Layouts / Cards */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:60px auto; position:relative; z-index:2}
.pillar-card{
  background:var(--card);
  border:1px solid var(--border);
  padding:16px;
  box-shadow:var(--shadow-soft);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
.pillar-card img{aspect-ratio:16/10; object-fit:cover; border:1px solid var(--border)}
.pillar-card h3{margin:.55rem 0 .2rem}
.pillar-card p{color:var(--muted);margin:.2rem 0 .6rem}

.more{color:var(--blue);font-weight:700}
.more:hover{text-decoration:underline}

@media (max-width: 1000px){.pillars{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 560px){.pillars{grid-template-columns:1fr}}

.highlight{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center;margin:60px auto; position:relative; z-index:2}
.highlight .highlight-text ul{margin:0 0 16px 18px}
.highlight .highlight-text li{margin:4px 0}
.highlight .highlight-media img{box-shadow:var(--shadow);border:1px solid var(--border)}
@media (max-width: 900px){.highlight{grid-template-columns:1fr}}

.page-hero.small .container{padding:60px 0}
.breadcrumbs{margin:20px auto;color:var(--muted); position:relative; z-index:2}

.two-col{display:grid;grid-template-columns:280px 1fr;gap:28px;margin:20px auto 80px; position:relative; z-index:2}
.sidebar{
  position:sticky;top:90px;align-self:start;
  background:var(--surface);
  padding:14px;
  border:1px solid var(--border);
}
.sidebar ul{list-style:none;margin:0;padding:0}
.sidebar a{
  display:block;
  padding:9px 10px;
  color:var(--muted);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.sidebar a:hover{background:rgba(10,61,84,.05);color:var(--text)}

.content section{margin-bottom:40px}
.content img{box-shadow:var(--shadow);border:1px solid var(--border)}

.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:20px auto 80px; position:relative; z-index:2}
.card{
  background:var(--card);
  border:1px solid var(--border);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
  display:flex;flex-direction:column;
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
.card img{aspect-ratio: 16/10; object-fit:cover; border-bottom:1px solid var(--border)}
.card-body{padding:16px}
.card-body p{color:var(--muted)}
.card .more{
  margin-top:10px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align:left;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition: transform var(--t-fast) var(--ease);
}
.card .more::after{content:"→"; font-weight:800}
.card:hover{transform: translateY(-3px); box-shadow: var(--shadow)}
.card:hover .more{transform: translateX(2px)}
@media (max-width: 1000px){.card-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 560px){.card-grid{grid-template-columns:1fr}}

.split{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;margin:20px auto 80px; position:relative; z-index:2}
.split img{box-shadow:var(--shadow);border:1px solid var(--border)}
.stats{display:flex;gap:16px;padding:0;list-style:none;flex-wrap:wrap}
.stats li{
  background:var(--surface);
  padding:10px 14px;
  display:flex;flex-direction:column;align-items:center;
  border:1px solid var(--border);
}
.stats strong{font-size:24px;color:var(--blue)}

.jobs{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:20px 0 80px; position:relative; z-index:2}
.job{
  background:var(--card);
  padding:16px;
  border:1px solid var(--border);
  box-shadow:var(--shadow-soft);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.job:hover{transform: translateY(-2px); box-shadow: var(--shadow)}
@media (max-width: 900px){.jobs{grid-template-columns:1fr}}

.contact{display:grid;grid-template-columns:1fr 380px;gap:24px;margin:20px auto 100px; position:relative; z-index:2}
.contact-form{
  background:var(--card);
  padding:16px;
  border:1px solid var(--border);
  box-shadow:var(--shadow-soft);
  display:grid;gap:12px
}
.contact-form label{display:grid;gap:6px}
.contact-form input,.contact-form textarea{
  padding:11px;
  border:1px solid rgba(10,61,84,.18);
  background:#fff;color:var(--text);
  outline:none;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.contact-form input:focus,.contact-form textarea:focus{
  border-color: rgba(62,131,67,.55);
  box-shadow: 0 0 0 4px rgba(62,131,67,.12);
}
.contact-aside{align-self:start}
.contact-aside img{box-shadow:var(--shadow);margin-top:10px;border:1px solid var(--border)}
@media (max-width: 980px){.contact{grid-template-columns:1fr}}

/* Footer */
.site-footer{margin-top:80px;padding:46px 0;background:var(--surface);border-top:1px solid var(--border); position:relative; z-index:2}
.footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.footer-grid h4{margin:.2rem 0 .4rem}
.footer-grid p,.footer-grid a{color:var(--muted)}
.social a{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border:1px solid rgba(10,61,84,.18);
  margin-right:8px;color:var(--blue);
  background:#fff;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.social a:hover{transform: translateY(-1px); background: rgba(10,61,84,.03)}
.legal{margin-top:20px;color:var(--muted)}
@media (max-width: 900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width: 560px){.footer-grid{grid-template-columns:1fr}}

/* Scroll-Reveal */
.reveal{
  opacity:0;
  transform: translateY(10px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible{
  opacity:1;
  transform:none;
}

/* Modal */
.modal{position:fixed;inset:0;display:none;z-index:2000}
.modal[aria-hidden="false"]{display:block}

.modal-backdrop{
  position:absolute;inset:0;
  background:rgba(10,61,84,.34);
  backdrop-filter: blur(6px);
  opacity:0;
  transition: opacity var(--t-med) var(--ease);
}
.modal-panel{
  position:relative;
  max-width: 980px;
  margin: min(7vh,80px) auto;
  background: var(--card);
  border:1px solid var(--border);
  box-shadow: 0 30px 90px rgba(10,61,84,.22);
  overflow:hidden;
  transform: translateY(10px);
  opacity:0;
  transition: transform var(--t-med) var(--ease), opacity var(--t-med) var(--ease);
}

.modal.is-open .modal-backdrop{opacity:1}
.modal.is-open .modal-panel{opacity:1; transform:none}

.modal-close{
  position:absolute;top:14px;right:14px;
  width:40px;height:40px;
  border:1px solid var(--border);
  background:#fff;color:var(--blue);
  cursor:pointer;font-size:22px;line-height:1;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.modal-close:hover{background:rgba(10,61,84,.04); transform: translateY(-1px)}

.modal-grid{display:grid;grid-template-columns:1.1fr .9fr}
@media (max-width: 900px){.modal-panel{margin:10vh 16px} .modal-grid{grid-template-columns:1fr}}

.modal-media{
  background: linear-gradient(180deg, rgba(10,61,84,.05), rgba(62,131,67,.04));
  padding:16px
}
.slider{
  position:relative;
  overflow:hidden;
  border:1px solid var(--border);
  background:#fff;
}
.slider-img{
  width:100%;
  height:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  opacity:1;
  transition: opacity var(--t-med) var(--ease);
}
.slider-img.is-fading{opacity:0}

.slider-btn{
  position:absolute;top:50%;transform:translateY(-50%);
  width:42px;height:42px;
  border:1px solid rgba(10,61,84,.18);
  background:rgba(255,255,255,.94);
  cursor:pointer;font-size:26px;line-height:1;color:var(--blue);
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.slider-btn:hover{transform: translateY(-50%) scale(1.03); background:#fff}
.slider-btn.prev{left:10px}
.slider-btn.next{right:10px}

.slider-dots{display:flex;gap:8px;justify-content:center;margin-top:12px;flex-wrap:wrap}
.slider-dots button{
  width:10px;height:10px;border-radius:999px !important;border:0;
  background: rgba(10,61,84,.20);
  cursor:pointer;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.slider-dots button:hover{transform: scale(1.15)}
.slider-dots button[aria-current="true"]{background: var(--green)}

.modal-content{padding:22px}
.modal-kicker{color:var(--green);font-weight:800;margin:0 0 6px}
.modal-title{margin:0 0 10px;line-height:1.08;font-weight:800}
.modal-desc{color:var(--muted);margin:0 0 16px}
.modal-actions{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 16px}
.modal-facts{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.modal-facts li{
  display:grid;grid-template-columns:120px 1fr;gap:10px;
  padding:10px 12px;
  background: var(--surface);
  border:1px solid var(--border);
}
.modal-facts strong{color:var(--blue)}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .cursor-glow{display:none}
  .reveal{opacity:1;transform:none;transition:none}
  .modal-backdrop,.modal-panel,.slider-img{transition:none}
  .btn,.card,.pillar-card,.job,.social a{transition:none}
}


/* === 2026 TYPO/ CARD REFINEMENT === */
:root{
  --bg:#f5f7f8;
  --surface:#ffffff;
  --card:#ffffff;
  --text:#14202b;
  --muted:#5c6b76;
  --border:rgba(10,61,84,.10);
  --radius:22px;
  --shadow-soft:0 12px 28px rgba(10,61,84,.07);
  --shadow:0 20px 48px rgba(10,61,84,.12);
}

body{
  background:
    linear-gradient(180deg, #f7f9fa 0%, #eef3f4 100%);
}

/* global hard-edge reset softer */
*,
*::before,
*::after{
  border-radius: unset !important;
}

img,
.btn,
.card,
.pillar-card,
.job,
.contact-form,
.sidebar,
.highlight .highlight-media img,
.content img,
.stats li,
.social a,
.main-nav a.btn,
.modal-panel,
.modal-close,
.slider,
.contact-form input,
.contact-form textarea,
.main-nav ul{
  border-radius: var(--radius) !important;
}

.pillars{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px;
  margin:72px auto;
  align-items:stretch;
}

.pillar-card{
  position:relative;
  padding:18px 18px 20px;
  border:1px solid rgba(10,61,84,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(249,251,252,.96));
  box-shadow:var(--shadow-soft);
  min-height:100%;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.pillar-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  background:linear-gradient(90deg, var(--green), var(--blue));
  opacity:.9;
}

.pillar-card img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border:0;
  background:
    linear-gradient(135deg, rgba(62,131,67,.12), rgba(10,61,84,.10)),
    #eef3f5;
  margin-bottom:18px;
}

.pillar-card h3{
  font-size:clamp(24px,1.8vw,34px);
  line-height:1.02;
  margin:0 0 12px;
  letter-spacing:-0.045em;
}

.pillar-card p{
  color:var(--muted);
  font-size:1.08rem;
  line-height:1.58;
  margin:0 0 18px;
  max-width:26ch;
}

.pillar-card .more{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--blue);
  font-weight:800;
  letter-spacing:-0.02em;
}

.pillar-card .more::after{
  content:"→";
  transition:transform var(--t-fast) var(--ease);
}

.pillar-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow);
  border-color:rgba(62,131,67,.16);
}

.pillar-card:hover .more::after{
  transform:translateX(3px);
}

@media (max-width: 1200px){
  .pillars{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width: 640px){
  .pillars{grid-template-columns:1fr; gap:18px; margin:44px auto;}
  .pillar-card{padding:16px 16px 18px;}
  .pillar-card h3{font-size:clamp(26px,7vw,34px);}
  .pillar-card p{max-width:none; font-size:1rem;}
}


/* === HERO / HEADER MOBILE FIXES === */
.page-hero .hero-inner,
.hero .hero-inner{
  width:100%;
  text-align:center;
}

.page-hero.small .hero-inner{
  padding:72px 0;
}

.page-hero h1{
  color:#0f2233;
}

.page-hero p{
  color:#ffffff;
}

@media (max-width: 768px){
  .site-header .container{
    padding-left:14px;
    padding-right:14px;
  }

  .brand{
    min-width:0;
    flex:0 1 auto;
  }

  .brand img{
    width:40px;
    height:40px;
    flex:0 0 40px;
  }

  .brand-text{
    display:block !important;
    font-size:16px;
    line-height:1.1;
    white-space:nowrap;
  }

  .menu-toggle{
    margin-right:10px;
  }

  .hero,
  .page-hero{
    min-height:56vh;
  }

  .page-hero.small{
    min-height:42vh;
  }

  .hero-inner{
    padding:56px 0;
  }

  .hero h1,
  .page-hero h1{
    font-size:clamp(30px, 9vw, 44px);
    line-height:1.04;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
  }

  .hero p,
  .page-hero p{
    font-size:clamp(16px, 4.4vw, 20px);
    line-height:1.45;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    max-width:30ch;
  }
}

@media (max-width: 480px){
  .site-header .container{
    padding-left:12px;
    padding-right:18px;
  }

  .brand img{
    width:36px;
    height:36px;
    flex-basis:36px;
  }

  .brand-text{
    font-size:15px;
  }

  .menu-toggle{
    margin-right:14px;
  }

  .hero-inner{
    padding:48px 0;
  }

  .hero h1,
  .page-hero h1{
    max-width:11ch;
  }

  .hero p,
  .page-hero p{
    max-width:28ch;
  }
}

@media (max-width: 768px){
  .two-col{
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 20px auto 56px;
  }

  .sidebar{
    position: static;
    top: auto;
    align-self: auto;
    width: 100%;
    padding: 14px;
    order: 1;
  }

  .content{
    order: 2;
    min-width: 0;
  }

  .content section{
    margin-bottom: 32px;
  }

  .content section h2,
  .content section h3{
    margin-bottom: 10px;
  }

  .content img{
    width: 100%;
    height: auto;
    margin-top: 14px;
  }
}

@media (max-width: 560px){
  .two-col{
    gap: 16px;
    margin: 16px auto 44px;
  }

  .sidebar{
    padding: 12px;
  }

  .sidebar a{
    padding: 10px 8px;
    font-size: 15px;
  }

  .content section{
    margin-bottom: 28px;
  }

  .content img{
    border-radius: 18px !important;
  }
}

@media (max-width:768px){

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

  .split img{
    margin-top:20px;
  }

}