/* ==========================================================================
   Lokal eingebundene Schriftarten (statt Google-Fonts-CDN)
   ========================================================================== */
@font-face {
  font-family: 'Libre Caslon Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/libre-caslon-display-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/assets/fonts/poppins-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/poppins-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/source-sans-3-variable.woff2') format('woff2');
}

/* ==========================================================================
   Design-System-Grundlagen (siehe projekt-uebergabe.md)
   ========================================================================== */
:root {
  --burgundy: #A4263C;
  --burgundy-deep: #7C1D2E;
  --ivory: #FAF8F5;
  --ink: #1E1B19;
  --ink-soft: #57514B;
  --brass: #9C7A34;
  --hairline: #E4DDD3;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Source Sans 3', sans-serif;
  background:var(--ivory);
  color:var(--ink);
  line-height:1.65;
}
.wrap{max-width:1080px; margin:0 auto; padding:0 32px;}
.serif{font-family:'Libre Caslon Display', serif;}
.tracked{letter-spacing:0.14em; text-transform:uppercase;}
a{color:inherit; text-decoration:none;}
svg{display:block;}
.vline{background:var(--hairline);}
:focus-visible{outline:2px solid var(--burgundy); outline-offset:2px;}

/* ==========================================================================
   Header (identisch auf allen Seiten)
   ========================================================================== */
header{border-bottom:1px solid var(--hairline); position:sticky; top:0; background:var(--ivory); z-index:10;}
header .wrap{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; column-gap:24px; height:92px;}
header .logo-mark, .logo-link{justify-self:center;}
header .logo-mark{display:flex; flex-direction:column; align-items:center; line-height:1.05;}
header .logo-mark .logo-sg{font-family:'Poppins', sans-serif; font-weight:500; font-size:32px; color:var(--burgundy); letter-spacing:0.01em;}
header .logo-mark .logo-sub{font-family:'Poppins', sans-serif; font-weight:300; font-size:11px; color:var(--burgundy); letter-spacing:0.09em; margin-top:2px;}
.header-nav-left{display:flex; gap:36px; justify-self:start;}
.header-nav-right{display:flex; align-items:center; gap:28px; justify-self:end;}
nav a.nav-link{font-size:13.5px; font-weight:500; color:var(--ink-soft); letter-spacing:0.1em; text-transform:uppercase; border-bottom:1px solid transparent; padding-bottom:5px; transition:color .15s, border-color .15s;}
nav a.nav-link:hover, nav a.nav-link.active{color:var(--burgundy); border-color:var(--burgundy);}
@media (max-width:760px){ .header-nav-left{display:none;} .header-nav-right .nav-link{display:none;} }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-block; font-size:12px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase;
  padding:12px 22px; border:1px solid var(--burgundy); color:var(--burgundy);
  transition:background .18s, color .18s; cursor:pointer; background:none; font-family:inherit;
}
.btn:hover, .btn:focus-visible{background:var(--burgundy); color:#fff;}
.btn.solid{background:var(--burgundy); color:#fff;}
.btn.solid:hover{background:var(--burgundy-deep);}
.btn.active{background:var(--burgundy); color:#fff;}

/* ==========================================================================
   Wiederkehrende Bausteine: Eyebrow, Trennlinie, nummerierte Schritte
   ========================================================================== */
.eyebrow{font-size:13px; color:var(--brass); font-weight:600; margin-bottom:18px;}
.rule{width:64px; height:1px; background:var(--brass); margin:0 auto 22px;}

.steps{border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline);}
.steps .wrap{display:grid; grid-template-columns:1fr 1px 1fr 1px 1fr; padding:52px 32px;}
@media (max-width:700px){ .steps .wrap{grid-template-columns:1fr; gap:32px;} .steps .vline{display:none;} }
.step{text-align:center; padding:0 20px;}
.step .num-circle{width:40px; height:40px; border:1px solid var(--burgundy); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 18px; font-size:17px; color:var(--burgundy);}
.step h4{font-size:16.5px; font-weight:600; margin-bottom:8px;}
.step p{font-size:14px; color:var(--ink-soft);}

/* ==========================================================================
   Formulare (Kontakt, Personalbedarf, Bewerbung)
   ========================================================================== */
.form-section{padding:80px 0 96px;}
.form-card{max-width:620px; margin:0 auto;}
.form-card .section-head{text-align:center; margin-bottom:40px;}
.form-card .section-head h2{font-size:24px; font-weight:400;}
.field{margin-bottom:26px;}
.field > label{display:block; font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:9px;}
.field input, .field select, .field textarea{width:100%; border:none; border-bottom:1px solid var(--hairline); background:transparent; padding:10px 2px; font-family:'Source Sans 3',sans-serif; font-size:15px; color:var(--ink); transition:border-color .15s;}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--burgundy);}
.field textarea{resize:vertical; min-height:90px;}
.checkbox-group{display:flex; flex-wrap:wrap; gap:14px 28px;}
.checkbox-group label{display:flex; align-items:center; gap:8px; font-size:14.5px; color:var(--ink); text-transform:none; letter-spacing:0;}
.checkbox-group input[type=checkbox]{accent-color:var(--burgundy); width:16px; height:16px;}
.row-2{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
@media (max-width:600px){ .row-2{grid-template-columns:1fr;} }
.form-note{font-size:12.5px; color:var(--ink-soft); margin-top:18px; font-style:italic; text-align:center;}
.confirm-msg{display:none; text-align:center; padding:56px 24px;}
.confirm-msg.show{display:block;}
.confirm-msg .rule{width:64px; height:1px; background:var(--brass); margin:0 auto 22px;}
.confirm-msg h2{font-size:24px; font-weight:400; color:var(--burgundy); margin-bottom:14px;}
.confirm-msg p{font-size:15px; color:var(--ink-soft); max-width:440px; margin:0 auto;}

.dropzone{border:1px dashed var(--brass); background:#F1EBE2; padding:26px; text-align:center; cursor:pointer; position:relative;}
.dropzone .dz-label{font-size:12.5px; color:var(--ink-soft); letter-spacing:0.05em;}
.dropzone input[type=file]{position:absolute; inset:0; opacity:0; cursor:pointer;}
.dropzone.has-file{border-style:solid;}

/* ==========================================================================
   Foto-Platzhalter (bis echte Fotografie vorliegt)
   ========================================================================== */
.photo-slot{
  border:1px dashed var(--brass); background:#F1EBE2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; color:var(--ink-soft); text-align:center;
}
.photo-slot .ph-label{font-size:11px; letter-spacing:0.1em; text-transform:uppercase;}
.photo-slot svg{opacity:0.55;}
.photo-banner{aspect-ratio:3/2; height:auto; margin-top:0; position:relative; overflow:hidden;}
.banner-img{width:100%; height:100%; object-fit:cover; object-position:center; display:block;}
.photo-caption{position:absolute; bottom:14px; right:16px; background:rgba(250,248,245,0.88); padding:6px 12px; font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft);}

/* ==========================================================================
   Footer (identisch auf allen Seiten)
   ========================================================================== */
footer{border-top:1px solid var(--hairline); padding:36px 0;}
footer .wrap{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
footer .logo-mark{display:flex; flex-direction:column; align-items:center; line-height:1.05;}
footer .logo-mark .logo-sg{font-family:'Poppins', sans-serif; font-weight:500; font-size:19px; color:var(--burgundy); letter-spacing:0.01em;}
footer .logo-mark .logo-sub{font-family:'Poppins', sans-serif; font-weight:300; font-size:6.8px; color:var(--burgundy); letter-spacing:0.09em; margin-top:2px;}
footer .legal{display:flex; gap:24px; font-size:12.5px; color:var(--ink-soft);}
footer .legal a:hover{color:var(--burgundy);}
.phone-link{display:flex; align-items:center; gap:6px; font-size:15px; color:var(--ink-soft); white-space:nowrap;}
.phone-link:hover{color:var(--burgundy);}
.phone-link svg{width:14px; height:14px;}