/*
Theme Name: Stufe 11
*/
/* ===== REMOVE TOP WHITE SPACE ===== */
html, body {
  margin: 0;
}

/* remove gap above hero */
.hero {
  margin-top: 0 !important;
}

body {
  font-family: 'Poppins', sans-serif;
}

/* ================= HEADER ================= */

.site-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}

/* IMPORTANT: keep layout inside 1400px */
.nav-container {
  max-width: 1400px;
  margin: 0 auto;

  padding: 30px 0; /* 🔥 REMOVE 260px sides */

  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* NAV WRAPPER */
.main-nav {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* MENU */
.menu {
  list-style: none;
  display: flex;
  gap: 40px;
}

.menu li a {
  color: #ffffff;
  text-decoration: none;
  font-size: 16px;
}

/* ================= SEARCH (FIXED) ================= */

.search-form {
  position: relative;
}

/* input */
.search-form input {
  height: 34px;
  width: 160px;
  border-radius: 20px;
  border: none;
  padding: 0 40px 0 15px; /* space for icon */
  outline: none;
}

/* icon INSIDE */
.search-form button {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: #333;
}

/* ================= HERO ================= */

.hero {
  height: 767px;
  background-image: url('/wp-content/uploads/2026/04/norwegen.jpg');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  position: relative;
}

/* overlay */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
}

/* content */
.hero-content {
  position: relative;
  margin-left: 260px;
  max-width: 910px;
  color: #ffffff;
}

/* headline */
.hero h1 {
  font-size: 56px;
  line-height: 1.2;
  margin-bottom: 20px;
}

.hero-bold {
  font-weight: 600;
}

.hero-light {
  font-weight: 400;
}

/* text */
.hero p {
  max-width: 600px;
  line-height: 1.6;
}
}
/* ================= REISEN FIX ================= */

/* ================= REISEN FINAL (MATCH PDF) ================= */

.reisen-section {
  background: #ffffff;
	margin-bottom: 100px;
}

/* LAYOUT */
.reisen-container {
  display: flex;
  height: 500px;
}

/* LEFT SIDE */
.reisen-text {
  width: 50%;
  padding-left: 260px;
  display: flex;
  align-items: center;
  position: relative;
}

.reisen-text-inner {
  max-width: 500px;
}

/* TYPO */
.reisen-text h2 {
  font-size: 36px;
  margin-bottom: 10px;
  color: #0f3b46;
}

.reisen-text h3 {
  font-size: 18px;
  margin-bottom: 15px;
  font-weight: 600;
}

.reisen-text p {
  margin-bottom: 20px;
  line-height: 1.6;
}

/* BUTTON */
.reisen-btn {
  display: inline-block;
  background: #0f3b46;
  color: white;
  padding: 12px 26px;
  border-radius: 25px;
  text-decoration: none;
  margin-bottom: 20px;
}

/* DOTS */
.dots {
  display: flex;
  gap: 8px;
}

.dot {
  width: 8px;
  height: 8px;
  background: #ccc;
  border-radius: 50%;
}

.dot.active {
  background: #0f3b46;
}

/* RIGHT IMAGE FULL */
.reisen-image {
  width: 50%;
  position: relative;
}

.reisen-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ================= ARROWS FINAL ================= */

.arrow {
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(4px);
  cursor: pointer;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0f3b46;
  transition: all 0.2s ease;
}

/* hover effect */
.arrow:hover {
  background: #0f3b46;
  color: white;
}

/* LEFT */
.arrow-left {
  left: 180px;
  top: 50%;
  transform: translateY(-50%);
}

/* RIGHT */
.arrow-right {
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
}

/* ================= GALLERY FINAL FIX ================= */

.gallery-container {
  display: grid;
  grid-template-columns: 1fr 1fr 452px;
  gap: 15px;
  overflow: hidden; /* hides overflow from shift */
}

/* images */
.gallery-container img {
  width: 100%;
  height: 395px;
  object-fit: cover;
}

/* OFFSET SECOND ROW */
.gallery-container img:nth-child(4),
.gallery-container img:nth-child(5),
.gallery-container img:nth-child(6) {
  transform: translateX(-120px);
}

/* 🔥 EXPAND LAST IMAGE TO FILL RIGHT SIDE */
.gallery-container img:nth-child(6) {
  width: calc(100% + 120px);
}

.gallery-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 30px;
}

.gallery-dots .dot {
  width: 10px;
  height: 10px;
  background: #cfcfcf;
  border-radius: 50%;
}

.gallery-dots .dot.active {
  background: #0f3d46; /* your dark teal */
}

/* ================= ANGEBOTE SECTION ================= */

.angebote-section {
  padding: 100px 260px;

}

/* CONTAINER */
.angebote-container {
  max-width: 1400px;
  margin: 0 auto;
}

/* TITLE */
.angebote-container h2 {
  font-size: 36px;
  color: #0f3d46;
  margin-bottom: 15px;
}

.angebote-sub {
  max-width: 520px;
  margin-bottom: 60px;
  line-height: 1.6;
  font-size: 16px;
}

/* GRID */
.angebote-grid {
  display: flex;
  gap: 30px;
}

/* CARD */
.angebot-card {
  background: #eeeeee;
  width: 100%;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* IMAGE */
.angebot-card img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

/* CONTENT */
.card-content {
  padding: 40px 30px;
  text-align: center;
}

/* TITLE */
.card-content h3 {
  color: #0f3d46;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
}

/* SUBTITLE */
.card-content h4 {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 20px;
}

/* TEXT */
.card-content p {
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 30px;
  color: #333;
}

/* BUTTON */
.angebot-btn {
  display: inline-block;
  padding: 14px 34px;
  background: #6f8f9a;
  color: #ffffff;
  border-radius: 40px;
  text-decoration: none;
  font-size: 15px;
  transition: all 0.3s ease;
}

/* HOVER */
.angebot-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.angebot-card:hover img {
  transform: scale(1.05);
}

.angebot-btn:hover {
  background: #5d7b85;
}

/* ================= KONTAKTFORMULAR ================= */

.kontakt-section {
  background: #0f3d46;
  padding: 100px 260px;
  color: white;
}

.kontakt-container {
  max-width: 1400px;
  margin: 0 auto;
}

/* TITLE */
.kontakt-container h2 {
  font-size: 36px;
  margin-bottom: 50px;
}

/* GRID */
.kontakt-form {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.form-row {
  display: flex;
  gap: 30px;
}

.form-group {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* LABEL */
.form-group label {
  font-size: 18px;
  font-weight: 300; /* 🔥 light */
  margin-bottom: 8px;
}

/* INPUT */
.form-group input,
.form-group textarea {
  background: #e5e5e5;
  border: none;
  padding: 14px;
  font-size: 16px;
  width: 100%;
}

.form-group textarea {
  height: 180px;
  resize: none;
}

/* ================= CHECKBOX ================= */

.form-check {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 18px;
  line-height: 1.6;
  margin-top: 10px;
}

/* clean checkbox */
.form-check input {
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #e5e5e5;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}

.form-check input:checked {
  background: #6f8f9a;
}

.form-check input:checked::after {
  content: "";
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ================= BUTTON ================= */

.form-btn-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.form-btn {
  padding: 14px 50px;
  font-size: 16px;
  border-radius: 30px;
  background: #6f8f9a;
  color: white;
  border: none;
  cursor: pointer;
  transition: 0.3s;

  /* 🔥 FORCE CLEAN BUTTON */
  outline: none;
  box-shadow: none;
  appearance: none;
}

.form-btn:hover {
  background: #5d7c86;
}
/* ================= FOOTER ================= */

.footer {
  background: #6f8f9a;
  padding: 60px 260px;
}

.footer-container {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  gap: 120px; /* 🔥 controls distance between left + right */
  color: white;
}

/* LEFT */
.footer-left h4 {
  margin-bottom: 15px;
}

.footer-left p {
  margin-bottom: 6px;
  font-size: 14px;
}

/* RIGHT */
.footer-right {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-right a {
  color: white;
  text-decoration: none;
  font-weight: 600;
}

.footer-right a:hover {
  text-decoration: underline;
}