/* 
 * RAVØYA - Responsive Design
 * Anpassung für verschiedene Bildschirmgrößen
 */

/* Große Desktop-Bildschirme */
@media (min-width: 1200px) {
    main {
      max-width: 1000px;
    }
    
    h1 {
      font-size: 3rem;
    }
    
    h2 {
      font-size: 2.2rem;
    }
    
    h3 {
      font-size: 1.5rem;
    }
    
    #intro {
      font-size: 3rem;
      padding: 4rem 1rem;
    }
  }
  
  /* Standard-Desktop und Tablets im Landscape-Modus */
  @media (max-width: 1199px) and (min-width: 992px) {
    main {
      max-width: 900px;
    }
    
    h1 {
      font-size: 2.8rem;
    }
    
    h2 {
      font-size: 2rem;
    }
  }
  
  /* Tablets und kleine Desktops */
  @media (max-width: 991px) and (min-width: 768px) {
    main {
      max-width: 720px;
      padding: 1.8rem;
    }
    
    h1 {
      font-size: 2.5rem;
    }
    
    h2 {
      font-size: 1.8rem;
    }
    
    .header-logo img {
      width: 8vw;
    }
    
    .header-banner img {
      width: 18vw;
    }
  }
  
  /* Tablets im Portrait-Modus und große Smartphones */
  @media (max-width: 767px) and (min-width: 576px) {
    main {
      padding: 1.5rem;
    }
    
    h1 {
      font-size: 2.2rem;
    }
    
    h2 {
      font-size: 1.6rem;
    }
    
    h3 {
      font-size: 1.3rem;
    }
    
    #intro {
      font-size: 2rem;
      padding: 2.5rem 1rem;
    }
    
    .header-top {
      gap: 0.8rem;
    }
    
    .header-logo img {
      min-width: 35px;
      width: 10vw;
    }
    
    .header-banner img {
      min-width: 100px;
      width: 25vw;
    }
    
    .header-bottom nav {
      justify-content: flex-start;
    }
    
    .header-bottom nav a {
      padding: 0.4rem 0.8rem;
      font-size: 0.9rem;
    }
    
    footer {
      padding: 1.2rem;
      flex-direction: row;
      justify-content: space-between;
    }
    
    .footer-logo,
    .footer-links {
      width: 45%;
    }
    
    .social-links {
      width: 100%;
      margin-top: 1rem;
      order: 3;
    }
  }
  
  /* Smartphones */
  @media (max-width: 575px) {
    html {
      font-size: 15px;
    }
    
    body {
      line-height: 1.5;
    }
    
    main {
      padding: 1.2rem;
    }
    
    h1 {
      font-size: 2rem;
      margin-top: 0.8em;
    }
    
    h2 {
      font-size: 1.5rem;
      margin-top: 1.3em;
    }
    
    h3 {
      font-size: 1.2rem;
    }
    
    #intro {
      font-size: 1.8rem;
      padding: 2rem 0.8rem;
      margin: 1.5rem auto;
    }
    
    .header-top {
      grid-template-columns: 1fr 2fr;
      gap: 0.5rem;
    }
    
    .header-logo {
      grid-column: 1;
    }
    
    .header-banner {
      grid-column: 2;
      text-align: right;
    }
    
    .header-right {
      display: none;
    }
    
    .header-logo img {
      min-width: 30px;
      width: 12vw;
    }
    
    .header-banner img {
      min-width: 80px;
      width: 30vw;
    }
    
    .header-bottom {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      margin-bottom: 0.2rem;
    }
    
    .header-bottom nav {
      width: 100%;
      justify-content: flex-start;
      gap: 0.5rem;
    }
    
    .header-bottom nav a {
      padding: 0.35rem 0.7rem;
      font-size: 0.85rem;
    }
    
    footer {
      padding: 1rem;
      flex-direction: column;
      gap: 1rem;
    }
    
    .footer-logo,
    .footer-links,
    .social-links {
      width: 100%;
      text-align: center;
    }
    
    .footer-logo {
      order: 1;
    }
    
    .social-links {
      order: 2;
    }
    
    .footer-links {
      order: 3;
      flex-direction: row;
      justify-content: center;
      gap: 1rem;
      flex-wrap: wrap;
    }
    
    .footer-logo img {
      min-width: 70px;
      width: 20vw;
    }
    
    form {
      padding: 1rem;
      margin: 1.5rem auto;
    }
    
    form input,
    form textarea {
      padding: 0.7rem;
    }
    
    form button {
      width: 100%;
    }
    
    .social-links {
      flex-direction: column;
      gap: 0.5rem;
      align-items: center;
    }
    
    .social-links a {
      width: 80%;
      min-width: auto;
    }
    
    .cta-links a {
      display: block;
      margin: 0.8rem auto;
      width: 80%;
    }
  }
  
  /* Kleine Smartphones */
  @media (max-width: 375px) {
    html {
      font-size: 14px;
    }
    
    main {
      padding: 1rem;
    }
    
    h1 {
      font-size: 1.8rem;
    }
    
    h2 {
      font-size: 1.3rem;
    }
    
    #intro {
      font-size: 1.5rem;
      padding: 1.5rem 0.5rem;
    }
    
    .header-bottom nav a {
      padding: 0.3rem 0.6rem;
      font-size: 0.8rem;
    }
  }
  
  /* Landschaftsmodus für Mobilgeräte */
  @media (max-height: 500px) and (orientation: landscape) {
    header {
      padding: 0.5rem;
    }
    
    .header-top {
      gap: 0.5rem;
    }
    
    #intro {
      padding: 1rem;
      margin: 1rem auto;
    }
    
    main {
      padding: 1rem;
    }
    
    footer {
      padding: 0.8rem;
    }
  }
  
  /* Druckformatierung */
  @media print {
    * {
      background: transparent !important;
      color: #000 !important;
      box-shadow: none !important;
      text-shadow: none !important;
    }
    
    body {
      margin: 0;
      padding: 1cm;
      font-size: 12pt;
      line-height: 1.4;
    }
    
    @page {
      margin: 2cm;
    }
    
    h1, h2, h3, h4, h5, h6 {
      page-break-after: avoid;
    }
    
    img {
      max-width: 100% !important;
      page-break-inside: avoid;
    }
    
    p, h2, h3 {
      orphans: 3;
      widows: 3;
    }
    
    a[href^="http"]:after {
      content: " (" attr(href) ")";
    }
    
    header, nav, footer, .social-links, form, .cta-links {
      display: none;
    }
  }