/* --- WICHTIG: Importiere Montserrat sicherheitshalber hier nochmal --- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');

/* --- Basis-Styling --- */
* { margin: 0; padding: 0; box-sizing: border-box; }

body { 
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important; 
  background:#fff; 
  color:#1a1a1a; 
  overflow-x:hidden; 
}

.timeline-section .container { max-width:1200px; margin:0 auto; padding:60px 20px; }

/* Header */
.header-section { text-align:center; margin-bottom:60px; padding:40px 20px; border-radius:20px; background:linear-gradient(135deg, rgba(230,194,60,.05) 0%, rgba(243,214,99,.05) 100%); }
.header-section h1 { font-size:2.5rem; margin-bottom:20px; color:#1a1a1a; font-weight:700; }
.header-text { font-size:1.1rem; line-height:1.6; color:#4a4a4a; max-width:800px; margin:0 auto; }

/* Timeline */
.timeline-section { 
  position:relative; 
  padding:40px 0; 
}
.timeline-grid { 
  display:grid; 
  grid-template-columns:minmax(auto,1fr) minmax(100px,1fr) minmax(auto,1fr); 
  grid-template-rows:auto auto auto; 
  gap:1rem; 
  position:relative; 
  max-width:1100px; 
  margin:0 auto; 
}

.timeline-step { 
  position:relative; 
  background:#fff; 
  border: 1px solid #f0f0f0; 
  border-radius:16px; 
  padding:25px; 
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.04), 0 2px 5px rgba(0, 0, 0, 0.02); 
  z-index:10; 
  transition:transform .3s ease, box-shadow .3s ease; 
}
.timeline-step:hover { transform:translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.07), 0 4px 10px rgba(0, 0, 0, 0.04); }

.step-1 { grid-column:1/2; grid-row:1/2; }
.step-2 { grid-column:3/4; grid-row:1/2; }
.step-3 { grid-column:2/3; grid-row:2/3; }
.step-4 { grid-column:1/2; grid-row:3/4; }
.step-5 { 
  grid-column:3/4; 
  grid-row:3/4; 
  border: 2px solid transparent; 
  border-image: linear-gradient(135deg,#E5C44D,#F3D663) 1;
  box-shadow: 0 8px 25px rgba(230, 194, 60, 0.2), 0 4px 10px rgba(230, 194, 60, 0.1);
  transform: scale(1.02); 
}

.step-5:hover {
  transform: scale(1.02) translateY(-5px); 
  box-shadow: 0 10px 30px rgba(230, 194, 60, 0.3), 0 5px 15px rgba(230, 194, 60, 0.2);
}

.step-icon { 
  width:56px; height:56px; 
  background:linear-gradient(135deg,#E5C44D 0%, #F3D663 100%); 
  border-radius:50%; 
  display:flex; align-items:center; justify-content:center; 
  margin-bottom:20px; 
  font-size:1.4rem; color:#fff; font-weight:600; 
  box-shadow: 0 4px 12px rgba(230, 194, 60, 0.3); 
}
.step-number { font-size:.8rem; color:#E5C44D; margin-bottom:4px; font-weight:600; text-transform: uppercase; letter-spacing: 0.5px; }

/* --- HIER WURDE ES ERZWINGEN --- */
.step-title { 
  font-family: 'Montserrat', sans-serif !important; /* !important erzwingt die Änderung */
  font-size:1.25rem; 
  font-weight:700; 
  margin-bottom:12px; 
  color:#1a1a1a; 
  letter-spacing: -0.02em; 
}
.step-description { 
  font-family: 'Montserrat', sans-serif !important; /* !important erzwingt die Änderung */
  font-size:0.95rem; 
  line-height:1.6; 
  color:#555; 
  font-weight: 400;
}

/* --- CSS PFEILE --- */
.timeline-step::after{
  content:"";
  position:absolute;
  z-index:-1;
  background-repeat:no-repeat;
  background-size: contain;   
  background-position: center;
  pointer-events:none;
}

/* 1 -> 2 */
.step-1::after{
  background-image:url("/assets/img/02-ablauf/pfeil1_LP.svg");
  width:210px;               
  aspect-ratio: 2 / 5;        
  top:-90%;
  left:90%;
  transform: translate(100px,10%) rotate(180deg);
}

/* 2 -> 3 */
.step-2::after{
  background-image:url("/assets/img/02-ablauf/pfeil3_LP.svg");
  width:200px;
  aspect-ratio: 3 / 5;
  top:100%;
  left:50px;
  transform: translateY(-20px) rotate(-45deg);
}

/* 3 -> 4 */
.step-3::after{
  background-image:url("/assets/img/02-ablauf/pfeil2_LP.svg");
  width:180px;
  aspect-ratio: 9 / 10;
  top:100%;                  
  left:10%;
  transform: translate(-10px,-50%) rotate(135deg);
  transform-origin: top left;
}

/* 4 -> 5 */
.step-4::after{
  background-image:url("/assets/img/02-ablauf/pfeil4_LP.svg");
  width:520px;
  aspect-ratio: 5 / 2;
  top:0;
  left:45%;
  transform: translate(100px,10%) rotate(180deg);
}


/* ===== Section 2 – Responsive Overrides ===== */

@media (max-width: 1200px){
  .timeline-section .header-section{ margin-bottom:40px; padding:28px 16px; }
  .timeline-section .header-section h1{ font-size:clamp(1.6rem,2.2vw,2.2rem); }
  .timeline-section .header-text{ font-size:1rem; }
  .timeline-section .container{ padding:48px 16px; }
  .timeline-grid{ max-width:100%; grid-template-columns: 1fr 1fr; gap: 20px; }
  .step-1{ grid-column:1; grid-row:1; }
  .step-2{ grid-column:2; grid-row:1; }
  .step-3{ grid-column:1 / -1; grid-row:2; } 
  .step-4{ grid-column:1; grid-row:3; }
  .step-5{ grid-column:2; grid-row:3; }
  .timeline-step::after{ display:none; }
}

@media (max-width: 768px){
  .timeline-section{ padding:20px 0; }
  .timeline-grid{ grid-template-columns: 1fr; gap: 16px; }
  .step-1, .step-2, .step-3, .step-4, .step-5{ grid-column:1; grid-row:auto; }
  .timeline-step{ padding:18px; border-radius:14px; }
  .step-icon{ width:48px; height:48px; font-size:1.2rem; margin-bottom:12px; }
  .step-title{ font-size:1.15rem; } 
  .step-description{ font-size:0.9rem; } 
  .timeline-step:hover{ transform:none; box-shadow: 0 6px 15px rgba(0,0,0,.06); }
}

@media (max-width: 380px){
  .timeline-step{ padding:16px; }
  .step-title{ font-size:1.1rem; }
  .step-description{ font-size:.85rem; }
}

/* ===== Mobile: kompakt für die 5-Schritte-Karten ===== */
@media (max-width: 480px) {
  .container { padding-left: 14px; padding-right: 14px; }
  .header-section { margin-bottom: 20px; padding: 16px 14px; }
  .header-section h1 { font-size: 1.15rem; }
  .header-text { font-size: .92rem; line-height: 1.45; }
  .timeline-section { padding: 0; overflow-x: hidden; }
  .timeline-grid { gap: 10px; }
  .timeline-step { padding: 12px 12px; border-radius: 12px; box-shadow: 0 3px 10px rgba(0,0,0,.06); display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; row-gap: 6px; }
  .step-icon { width: 36px; height: 36px; margin: 0; box-shadow: 0 2px 6px rgba(230,194,60,.25); grid-row: 1 / span 2; align-self: start; }
  .step-title { font-size: 1rem; margin: 0; line-height: 1.25; }
  .step-description { grid-column: 1 / -1; font-size: .9rem; line-height: 1.45; margin-top: 2px; }
  .timeline-step::after { display: none !important; }
  .step-5 { border-image: none; border: 1px solid #eee; transform: none; box-shadow: 0 3px 10px rgba(230,194,60,.12); }
  body, .timeline-section, .timeline-grid, .timeline-step { max-width: 100%; }
}

@media (max-width: 360px) {
  .step-title { font-size: 0.95rem; }
  .step-description { font-size: .85rem; }
  .step-icon { width: 32px; height: 32px; }
  .timeline-step { padding: 10px; column-gap: 10px; }
}