/* Mobile Feinschliff – wird absichtlich NACH allen anderen Styles geladen. */
@media (max-width: 760px) {
  html, body { width: 100%; overflow-x: hidden; }

  /* Startseite */
  .hero { height: 540px !important; min-height: 540px !important; }
  .hero-image { object-position: 58% center !important; }
  .hero header {
    position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important;
    height: 128px !important; padding: 0 10px !important; display: block !important;
    background: linear-gradient(180deg,rgba(30,30,32,.84),rgba(30,30,32,.32),transparent) !important;
  }
  .hero header .logo {
    display: block !important; width: 104px !important; height: 74px !important;
    margin: 0 auto !important;
  }
  .hero header nav {
    position: absolute !important; top: 76px !important; left: 8px !important; right: 8px !important;
    margin: 0 !important; padding: 6px 8px !important; display: flex !important;
    flex-wrap: wrap !important; justify-content: center !important; align-items: center !important;
    gap: 2px 12px !important; white-space: normal !important;
    background: rgba(28,28,31,.78) !important; border-radius: 4px !important;
  }
  .hero header nav a, .hero header nav .nav-placeholder {
    padding: 5px 2px !important; font-size: 13px !important; line-height: 1.2 !important; text-align: center !important;
  }
  .hero-copy { position: absolute !important; inset: 0 !important; }
  .hero-copy h1 {
    left: 18px !important; top: 350px !important; width: calc(100% - 36px) !important;
    font-size: 46px !important; line-height: 1.05 !important; text-align: center !important;
  }
  .hero-copy p {
    left: 18px !important; top: 410px !important; width: calc(100% - 36px) !important;
    margin: 0 !important; font-size: 15px !important; line-height: 1.35 !important; text-align: center !important;
  }
  .hero-copy p:last-child { left: 18px !important; top: 442px !important; margin: 0 !important; }
  .intro.pad { padding: 58px 20px !important; }
  .intro h2 { font-size: 36px !important; }
  .intro p { font-size: 16px !important; line-height: 1.55 !important; }
  .essence-original { min-height: 0 !important; padding: 48px 18px 60px !important; }
  .essence-collage { position: static !important; width: auto !important; height: auto !important; transform: none !important; }
  .essence-collage > * { position: static !important; }
  .essence-collage .collage-tanzen { font-size: 58px !important; text-align: center !important; }
  .essence-collage .collage-heading { width: auto !important; margin: 16px 0 30px !important; font-size: 34px !important; text-align: center !important; }
  .essence-collage img:not(.collage-logo) { width: 100% !important; height: auto !important; margin: 24px 0 !important; }
  .essence-collage .collage-logo { position: static !important; width: 230px !important; height: auto !important; margin: 28px auto !important; transform: none !important; }
  .essence-collage p, .collage-text-three { width: auto !important; font-size: 16px !important; line-height: 1.55 !important; text-align: left !important; }

  /* Navigation auf Unterseiten */
  .course-header {
    position: relative !important; height: 126px !important; min-height: 126px !important;
    padding: 0 10px !important; display: block !important;
  }
  .course-header .logo { display: block !important; width: 104px !important; height: 74px !important; margin: 0 auto !important; }
  .course-header nav {
    position: absolute !important; top: 78px !important; left: 8px !important; right: 8px !important;
    margin: 0 !important; padding: 5px 6px !important; display: flex !important;
    flex-wrap: wrap !important; justify-content: center !important; gap: 2px 12px !important;
    overflow: visible !important; white-space: normal !important; background: transparent !important;
  }
  .course-header nav a, .course-header nav .nav-placeholder { padding: 4px 1px !important; font-size: 13px !important; line-height: 1.2 !important; text-align: center !important; }

  /* Unterseiten */
  .subpage-main, .tango-original-main.subpage-main { padding: 44px 18px 70px !important; }
  .tango-original-main { padding-top: 44px !important; padding-bottom: 70px !important; }
  .subpage-copy h1, .about-heading h1, .contact-heading h1, .private-original-text h1 { font-size: 39px !important; line-height: 1.08 !important; }
  .subpage-copy h2, .offers-section h2, .about-content h2, .contact-card h2, .private-original-text h2 { font-size: 30px !important; }
  .two-column, .about-content, .contact-content, .private-original-block { grid-template-columns: 1fr !important; gap: 28px !important; }
  .about-page-image, .contact-page-image, .landscape-page-image, .portrait-page-image { width: 100% !important; height: auto !important; max-height: none !important; }
  .contact-lines { grid-template-columns: 1fr !important; }
  .contact-form-section { grid-template-columns: 1fr !important; gap: 22px !important; margin-top: 45px !important; padding-top: 35px !important; }
  .contact-form-section form { padding: 24px 18px !important; }
  .form-grid { grid-template-columns: 1fr !important; }
  .private-offers { grid-template-columns: 1fr !important; gap: 22px !important; margin-top: 45px !important; padding-top: 35px !important; }
  .private-offers article { padding: 28px 22px !important; }
  .course-canvas-section { padding: 38px 0 0 !important; }
  .course-canvas { min-height: 0 !important; padding: 26px 18px !important; }
  .public-tango-offer { padding: 22px 18px !important; }
  .public-offer-details { grid-template-columns: 1fr !important; }
  .legal-page-main { padding: 44px 20px 70px !important; }
  .legal-page-main h1 { font-size: 40px !important; margin-bottom: 30px !important; }
  .legal-page-main h2 { font-size: 27px !important; }

  /* Footer */
  .original-footer {
    grid-template-columns: 1fr !important; min-height: 0 !important; padding: 38px 20px 30px !important;
    gap: 8px !important; text-align: center !important;
  }
  .footer-left, .footer-center, .footer-social { padding-top: 12px !important; }
  .footer-left > img { width: 155px !important; height: auto !important; }
  .footer-legal { flex-wrap: wrap !important; gap: 10px 18px !important; }
  .footer-center h3 { margin-bottom: 12px !important; }
  .footer-center p { margin-bottom: 8px !important; }
  .footer-social { padding-top: 16px !important; }
}

@media (max-width: 420px) {
  .hero { height: 520px !important; min-height: 520px !important; }
  .hero-copy h1 { top: 342px !important; font-size: 41px !important; }
  .hero-copy p { top: 397px !important; font-size: 14px !important; }
  .hero-copy p:last-child { top: 428px !important; }
  .hero header nav, .course-header nav { gap: 1px 9px !important; }
  .hero header nav a, .course-header nav a { font-size: 12px !important; }
  .essence-collage .collage-tanzen { font-size: 50px !important; }
  .essence-collage .collage-heading { font-size: 31px !important; }
}




/* =========================================================
   KOMPLETTE HANDY-OPTIMIERUNG – 20.08.2026
   Nur bis 700px. Desktop/Tablet oberhalb davon bleiben unverändert.
   ========================================================= */
@media (max-width: 700px) {

  *, *::before, *::after { box-sizing: border-box !important; }

  html {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100%;
  }

  body {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
  }

  /* ---------- Kopf / Navigation ---------- */
  header,
  .header,
  .site-header {
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 14px !important;
    margin: 0 !important;
  }

  header .container,
  .header .container,
  .site-header .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 auto !important;
  }

  nav,
  .nav,
  .navigation {
    width: 100% !important;
    max-width: 100% !important;
  }

  nav ul,
  .nav ul,
  .navigation ul {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 6px 12px !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
  }

  nav a,
  .nav a,
  .navigation a {
    font-size: 14px !important;
    line-height: 1.25 !important;
    padding: 6px 4px !important;
    white-space: normal !important;
  }

  .logo,
  header .logo {
    max-width: 150px !important;
    margin: 0 auto 8px !important;
  }

  .logo img,
  header .logo img {
    width: 100% !important;
    max-width: 150px !important;
    height: auto !important;
    margin: 0 auto !important;
  }

  /* ---------- Hero / Startbereich ---------- */
  .hero {
    width: 100% !important;
    max-width: 100vw !important;
    min-height: 62vh !important;
    height: auto !important;
    overflow: hidden !important;
    position: relative !important;
  }

  .hero video,
  .hero-video,
  .hero-video video,
  video.hero-video {
    width: 100% !important;
    max-width: 100vw !important;
    height: 62vh !important;
    min-height: 420px !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  .hero-content {
    left: 50% !important;
    right: auto !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: calc(100% - 32px) !important;
    max-width: 520px !important;
    padding: 12px !important;
    text-align: center !important;
  }

  .hero-content h1,
  .hero h1 {
    font-size: clamp(30px, 10vw, 44px) !important;
    line-height: 1.05 !important;
    margin: 0 0 10px !important;
    overflow-wrap: anywhere !important;
  }

  .hero-content .untertitel,
  .hero-content p,
  .hero p {
    font-size: 16px !important;
    line-height: 1.4 !important;
    margin: 6px auto !important;
    max-width: 92% !important;
  }

  /* ---------- Seiten / Inhaltsbreite ---------- */
  main,
  section,
  .section,
  .content,
  .container,
  .wrapper,
  .inner {
    max-width: 100% !important;
  }

  section,
  .section {
    padding: 42px 18px !important;
  }

  .container,
  .wrapper,
  .inner,
  .content {
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Desktop-Spalten konsequent untereinander */
  .grid,
  .row,
  .columns,
  .two-columns,
  .three-columns,
  .ueber-mich .container,
  .about .container,
  .privatunterricht .container,
  .tango .container,
  .kontakt .container {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 24px !important;
  }

  /* ---------- Typografie ---------- */
  h1 { font-size: clamp(30px, 9vw, 42px) !important; line-height: 1.1 !important; }
  h2 { font-size: clamp(26px, 8vw, 34px) !important; line-height: 1.15 !important; }
  h3 { font-size: clamp(21px, 6vw, 27px) !important; line-height: 1.2 !important; }

  h1, h2, h3, h4, p, li, a, span {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
  }

  p, li {
    font-size: 16px !important;
    line-height: 1.55 !important;
  }

  /* ---------- Bilder / Karten ---------- */
  img,
  picture,
  video,
  iframe,
  svg {
    max-width: 100% !important;
  }

  img {
    height: auto !important;
  }

  main img,
  section img,
  .container img,
  .content img,
  .ueber-mich img,
  .about img,
  .privatunterricht img,
  .tango img,
  .kontakt img {
    display: block !important;
    width: auto !important;
    max-width: min(88vw, 420px) !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    object-fit: contain !important;
  }

  figure,
  .bildkarte,
  .image-card,
  .photo-card,
  .card {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  figure img,
  .bildkarte img,
  .image-card img,
  .photo-card img,
  .card img {
    max-width: min(88vw, 420px) !important;
    height: auto !important;
  }

  /* ---------- Tango-Angebote ---------- */
  #tango-angebote,
  .tango-angebote,
  .tango-angebot {
    width: 100% !important;
    max-width: 100% !important;
  }

  .tango-angebot {
    padding: 18px !important;
    margin: 0 0 20px !important;
  }

  .angebot-termine,
  .angebot-termin {
    width: 100% !important;
    max-width: 100% !important;
  }

  .angebot-termin {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    align-items: flex-start !important;
  }

  /* ---------- Formulare ---------- */
  form,
  fieldset {
    width: 100% !important;
    max-width: 100% !important;
  }

  input,
  textarea,
  select,
  button {
    max-width: 100% !important;
    font-size: 16px !important;
  }

  input,
  textarea,
  select {
    width: 100% !important;
  }

  textarea {
    min-height: 130px !important;
  }

  button,
  .button,
  .btn {
    min-height: 44px !important;
    padding: 10px 16px !important;
  }

  /* ---------- Footer ---------- */
  footer,
  .footer {
    width: 100% !important;
    max-width: 100% !important;
    padding: 28px 18px !important;
    text-align: center !important;
  }

  footer .container,
  .footer .container {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    padding: 0 !important;
  }

  footer a,
  .footer a {
    display: inline-block !important;
    margin: 4px 6px !important;
  }

  /* ---------- Überbreite aus Desktop-Regeln verhindern ---------- */
  [style*="width:"],
  [style*="min-width:"] {
    max-width: 100% !important;
  }
}

@media (max-width: 390px) {
  section,
  .section { padding-left: 14px !important; padding-right: 14px !important; }
  .hero-content { width: calc(100% - 24px) !important; }
  nav a, .nav a, .navigation a { font-size: 13px !important; }
}

/* Korrektur Kontaktformular mobil: Datenschutz-Zeile bleibt vollständig im Bildschirm */
@media (max-width: 700px) {
  .privacy-check {
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: start !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .privacy-check input[type="checkbox"] {
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    margin: 2px 0 0 !important;
  }
  .privacy-check span,
  .privacy-check a {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }
  .check-label input[type="checkbox"] {
    width: auto !important;
    min-width: 18px !important;
  }
}

/* Kontakt mobil: Abstand zwischen Info-Bereich und Formular verkleinern */
@media (max-width: 700px) {
  .contact-form-section {
    margin-top: 24px !important;
    padding-top: 24px !important;
  }
}