/* ===== Farb- & Layout-Variablen ===== */
:root{
  --orange:#F16522;
  --beige:#e6d3c1;
  --braun:#7C3A00;
  --text:#2b1f1a;
  --white:#ffffff;
  --shadow-sm:0 2px 6px rgba(0,0,0,.10);
  --shadow-md:0 8px 24px rgba(0,0,0,.12);
}

/* ===== Reset & Grundlayout ===== */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: Arial, Helvetica, sans-serif;
  color:var(--text);
  background:var(--beige);
  line-height:1.6;
}
img{ max-width:100%; height:auto; display:block; }

/* ===== Utilities ===== */
.container{ max-width:1100px; margin:auto; padding:0 1.25rem; }
.center{ text-align:center; }
.max-60{ max-width:60ch; margin-inline:auto; }

/* ===== Header / Navigation ===== */
.site-header{
  background:var(--beige);
  position:sticky; top:0; z-index:1000;
  box-shadow:var(--shadow-sm);
}
.navbar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.75rem 0;
}

/* Brand: Emblem + Wortmarke */
.brand{
  display:flex; align-items:center; gap:.65rem;
  text-decoration:none; line-height:1.05;
}
.brand__emblem{
  width:56px; height:56px;
  object-fit:cover; object-position:left center;
  border-radius:12px; box-shadow:var(--shadow-sm); background:#fff;
}
.brand__text strong{ display:block; font-size:1.05rem; color:var(--braun); letter-spacing:.2px; }
.brand__text span{
  display:block; font-size:.72rem; text-transform:uppercase;
  letter-spacing:.12em; opacity:.8; margin-top:2px; color:var(--text);
}
.brand:hover .brand__emblem{ box-shadow:0 6px 16px rgba(0,0,0,.12); transform:translateY(-1px); transition:all .15s; }

@media (min-width: 992px){
  .brand__emblem{ width:64px; height:64px; border-radius:14px; }
  .brand__text strong{ font-size:1.15rem; }
}

.accent-bar{ height:4px; background:var(--orange); }

/* ===== Navi ===== */
.mainnav ul{ list-style:none; display:flex; gap:1.1rem; margin:0; padding:0; }
.mainnav li{ position:relative; }
.mainnav a{
  text-decoration:none; color:var(--text); font-weight:700; padding:.25rem 0; position:relative; display:inline-flex; align-items:center;
}
.mainnav a:hover{ color:var(--braun); }
.mainnav a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:3px;
  background:var(--orange); border-radius:2px;
}

/* Dropdown-Basis (per Klick geöffnet) */
.has-sub > .sub{
  display:none; position:absolute; top:120%; left:0; min-width:240px;
  background:var(--white); box-shadow:var(--shadow-md); border-radius:10px; padding:.5rem;
  z-index:1200;
}
.has-sub.open > .sub{ display:block; }
.sub li{ list-style:none; }
.sub a{ display:block; padding:.55rem .8rem; white-space:nowrap; }
.sub a:hover{ background:#f7f3ef; }

/* Dropdown-Pfeil */
.has-sub > a .arrow{
  display:inline-block; margin-left:6px; width:8px; height:8px;
  border-right:2px solid var(--braun); border-bottom:2px solid var(--braun);
  transform:rotate(45deg); transition:transform .2s ease; position:relative; top:-1px;
}
.has-sub > a[aria-expanded="true"] .arrow{ transform:rotate(-135deg); }

/* Tastaturfreundlich: öffnen, wenn Fokus im Element */
.has-sub:focus-within > .sub{ display:block; }

/* Burger */
.nav-toggle{ display:none; background:none; border:0; font-size:1.6rem; cursor:pointer; }

/* ===== Mobile Navigation ===== */
@media (max-width: 880px){
  .nav-toggle{ display:block; }
  .mainnav ul{
    display:none; flex-direction:column; gap:.5rem;
    position:absolute; right:1rem; top:72px;
    background:var(--white); border-radius:12px; box-shadow:var(--shadow-md);
    padding:1rem; min-width:260px; z-index:1200;
  }
  .mainnav ul.open{ display:flex; }

  /* Untermenüs im mobilen Menü gestapelt */
  .has-sub > .sub{
    position:static; min-width:unset; box-shadow:none; padding:.25rem 0; margin:.25rem 0 .25rem .5rem;
    border-left:3px solid #f0e7df; border-radius:0;
  }
}

/* ===== Hero ===== */
.hero{
  background:
    linear-gradient(0deg, rgba(230,211,193,.92), rgba(230,211,193,.92)),
    url('pic/Hintergrund_Hand.jpg') center/cover no-repeat;
  padding:5.5rem 0 4rem; text-align:center;
}
.hero h1{ font-size:2.25rem; margin:0 0 .5rem; color:var(--braun); letter-spacing:.2px; }
.hero .lead{ font-size:1.15rem; }

/* ===== Sektionen ===== */
.section{ padding:3.25rem 0; }
.section-contrast{ background:#f8f5f2; }
.section-cta{ background:linear-gradient(180deg, #f8f5f2, var(--beige)); }

/* ===== Cards / Grid ===== */
.grid{ display:grid; gap:1.5rem; }
.grid-3{ grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); }

.card{
  background:var(--white); border-radius:14px; padding:1.25rem 1.25rem 1rem;
  box-shadow:var(--shadow-sm); transition:transform .15s ease, box-shadow .15s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.card h3{ margin:.25rem 0 .5rem; color:var(--braun); }

/* ===== Buttons ===== */
.btn{
  display:inline-block; text-decoration:none; font-weight:700; cursor:pointer;
  padding:.7rem 1.1rem; border-radius:10px; border:2px solid transparent;
  transition:filter .15s ease, transform .05s ease, color .15s ease, background .15s ease;
}
.btn:active{ transform:translateY(1px); }

.btn-primary{ background:var(--braun); color:#fff; }
.btn-primary:hover{ filter:brightness(1.06); }

.btn-ghost{ background:transparent; color:var(--braun); border-color:var(--braun); }
.btn-ghost:hover{ background:#f1e6db; }

.btn-link{
  color:var(--braun); text-decoration:none; border-bottom:2px solid var(--braun); padding:0 0 .15rem 0;
}
.btn-link:hover{ color:#A0522D; border-color:#A0522D; }

/* ===== Footer ===== */
.site-footer{ background:#2f2a27; color:#ddd; margin-top:2rem; }
.footer-grid{
  display:grid; gap:1.75rem; grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  padding:2rem 0;
}
.footnav{ list-style:none; padding:0; margin:0; }
.footnav li+li{ margin-top:.4rem; }
.footnav a{ color:#ddd; text-decoration:none; }
.footnav a:hover{ text-decoration:underline; }
.copyright{
  text-align:center; padding:.9rem; border-top:4px solid var(--orange); font-size:.9rem;
}

/* ===== Verbesserungen & neue Sektionen ===== */
.section-title + .subtitle{ text-align:center; margin-top:-.25rem; margin-bottom:1.5rem; opacity:.9; }

/* Warum FOKUS */
.benefits{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.benefit{ background:#f8f5f2; border-radius:12px; padding:1rem 1.1rem; border:1px solid #efe8e2; }
.benefit h3{ margin:.25rem 0 .35rem; font-size:1.05rem; color:var(--braun); }

/* Icon-Badges */
.icon{
  width:28px; height:28px; display:inline-block; vertical-align:middle; margin-right:.5rem;
  background:var(--orange); border-radius:8px; position:relative; overflow:hidden;
}
.icon::after{ content:""; position:absolute; inset:4px; border:2px solid #fff; border-radius:6px; }

/* Buttons: Phone/Map */
.btn-row{ display:flex; gap:.75rem; flex-wrap:wrap; justify-content:center; }
.btn-phone{ background:#14a44d; color:#fff; }
.btn-phone:hover{ filter:brightness(1.08); }
.btn-map{ background:#3b71ca; color:#fff; }
.btn-map:hover{ filter:brightness(1.08); }

/* Responsive Map */
.map-wrap{ position:relative; padding-bottom:56.25%; height:0; overflow:hidden; border-radius:12px; box-shadow:var(--shadow-sm); }
.map-wrap iframe{ position:absolute; top:0; left:0; width:100%; height:100%; border:0; }

/* Footer Logo */
.footer-logo{ height:36px; opacity:.9; }

/* Performance */
img[loading="lazy"]{ filter:saturate(.98); }

/* === Slider Section === */
.image-slider-section {
    text-align: center;
    padding: 40px 0;
    max-width: 900px;
    margin: auto;
}

.slider-title {
    font-size: 26px;
    margin-bottom: 20px;
    font-weight: bold;
}

/* === Slider Container === */
.slider-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* View window */
.slider-wrapper {
    overflow: hidden;
    width: 100%;
}

/* Image row */
.slider-images {
    display: flex;
    transition: transform 0.4s ease;
}

/* Images */
.slider-images img {
    width: 100%;
    max-width: 300px;
    margin: 0 10px;
    border-radius: 10px;
    object-fit: cover;
}

/* === Navigation Buttons === */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.4);
    color: white;
    border: none;
    padding: 12px 16px;
    font-size: 22px;
    border-radius: 50%;
    cursor: pointer;
    transition: 0.25s;
    z-index: 2;
}

.slider-btn:hover {
    background: rgba(0,0,0,0.7);
}

.prev {
    left: 0;
}

.next {
    right: 0;
}

a {
    color: #cfa183;
    text-decoration: none;
}

a:hover {
    color: #ff8a3c;
}

/* ===== Karriere / Bewerbungsseite ===== */

.jobs-intro{
  text-align:center;
  max-width:60ch;
  margin:0 auto 2rem;
}

.jobs-list{
  display:grid;
  gap:1.5rem;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
}

.job-card{
  background:var(--white);
  border-radius:14px;
  padding:1.25rem 1.25rem 1rem;
  box-shadow:var(--shadow-sm);
}

.job-card h3{
  margin-top:0;
  color:var(--braun);
}

.job-meta{
  font-size:.9rem;
  margin-bottom:.75rem;
  opacity:.85;
}

.job-card ul{
  padding-left:1.2rem;
  margin:.25rem 0 .75rem;
}

.form-card{
  background:var(--white);
  border-radius:14px;
  padding:1.5rem 1.5rem 1.25rem;
  box-shadow:var(--shadow-sm);
  max-width:700px;
  margin:0 auto;
}

.form-field{
  margin-top:1rem;
}

.form-field label{
  display:block;
  font-weight:bold;
  margin-bottom:.25rem;
}

.form-field input,
.form-field select,
.form-field textarea{
  width:100%;
  padding:.55rem .6rem;
  border-radius:8px;
  border:1px solid #ccc;
  font:inherit;
}

.form-hint{
  font-size:.8rem;
  margin-top:.6rem;
  opacity:.8;
}

/* ===== Karriere-Formular (Bewerbung) ===== */

.form-card{
  background:var(--white);
  border-radius:18px;
  padding:2rem 2.25rem 2.1rem;
  box-shadow:var(--shadow-md);
  max-width:720px;
  margin:0 auto;
}

.form-card h2{
  margin-top:0;
  margin-bottom:1.25rem;
  text-align:center;
  color:var(--braun);
}

.form-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:1.1rem 1.5rem;
}

.form-field{
  display:flex;
  flex-direction:column;
  gap:.25rem;
}

.form-field--full{ grid-column:1 / -1; }

.form-field label{
  font-weight:bold;
  font-size:.95rem;
}

.form-field input,
.form-field select,
.form-field textarea{
  width:100%;
  padding:.6rem .7rem;
  border-radius:10px;
  border:1px solid #d3c6ba;
  font:inherit;
  background:#fbf7f3;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.form-field textarea{
  min-height:140px;
  resize:vertical;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  outline:none;
  border-color:var(--orange);
  background:#fff;
  box-shadow:0 0 0 3px rgba(241,101,34,.18);
}

.form-hint{
  font-size:.8rem;
  margin-top:.4rem;
  opacity:.8;
}

.checkbox-row{
  grid-column:1 / -1;
  display:flex;
  align-items:flex-start;
  gap:.55rem;
  margin-top:.4rem;
  font-size:.9rem;
}

.checkbox-row input[type="checkbox"]{
  margin-top:.2rem;
}

.form-actions{
  grid-column:1 / -1;
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  align-items:center;
  justify-content:flex-start;
  margin-top:.5rem;
}

.form-actions .btn{
  min-width:190px;
}

/* reCAPTCHA hübscher einpassen */
.g-recaptcha{
  transform-origin:left top;
}

@media (max-width: 640px){
  .form-card{
    padding:1.4rem 1.25rem 1.6rem;
    border-radius:14px;
  }
  .form-grid{
    grid-template-columns:1fr;
  }
  .checkbox-row{
    font-size:.85rem;
  }
  .g-recaptcha{
    transform:scale(.9);
  }
}