/* ===== Mobile enhancements (conservative) ===== */
* { box-sizing: border-box; }

/* Keep images/media fluid without touching layout containers */
img, video, svg, canvas, iframe { max-width: 100%; height: auto; }

/* Avoid horizontal scroll from rogue elements */
html, body { width: 100%; overflow-x: hidden; }

/* Typographic scaling with minimal impact */
@media (max-width: 768px) {
  html { font-size: 15px; }
  h1 { font-size: clamp(1.6rem, 5vw, 2.2rem); }
  h2 { font-size: clamp(1.4rem, 4.5vw, 1.9rem); }
  h3 { font-size: clamp(1.2rem, 4vw, 1.6rem); }
  .container, .wrap, .section, section { padding-left: 16px; padding-right: 16px; }
}

/* DO NOT override framework display rules.
   Only fix elements that explicitly overflow. */
@media (max-width: 768px) {
  [style*="width:"]:not(img):not(video):not(svg):not(canvas):not(iframe) { max-width: 100% !important; }
  [style*="min-width:"]:not(img):not(video):not(svg):not(canvas):not(iframe) { min-width: 0 !important; }
}

/* Buttons: improve tap targets WITHOUT forcing full width */
@media (max-width: 768px) {
  button, .button, .btn, a[role="button"] { min-height: 44px; line-height: 1.2; padding: 12px 16px; }
  .btn-block, .w-100, .full, .full-width { width: 100% !important; }
}

/* Tables: add safe horizontal scroll for wide data */
@media (max-width: 768px) {
  .table-responsive, .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-responsive table, .table-wrap table { min-width: 640px; }
}

/* Prevent parallax/fixed backgrounds from causing jumpiness */
@media (max-width: 768px) {
  .hero, .header, .masthead { background-attachment: scroll !important; }
}

/* Utility: contain long words/URLs */
@media (max-width: 768px) {
  p, li, td, th { overflow-wrap: anywhere; word-break: break-word; }
}

/* Fix for iframes (e.g., videos) inside flex/grid cards */
@media (max-width: 768px) {
  .embed, .video, .responsive-media { position: relative; }
  .embed iframe, .video iframe, .responsive-media iframe { width: 100% !important; }
}


/* ===== Targeted mobile fixes for Team section ===== */
@media (max-width: 768px) {
  /* Collapse 3-column inline grid to single column */
  #team div[style*="display:grid"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  /* Make portraits visible and not cropped */
  #team .image-container {
    height: 220px !important;
  }
  #team .image-container img {
    object-fit: cover !important;
    object-position: top center !important; /* keep faces in view */
    transform: none !important; /* undo per-image zooms */
  }
  /* Typography improvements: avoid weird word breaks */
  #team .team-card h3 {
    font-size: 1.15rem !important;
    margin-top: 12px !important;
  }
  #team .team-card p {
    font-size: 0.98rem !important;
    line-height: 1.5 !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: auto !important;
    text-align: center !important;
    white-space: normal !important;
  }
}


/* ===== Precise mobile overrides for specific portraits ===== */
@media (max-width: 768px) {
  /* Slightly taller frame so Köpfe + Schultern reinpassen */
  #team .image-container { height: 260px !important; }

  /* Remove any custom zooms/scales and ensure face is visible */
  #team .image-container img[src*="adrian.png"],
  #team .image-container img[src*="tim.png"],
  #team .image-container img[src*="jouls.png"],
  #team .image-container img[src*="maurice.png"] {
    transform: none !important;
    object-fit: cover !important;
    object-position: top center !important;
  }
}


/* ===== Fine-tuned overrides for Adrian & Jouls ===== */
@media (max-width: 768px) {
  /* Give more height to portraits so head + shoulders are fully visible */
  #team .image-container { height: 300px !important; }

  /* Adrian: shift image a bit down to show full head */
  #team .image-container img[src*="adrian.png"] {
    object-fit: contain !important;
    object-position: center top !important;
    transform: none !important;
  }

  /* Jouls: zoom out and center so whole head is visible */
  #team .image-container img[src*="jouls.png"] {
    object-fit: contain !important;
    object-position: center top !important;
    transform: none !important;
  }

  /* Tim & Maurice stay with cover so proportions look consistent */
  #team .image-container img[src*="tim.png"],
  #team .image-container img[src*="maurice.png"] {
    object-fit: cover !important;
    object-position: top center !important;
    transform: none !important;
  }
}


/* ===== Fine-tuning for Jouls & Adrian on mobile ===== */
@media (max-width: 768px) {
  /* Give portraits a bit more vertical space */
  #team .image-container { height: 280px !important; }

  /* Make sure there's no zoom */
  #team .image-container img[src*="adrian.png"],
  #team .image-container img[src*="jouls.png"] {
    transform: none !important;
    object-fit: cover !important;
  }

  /* Shift the crop so face sits lower in the frame (more balanced) */
  #team .image-container img[src*="adrian.png"] { object-position: 50% 32% !important; }
  #team .image-container img[src*="jouls.png"]  { object-position: 50% 18% !important; }
}


/* ===== Extra fine-tuning for Jouls ===== */
@media (max-width: 768px) {
  #team .image-container img[src*="jouls.png"] {
    object-position: 50% 10% !important;
  }
}


/* ===== Extra fine-tuning for Adrian ===== */
@media (max-width: 768px) {
  #team .image-container img[src*="adrian.png"] {
    object-position: 50% 45% !important; /* push view a bit lower to show more body */
  }
}


/* ===== Fine-tuning Jouls & Adrian (v6) ===== */
@media (max-width: 768px) {
  #team .image-container img[src*="jouls.png"] {
    object-position: 50% 5% !important;  /* move further up to show full head */
  }
  #team .image-container img[src*="adrian.png"] {
    object-position: 50% 60% !important; /* move further down to fit body fully */
  }
}


/* ===== Further tuning for Jouls & Adrian (v7) ===== */
@media (max-width: 768px) {
  #team .image-container img[src*="jouls.png"] {
    object-position: 50% 0% !important;  /* very top, show full head */
  }
  #team .image-container img[src*="adrian.png"] {
    object-position: 40% 60% !important; /* move left (40% X) and down (60% Y) */
  }
}


/* ===== v7: Jouls higher, Adrian more left ===== */
@media (max-width: 768px) {
  /* Jouls: fully to the top */
  #team .image-container img[src*="jouls.png"] {
    object-position: 50% 0% !important;
  }
  /* Adrian: shift viewport to the right so he moves LEFT inside the frame */
  #team .image-container img[src*="adrian.png"] {
    object-position: 65% 60% !important;
  }
}


/* ===== v8: Reset all portraits to consistent style ===== */
@media (max-width: 768px) {
  #team .image-container {
    height: auto !important;
  }
  #team .image-container img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
  }
  /* Adrian: shift more to the left inside frame */
  #team .image-container img[src*="adrian.png"] {
    object-position: 40% center !important;
  }
}


/* ===== v8: Einheitlicher Team-Look + gezielte Positionen ===== */
@media (max-width: 768px) {
  /* Einheitlicher Rahmen für alle Team-Bilder */
  #team .image-container {
    height: 300px !important;
  }
  #team .image-container img {
    transform: none !important;
    object-fit: cover !important;
  }

  /* Individuelle Feineinstellung pro Person */
  #team .image-container img[src*="adrian.png"]  { object-position: 75% 60% !important; } /* weiter nach links */
  #team .image-container img[src*="jouls.png"]   { object-position: 50% 0%  !important; } /* ganz nach oben */
  #team .image-container img[src*="tim.png"]     { object-position: 50% 15% !important; }
  #team .image-container img[src*="maurice.png"] { object-position: 50% 25% !important; }
  #team .image-container img[src*="sergej.png"]  { object-position: 50% 35% !important; }
  #team .image-container img[src*="kathrin.png"] { object-position: 50% 10% !important; }
}


/* ===== v9: Jouls höher + Adrian weiter links ===== */
@media (max-width: 768px) {
  #team .image-container img[src*="jouls.png"] {
    object-position: 50% -3% !important; /* 3% höher */
  }
  #team .image-container img[src*="adrian.png"] {
    object-position: 80% 60% !important; /* 5% weiter nach links */
  }
}


/* ===== v10: Jouls 10% höher + Adrian 15% weiter links ===== */
@media (max-width: 768px) {
  #team .image-container img[src*="jouls.png"] {
    object-position: 50% -10% !important; /* noch höher */
  }
  #team .image-container img[src*="adrian.png"] {
    object-position: 95% 60% !important; /* noch weiter nach links */
  }
}


/* ===== v11: Jouls sichtbar nach oben, Adrian sichtbar nach links ===== */
@media (max-width: 768px) {
  #team .image-container img[src*="jouls.png"] {
    object-fit: cover !important;
    object-position: center top !important;
    transform: translateY(-15%) !important;
  }
  #team .image-container img[src*="adrian.png"] {
    object-fit: cover !important;
    object-position: left center !important;
    transform: translateX(-15%) !important;
  }
}


/* ===== v12: Adrian zurücksetzen, Jouls bleibt angepasst ===== */
@media (max-width: 768px) {
  #team .image-container img[src*="adrian.png"] {
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
  }
  /* Jouls bleibt wie in v11 */
}


/* ===== v13: Adrian nach links + CTA/Text mittig ===== */
@media (max-width: 768px) {
  /* Adrian nach links im Rahmen */
  #team .image-container img[src*="adrian.png"] {
    object-fit: cover !important;
    object-position: center center !important;
    transform: translateX(-10%) !important;
  }

  /* CTA und Text mittig & bündig im Kasten */
  section#team .cta,
  section#team .cta a,
  section#team p {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    max-width: 90% !important;
  }
}


/* ===== v14: Adrian reset + unterer Block mittig ===== */
@media (max-width: 768px) {
  /* Adrian wieder normal zentrieren */
  #team .image-container img[src*="adrian.png"] {
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
  }

  /* Unteres Bild im Kasten mittig */
  section:last-of-type img {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 90% !important;
  }

  /* CTA und Text unten mittig & bündig */
  section:last-of-type .cta,
  section:last-of-type .cta a,
  section:last-of-type p {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    max-width: 90% !important;
  }
}


/* ===== v15: Adrian größer + unterer Block nach links ===== */
@media (max-width: 768px) {
  /* Adrian größer darstellen */
  #team .image-container img[src*="adrian.png"] {
    object-fit: cover !important;
    object-position: center center !important;
    transform: scale(1.1) !important;
  }

  /* Unteres Bild linksbündig im Kasten */
  section:last-of-type img {
    display: block !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    max-width: 90% !important;
    padding-left: 5% !important;
  }

  /* CTA und Text unten linksbündig */
  section:last-of-type .cta,
  section:last-of-type .cta a,
  section:last-of-type p {
    margin-left: 0 !important;
    margin-right: auto !important;
    text-align: left !important;
    max-width: 90% !important;
    padding-left: 5% !important;
  }
}


/* ===== v15: Adrian größer + unterer Block linksbündig ===== */
@media (max-width: 768px) {
  /* Adrian größer (zentriert) */
  #team .image-container img[src*="adrian.png"] {
    object-fit: cover !important;
    object-position: center center !important;
    transform: scale(1.1) !important;
  }

  /* Unteres Bild linksbündig im Kasten (mit etwas Innenabstand) */
  section:last-of-type img {
    display: block !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    max-width: 90% !important;
    padding-left: 5% !important;
  }

  /* CTA und Text unten linksbündig & im Kasten */
  section:last-of-type .cta,
  section:last-of-type .cta a,
  section:last-of-type p {
    margin-left: 0 !important;
    margin-right: auto !important;
    text-align: left !important;
    max-width: 90% !important;
    padding-left: 5% !important;
  }
}


/* ===== v16: Schmaler Kasten unten – CTA/Text/Bild mobile-fit ===== */
@media (max-width: 768px) {
  /* Gesamter letzter Abschnitt kompakter und symmetrisch */
  section:last-of-type {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Headline & Paragraph kleiner im letzten Abschnitt */
  section:last-of-type h1,
  section:last-of-type h2 {
    font-size: clamp(1.25rem, 5.2vw, 1.6rem) !important;
    line-height: 1.2 !important;
    margin-bottom: 10px !important;
  }
  section:last-of-type p {
    font-size: clamp(0.95rem, 4.2vw, 1.05rem) !important;
    line-height: 1.45 !important;
    margin-top: 8px !important;
    margin-bottom: 8px !important;
  }

  /* CTA: schmaler Kasten-tauglich */
  section:last-of-type .cta,
  section:last-of-type .cta a,
  section:last-of-type a.button,
  section:last-of-type button,
  section:last-of-type .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 92% !important;         /* schmaler als Kasten */
    max-width: 520px !important;
    margin-left: 0 !important;     /* bündig links im Kasten */
    margin-right: auto !important;
    padding: 12px 16px !important;  /* weniger Höhe */
    font-size: clamp(0.95rem, 4.2vw, 1.05rem) !important; /* kleinere Schrift */
    border-radius: 9999px !important;
  }

  /* Bild unten: in den schmalen Kasten passend machen */
  section:last-of-type .image-container,
  section:last-of-type .hero-image,
  section:last-of-type .illustration {
    width: 100% !important;
    height: auto !important;
    margin-left: 0 !important;     /* links bündig */
    margin-right: auto !important;
  }
  section:last-of-type img {
    display: block !important;
    width: 92% !important;
    max-width: 520px !important;
    height: auto !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    object-fit: contain !important;  /* nichts abschneiden im schmalen Kasten */
  }
}


/* ===== v17: Potenzial-Block (vor Footer) exakt mittig ausrichten ===== */
@media (max-width: 768px) {
  /* 1) Grid untereinander statt nebeneinander */
  #potenzial .grid { display: block !important; }

  /* 2) CTA-Button mittig und passend schmal */
  #potenzial .cta-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 88% !important;
    max-width: 520px !important;
    margin: 14px auto 0 !important;   /* zentriert */
    text-align: center !important;
    font-size: clamp(1rem, 4.2vw, 1.1rem) !important;
    padding: 12px 16px !important;
    border-radius: 9999px !important;
  }

  /* 3) Portrait-Panel mittig in den schmalen Kasten */
  #potenzial .cta-panel {
    margin-left: auto !important;
    margin-right: auto !important;
    width: 88% !important;
    max-width: 520px !important;
  }
  #potenzial .cta-portrait {
    object-fit: contain !important;
    left: 0 !important; right: 0 !important; /* bleibt zentriert */
    transform: none !important;
  }
}


/* ===== v18: Potenzial-Block sauber mittig & mit korrekten Abständen ===== */
@media (max-width: 768px) {
  /* Container enger machen und mittig halten */
  #potenzial .cta-surface { padding-left: 14px !important; padding-right: 14px !important; }
  #potenzial .grid { display: block !important; }

  /* Überschrift und Einleitungsabsatz zentrieren und am gleichen Maß ausrichten */
  #potenzial h2 {
    text-align: center !important;
    max-width: 560px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  #potenzial p.text-lg, 
  #potenzial p.text-zinc-200\/90 {
    text-align: center !important;
    max-width: 560px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* CTA: exakt mittig im Kasten, kleiner und mit sauberen Abständen */
  #potenzial .cta-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 86% !important;
    max-width: 520px !important;
    margin: 16px auto 18px !important; /* oben/unten ausreichend Luft */
    text-align: center !important;
    font-size: clamp(0.95rem, 4.2vw, 1.05rem) !important;
    padding: 12px 16px !important;
    border-radius: 9999px !important;
    position: relative !important;
    z-index: 2 !important;           /* sicher über dem Bild, falls nötig */
  }

  /* Bild-Panel: mittig unter dem CTA; kein Überlappen */
  #potenzial .cta-panel {
    margin-left: auto !important;
    margin-right: auto !important;
    width: 86% !important;
    max-width: 520px !important;
    margin-top: 10px !important;
  }
  #potenzial .cta-portrait-halo { min-height: 360px !important; } /* genügend Höhe */
  #potenzial .cta-portrait {
    object-fit: contain !important;
    left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important;
    transform: none !important;
    position: relative !important;   /* verhindert Überlappung mit CTA */
    z-index: 1 !important;
  }
}


/* ===== v19: CTA mittig im Potenzial-Block + Adrian größer/weiter oben ===== */
@media (max-width: 768px) {
  /* Potenzial-Block CTA mittig mit gleichmäßigen Abständen */
  #potenzial .cta-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 20px auto !important;  /* oben & unten gleichmäßig */
    width: 86% !important;
    max-width: 520px !important;
    text-align: center !important;
  }

  /* Adrian im Team-Bereich größer & etwas nach oben */
  #team .image-container img[src*="adrian.png"] {
    object-fit: cover !important;
    transform: scale(1.15) translateY(-5%) !important;
  }
}


/* ===== v19: CTA perfekt mittig + Adrian größer/oben ===== */
@media (max-width: 768px) {
  /* Potenzial-Block: CTA exakt mittig mit sauberen Abständen */
  #potenzial .cta-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 86% !important;
    max-width: 520px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 20px !important;
    margin-bottom: 20px !important; /* symmetrisch */
    text-align: center !important;
    padding: 12px 16px !important;
    line-height: 1.2 !important;
  }
  /* Stelle sicher, dass Bild darunter genug Luft hat */
  #potenzial .cta-panel {
    margin-top: 12px !important;
  }

  /* Team: Adrian größer und etwas höher im Feld */
  #team .image-container img[src*="adrian.png"] {
    object-fit: cover !important;
    object-position: center top !important;
    transform: scale(1.15) translateY(-5%) !important;
  }
}


/* ===== v20: Potenzial-Block – Liste & CTA mittig; Team – Adrian größer/oben ===== */
@media (max-width: 768px) {
  /* --- POTENZIAL-BLOCK (vor Footer) --- */
  /* Liste (3 Haken) als Block mittig zentrieren */
  #potenzial ul {
    display: inline-block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: left !important;     /* Text bleibt gut lesbar */
    padding-left: 0 !important;
  }
  #potenzial ul li {
    justify-content: center !important;  /* Icon + Text mittig als Reihe */
    gap: 12px !important;
  }
  #potenzial ul li .bullet {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 22px !important;
  }

  /* CTA unter der Liste exakt mittig */
  #potenzial .cta-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 18px auto 18px !important;
    width: 86% !important;
    max-width: 520px !important;
    text-align: center !important;
  }

  /* --- TEAM: Adrian im Kasten größer und nach oben --- */
  #team .team-card .image-container {
    height: 300px !important;        /* genug Rahmenhöhe */
    overflow: hidden !important;
  }
  #team .team-card .image-container img[src*="adrian.png"] {
    object-fit: cover !important;
    object-position: 50% 10% !important;   /* weiter oben im Frame */
    transform: scale(1.22) translateY(-8%) !important; /* größer + nach oben */
  }
}


/* ===== v21: Potenzial-Block Inhalt linksbündig ===== */
@media (max-width: 768px) {
  /* Überschrift links */
  #potenzial h2 {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  /* Einleitungsabsatz links */
  #potenzial p.text-lg,
  #potenzial p.text-zinc-200\/90 {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  /* Liste (Haken) links */
  #potenzial ul {
    margin-left: 0 !important;
    margin-right: auto !important;
    text-align: left !important;
  }
  #potenzial ul li {
    justify-content: flex-start !important;
  }

  /* CTA-Button links */
  #potenzial .cta-btn {
    margin-left: 0 !important;
    margin-right: auto !important;
    text-align: center !important; /* Text bleibt mittig im Button */
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
}