/* Grundlegendes */
:root{
  --primary:#3498db;
  --primary-dark:#2980b9;
  --accent:#2ecc71;
  --bg:#f9f9f9;
  --text:#333;
  --card:#ffffff;
}

*{box-sizing:border-box}
html,body{height:100%}
body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    line-height: 1.6;
    color: var(--text);
    background-color: var(--bg);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

/* Layout container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Links & Buttons */
a { text-decoration: none; color: var(--primary); }
.button {
    display: inline-block;
    padding: 12px 24px;
    background-color: var(--primary);
    color: #fff;
    border-radius: 6px;
    transition: background-color 0.18s ease, transform 0.08s ease;
    border: none;
    cursor: pointer;
    text-align:center;
}
.button:hover{ background-color: var(--primary-dark); transform: translateY(-1px); }
.button.alt{ background-color: var(--accent); }
.button.small{ padding:8px 14px; font-size:0.95em; }
.button:focus{ outline:3px solid rgba(52,152,219,0.18); outline-offset:2px; }

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

/* Header */
header {
    background-color: #fff;
    padding: 18px 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    position: sticky;
    top: 0;
    z-index: 1200;
}
header .container { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.logo a{ font-weight:800; color:var(--text); font-size:2.15rem; }
header nav a{ margin-left:18px; color:#555; }
header nav a:hover{ color:var(--primary); }

/* Logo image */
#logo{ width: 2.5rem; border-radius:10px; box-shadow:0 6px 18px rgba(0,0,0,0.06); display:inline; margin-right: 0.5rem }

/* Hero */
#hero{ background:#f0f8ff; padding:56px 0; }
.hero-inner{ display:flex; gap:24px; align-items:center; }
.hero-text{ width:52%; }
.hero h1{ font-size:2.2rem; margin:0 0 12px 0; color:#243447; line-height:1.12; }
.hero p{ font-size:1.05rem; color:#555; margin:0 0 16px 0; }
.hero-ctas{ margin-bottom:10px; }
.hero-meta .micro{ font-style:italic; color:#555; margin-top:6px; }
.trustline{ margin-top:6px; color:#666; font-size:0.95rem; }

/* Hero image */
.hero-image{ width:44%; display:flex; justify-content:center; }
.hero-image img{ border-radius:10px; box-shadow:0 6px 18px rgba(0,0,0,0.06); }

/* Services row */
.service-row{ padding:40px 0; display:flex; gap:18px; overflow-x:auto; }
.service{ min-width:260px; background:var(--card); padding:18px; border-radius:10px; box-shadow:0 6px 18px rgba(0,0,0,0.04); }
.service h3{ margin-top:0; color:#243447; }
.service p{ color:#555; }

/* Sections general */
section{ padding:28px 0; }
h2{ text-align:center; color:#243447; margin:8px 0 18px; }

/* About / Team */

.team-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:18px; }
.team-member{ background:var(--card); padding:18px; border-radius:10px; text-align:center; box-shadow:0 6px 18px rgba(0,0,0,0.04); }

/* About / Success */
.about-content{ display:flex; align-items:center; gap:20px; }
.stories-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:18px; }
.stories-member{ background:var(--card); padding:18px; border-radius:10px; text-align:center; box-shadow:0 6px 18px rgba(0,0,0,0.04); }

/* Contact */
#contact{ padding:36px 0; }
#contact-form{ max-width:600px; margin:0 auto; }
.form-group{ margin-bottom:14px; }
.form-group label{ display:block; margin-bottom:6px; color:#243447; font-weight:500; }
.form-group input, .form-group textarea{
    width:100%; padding:12px; border:1px solid #e2e6ea; border-radius:8px; font-size:1rem;
    background:#fff; color:var(--text);
}
.form-group textarea{ resize:vertical; min-height:120px; }

/* Footer */
footer{ 
	background:#2c3e50; 
	color:#fff; 
	text-align:center; 
	padding:18px 0; 
	font-size:0.9rem; 
}

footer a{ 
	color:#fff; 
	text-decoration:underline; 
}

/* Feedback */
.error{ 
	color:#c0392b; 
	margin-top:10px; 
}
.success{ color:#27ae60; margin-top:10px; }

/* Modal - Clean approach (matches script.js) */
.modal{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 2000;
    pointer-events: auto;
    opacity: 0;
    transition: opacity 0.18s ease;
}

/* visible state */
.modal.is-open,
.modal[aria-hidden="false"]{
    display: flex;
    opacity: 1;
}

/* Modal content */
.modal-content{
    background: #fff;
    max-width: 780px;
    width: 100%;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.18);
    position: relative;
    z-index: 2001;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
}

/* Close button */
.close{
    position: absolute;
    right: 12px;
    top: 8px;
    color: #333;
    font-size: 28px;
    font-weight: 700;
    cursor: pointer;
    background: transparent;
    border: none;
    line-height: 1;
}
.close:hover, .close:focus{ color:#000; }

/* Small screens */
@media (max-width: 900px){
    .hero-inner{ flex-direction:column; text-align:center; }
    .hero-text{ width:100%; }
    .hero-image{ display: none; }
    .service-row{ gap:12px; padding-bottom:18px; }
    .modal-content{ padding:16px; max-width: 95%; }
	
	.slide {
	  min-width: 98%;
	  margin: 0 10px;
	  background: #fff;
	  border-radius: 8px;
	  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	  flex-shrink: 0;
	  padding: 15px;
	  box-sizing: border-box;
	  text-align: left;
	  transition: transform 0.3s;
	}
	
		
	.carousel-container {
		  width: 99%;
		  display: flex;
		  align-items: center;
		  position: relative;
		  overflow: hidden;
		  margin: 0 auto;
		  max-width: 1000px;
		}
	
}

/* Accessibility focus ring */
:focus{ outline: none; }
a:focus, button:focus, input:focus, textarea:focus{
  outline: 3px solid rgba(52,152,219,0.18);
  outline-offset: 2px;
}

/* Utility */
.hidden{ display:none !important; }

/* Profile pics */
.icon-container {
  display: inline-block;
  width: 65px; /* oder passende Größe */
  height: 65px;
  overflow: hidden;
  border-radius: 50%; /* macht das Bild rund */
  border: 2px solid #ccc; /* optional: Rahmen */
}

.round-icon {
  width: 100%;
  height: 100%;
  object-fit: cover; /* sorgt für gutes Zuschneiden */
}


/* Tools logo section */
#stack {
  padding: 3rem 1rem;
  background: ;
  text-align: center;
}

#stack h2 {
  margin-bottom: 1.5rem;
  font-size: 1.8rem;
  color: ;
}

.stack-table {
  overflow-x: auto;

  margin: 0 auto;
}

.stack-table table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.stack-table th,
.stack-table td {
  text-align: center;
  padding: 1rem;
  border-bottom: 1px solid #eee;
}

.stack-table th {
  background: grey;
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
}

.stack-table tr:last-child td {
  border-bottom: none;
}

/* Responsive Tabellen-Ansicht für Mobile */
@media (max-width: 700px) {
  .stack-table table,
  .stack-table thead,
  .stack-table tbody,
  .stack-table th,
  .stack-table td,
  .stack-table tr {
    display: block;
    width: 100%;
  }

   .hero-image{ display: none; }

  .stack-table thead {
    display: none;
  }

  .stack-table tr {
    margin-bottom: 1rem;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  }

  .stack-table td {
    text-align: left;
    padding-left: 50%;
    position: relative;
  }

  .stack-table td::before {
    content: attr(data-label);
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-weight: bold;
    color: #555;
  }
  
  .slide {
	  min-width: 98%;
	  margin: 0 10px;
	  background: #fff;
	  border-radius: 8px;
	  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	  flex-shrink: 0;
	  padding: 15px;
	  box-sizing: border-box;
	  text-align: left;
	  transition: transform 0.3s;
	}
	
	.carousel-container {
		  width: 99%;
		  display: flex;
		  align-items: center;
		  position: relative;
		  overflow: hidden;
		  margin: 0 auto;
		  max-width: 1000px;
		}
}

}

.site-footer {
  background: #0b1220; /* dark background /
  color: #e6eef8;      / light text */
  font-size: 14px;
  padding: 24px 0;
}
.site-footer .container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}
.footer-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}
.footer-contact p,
.footer-links p,
.footer-social p { margin: 4px 0; }

.footer-links a,
.site-footer a {
  color: #cfe6ff;
  text-decoration: none;
}
.footer-links a:hover,
.site-footer a:hover {
  text-decoration: underline;
}

/* Social icons */
.footer-social { text-align: right; }
.social-icons { display: inline-flex; gap: 8px; align-items: center; margin: 0; }
.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #0a66c2; /* LinkedIn brand color */
  background: #eaf3ff;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  text-decoration: none;
}
.social-link svg { width: 20px; height: 20px; }

/* Responsive */
@media (max-width: 740px) {
  .footer-row { flex-direction: column; text-align: center; }
  .footer-social { text-align: center; }
}

/* Success Stories Carousel */
.success-stories {
  padding: 40px 20px;
  background-color: #f9f9f9;
  text-align: center;
}


.carousel-container {
  width: 60%;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  max-width: 1000px;
}

.carousel {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 10px 0;
  scrollbar-width: none; /* Firefox */
}

.carousel::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.slide {
  min-width: 98%;
  max-width: 400px;
  margin: 0 10px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  flex-shrink: 0;
  padding: 15px;
  box-sizing: border-box;
  text-align: left;
  transition: transform 0.3s;
}

.slide:hover {
  transform: scale(1.05);
}

.slide img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  margin-bottom: 10px;
}

button.prev,
button.next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: #fff;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  padding: 0 10px;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  z-index: 10;
}

button.prev {
  left: 10px;
}
button.next {
  right: 10px;
}

/* Mobile: make carousel full width */
@media (max-width: 767.98px) {
	
	.hero-image{ display: none; }
	
	.success-stories { padding-left: 0; padding-right: 0; }

  /* make container full-bleed */
  .carousel-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* allow carousel to occupy full viewport width */
  .carousel {
    padding: 0;
    margin: 0;
    -webkit-overflow-scrolling: touch;
  }

  /* each slide should fill the viewport width /
  .slide {
    min-width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 0 8px 8px; / optional: remove side rounding to appear full-bleed */
    box-shadow: none;
  }

  .slide img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    border-radius: 0;
  }

  /* reposition/resize nav buttons so they don't hang off-screen */
  button.prev, button.next {
    left: 8px;
    right: 8px;
    font-size: 1.6rem;
    padding: 6px 8px;
  }
  button.prev { left: 8px; right: auto; }
  button.next { right: 8px; left: auto; }
}