/* =========================================================
   MOBILE SECTIONS  –  max-width: 768px
   Hero, Why-Me, Skills, Contact – sektionsspezifische
   Anpassungen für das mobile Layout.
   ========================================================= */
@media (max-width: 768px) {
   /* ---- Hero ---- */
   #hero {
      padding: 60px 0 0;
      overflow: hidden;
      align-items: stretch;
   }

   .hero-content {
      flex-direction: column;
      height: auto;
      justify-content: flex-start;
   }

   .hero-image {
      position: static;
      transform: none;
      width: 100%;
      height: auto;
   }

   .hero-image img {
      width: 100%;
      height: auto;
      max-height: 100vw;
      object-fit: cover;
      object-position: top center;
   }

   .hero-text {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 24px 20px 32px;
      text-align: center;
   }

   .hero-name {
      font-size: 40px;
      font-weight: 400;
      color: var(--color-main);
      line-height: 1.2;
      width: 100%;
   }

   .hero-title {
      order: -1;
      font-size: 24px;
      font-weight: 700;
      color: var(--color-main);
      -webkit-text-stroke: 0;
      text-transform: uppercase;
      margin-bottom: 8px;
      line-height: 1.2;
   }

   .hero-location {
      display: block;
      font-size: 18px;
      font-weight: 400;
      color: var(--color-white);
      line-height: 1.2;
      margin-top: 8px;
   }

   /* ---- Why me ---- */
   #why-me {
      padding-top: 40px;
   }

   .about-content {
      flex-direction: column;
      gap: 20px;
      width: 100%;
   }

   .about-body {
      max-width: 100%;
      gap: 20px;
   }

   .about-description {
      font-size: 15px;
   }

   .about-content h3 {
      font-size: 32px;
   }

   .about-cta {
      align-self: center;
   }

   /* ---- Skills ---- */
   #skills {
      align-items: flex-start;
   }

   .skills-wrapper {
      flex-direction: column;
      gap: 20px;
      width: 100%;
   }

   .skills-content {
      max-width: 100%;
      gap: 20px;
      padding-right: 0;
   }

   .skills-description {
      font-size: 15px;
   }

   .skills-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
   }

   .skill-item {
      font-size: 14px;
   }

   .skill-icon,
   .skill-item img {
      width: 48px;
      height: 48px;
   }

   .fact-icon {
      width: 32px;
      height: 32px;
   }

   /* ---- Legal ---- */
   #legal-p2 {
      padding-bottom: 0;
   }

   #legal-p1 {
      padding-top: 100px;
   }

   #legal-p2 .arrow-btn-back {
      display: flex;
      justify-content: center;
      align-self: center;
      width: 100%;
      margin: 28px 0 20px;
   }

   #legal-p2 .arrow-btn-back .arrow-icon--back {
      width: 45px;
      height: 45px;
      transform: rotate(-90deg);
   }

   .legal-wrapper {
      flex-direction: column;
      padding-right: 0;
      padding-top: 0;
      gap: 16px;
      height: auto;
   }

   .legal-columns {
      height: auto;
      overflow-y: visible;
   }

   .legal-col {
      gap: 16px;
   }

   .legal-block h2 {
      font-size: 16px;
   }

   .legal-block p,
   .legal-block ul li,
   .legal-meta {
      font-size: 15px;
   }

   #legal-p2 .contact-info {
      width: 100%;
   }

   /* ---- Contact ---- */
   #contact {
      align-items: flex-start;
      padding-bottom: 0;
      width: 100%;
      flex: none;
      padding-right: 20px;
   }

   .contact-wrapper {
      flex-direction: column;
      gap: 24px;
      height: auto;
      padding-top: 0;
      padding-right: 0;
      width: 100%;
   }

   .contact-body {
      flex-direction: column;
      gap: 32px;
      width: 100%;
   }

   .contact-form {
      width: 100%;
   }

   .contact-form input,
   .contact-form textarea {
      padding: 10px 16px;
   }

   .contact-form textarea {
      height: 120px;
   }

   .contact-info {
      flex: none;
      width: 100%;
      height: auto;
      margin-left: 0;
      align-items: flex-start;
   }

   .contact-info-top {
      align-items: flex-start;
   }

   .contact-tagline,
   .contact-description {
      text-align: left;
   }

   .contact-sidebar {
      display: none;
   }

   /* ---- Back-Arrow: kleiner Hoch-Pfeil ---- */
   .contact-info .arrow-btn-back {
      display: flex;
      justify-content: center;
      align-self: center;
      width: 100%;
      margin: 28px 0 20px;
   }

   .contact-info .arrow-btn-back .arrow-icon--back {
      width: 45px;
      height: 45px;
      transform: rotate(-90deg);
   }

   .contact-info .arrow-btn-back:hover {
      transform: translateY(-6px);
      filter: drop-shadow(0 0 6px var(--color-main));
   }

   /* ---- Footer-Container ---- */
   .contact-footer {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      margin-top: 0;
      gap: 0;
   }

   .footer-desktop-link {
      display: none;
   }

   /* ---- Social Icons: größer, zentriert ---- */
   .contact-footer-social {
      display: flex;
      gap: 28px;
      justify-content: center;
      padding: 28px 0 32px;
      width: 100%;
   }

   .contact-footer-social .socialContainer {
      width: 44px;
      height: 44px;
   }

   .contact-footer-social .socialSvg {
      width: 22px;
   }

   /* ---- Grüner Footer-Block ---- */
   .contact-footer-green {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      background-color: var(--color-main);
      width: calc(100% + 40px);
      margin-left: -20px;
      padding: 28px 20px 36px;
   }

   /* Logo auf grünem Hintergrund */
   .contact-footer-logo {
      position: relative;
      width: 80px;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      margin-bottom: 4px;
   }

   .contact-footer-logo .logo-ring {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      fill: var(--color-bg);
   }

   .contact-footer-logo .logo-initials {
      font-size: 18px;
      font-weight: 700;
      color: var(--color-bg);
      position: relative;
      z-index: 1;
   }

   .contact-footer-copy {
      display: block;
      font-size: 16px;
      color: var(--color-bg);
   }

   .contact-footer-links {
      display: flex;
      gap: 16px;
   }

   .contact-footer-links a {
      font-size: 15px;
      color: var(--color-bg);
      text-decoration: none;
   }
}

/* Desktop: mobile-only footer elements verstecken */
@media (min-width: 769px) {
   .contact-footer-social,
   .contact-footer-green {
      display: none;
   }
}

@media (max-width: 768px) {
   .desktop-copy {
      display: none;
   }
}