/*
Theme Name: AMS-Theme_16.0
Theme URI: https://slyno.de/
Author: Arne Steiger
Version: 17.1_restore
Description: Theme with local Google-Font-Integration, clean animation etc.
Tags: custom, no-plugin, clean, animated, dsgvo
*/

/* === local Google Fonts integration === */
@font-face {
  font-family: 'Inter';
  src: url('./fonts/inter/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('./fonts/inter/Inter-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
body, button, input, select, textarea {
  font-family: 'Inter', sans-serif;
}

/* === Global Layout === */
body {
  margin: 0;
  padding: 0;
  background-color: #f0f0f0;
}

.btn {
  display: inline-block; /* falls nicht schon vorhanden */
  margin-top: 10px; /* Abstand zum Element darüber */
}

/* === Sections === */
.hero, .features, .image-block, .latest-posts, .testimonials, .cta, .footer {
  max-width: 1200px;
  margin: 20px auto;
  padding: 20px;
  border-radius: 10px;
  box-sizing: border-box;
}

/* === Animation === */
.hero {
  animation: fadeInDown 1s ease-in-out;
}
.features, .latest-posts, .testimonials, .footer {
  animation: fadeInUp 1s ease-in-out;
}
.image-block {
  animation: fadeInDown 1s ease-in-out;
}
.cta {
  animation: fadeInUp 1s ease-in-out;
}

/* === Hero === */
.hero {
  background-color: #ff3300;
  color: white;
  text-align: center;
  padding: 80px 20px;
}
.hero h1, .hero p {
  margin: 0 0 20px;
  color: white;
}
.hero .btn {
  background-color: #ffcc00;
  color: #000;
  font-weight: bold;
  padding: 12px 25px;
  border: 2px solid #000;
  border-radius: 10px;
  transition: 0.3s ease;
  text-decoration: none;
}

.hero .btn:hover {
  background: #fff;
  color: #ff3300;
  transform: scale(1.1);
}

/* === Features === */
.features {
  background: white;
  border-left: 5px solid #ff3300;
  border-right: 5px solid #ff3300;
  box-shadow: 0 0 15px rgba(0,0,0,0.1);
  padding: 20px;
  border-radius: 10px;
}
.features h2 {
  color: #0073e6;
  text-align: center;
  margin-bottom: 30px;  /* === 2025-JUL-31, ams === */
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  padding: 0 1px; /* === 2025-JUL-31, was 10 px ams === */
  box-sizing: border-box;
}
.feature-item {
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transition: 0.3s ease;
}
.feature-item:hover {
  transform: scale(1.02);
  background: #ffcc00;
}
.feature-item h3 {
  color: #0073e6;
}

@media (max-width: 768px) {
  .features {
    padding: 10px;
    border-left: 5px solid #ff3300;
    border-right: 5px solid #ff3300;
  }
  .features-grid {
    padding: 0 10px;
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .feature-item {
    max-width: 100%;
    margin: 0;
  }
}

@media (max-width: 480px) {
  .features {
    padding: 10px;
    border-left: 5px solid #ff3300;
    border-right: 5px solid #ff3300;
  }
  .features-grid {
    padding: 0 5px;
  }
}

/* === Image Block === */
.image-block {
  text-align: center;
  border-left: 5px solid #ff3300;
  border-right: 5px solid #ff3300;
  overflow: hidden;
  border-radius: 10px;
  margin: 20px auto;
  padding: 0;
  position: relative;
  box-sizing: border-box;
}
.image-block img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  margin: 0;
  padding: 0;
  border: none;
  vertical-align: bottom;
}

@supports not (object-fit: cover) {
  .image-block img {
    height: auto;
  }
}

/* === Testimonials === */
.testimonials {
  background: #ffcc00;
  border-left: 5px solid #ff3300;
  border-right: 5px solid #ff3300;
}
.testimonials h2 {
  color: #333;
  text-align: center;
}
.testimonial-item {
  text-align: center;
}
.testimonial-item p {
  color: #333;
  font-style: italic;
}
.testimonial-item strong {
  color: #0073e6;
}

/* === Call-to-Action === */
.cta {
  background: #0073e6;
  color: white;
  text-align: center;
  border-left: 5px solid #ff3300;
  border-right: 5px solid #ff3300;
  padding-top: 1em;
}
.cta .btn {
  background: #ffcc00;
  color: #000;
  border: 2px solid #000;
  border-radius: 10px;
  padding: 12px 25px;
  font-weight: bold;
  transition: 0.3s ease;
  text-decoration: none;
}
.cta .btn:hover {
  background: #fff;
  color: #0073e6;
  transform: scale(1.1);
}

/* === Footer === */
.footer {
    text-align: center;
    margin-bottom: 40px;
}
  /* background: #0073e6;
  color: white;
  border-left: 5px solid #ff3300;
  border-right: 5px solid #ff3300;


/* == Gutenberg Wrapper for mobile view == */
.inner-wrap {
  max-width: 100%;
  padding-left: 8px;
  padding-right: 8px;
  box-sizing: border-box;
}

@keyframes fadeInModal {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
.modal-content {
  animation: fadeInModal 0.3s ease-out;
}

/* === Latest Posts Block === */
.latest-posts {
  background: white;
  border-left: 5px solid #ff3300;
  border-right: 5px solid #ff3300;
  padding: 20px;
  border-radius: 10px;
  margin: 20px auto;
  max-width: 1200px;
  box-shadow: 0 0 15px rgba(0,0,0,0.1);
  animation: fadeInUp 1s ease-in-out;
}

.latest-posts h2 {
  text-align: center;
  color: #0073e6;
  margin-bottom: 30px;
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.media-item {
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transition: 0.3s ease;
}

.media-item:hover {
  transform: scale(1.02);
  background: #ffcc00;
}

.media-item h3 {
  margin-top: 10px;
  color: #0073e6;
}

.media-item p {
  margin: 10px 0;
  color: #333;
}

.media-item .read-more {
  text-decoration: none;
  color: #ff3300;
  font-weight: bold;
}

.post-thumbnail img {
  max-width: 100%;
  height: auto;
  display: block;
}

.post-tile {
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transition: 0.3s ease;
}

@media screen and (max-width: 480px) {
  .media-item img,
  .post-thumbnail img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
    box-sizing: border-box;
  }

  .media-item {
    overflow: hidden;
  }
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* === Modal-Styling für Join-us-today === */
.hidden {
  display: none;
}

.modal {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.modal-content {
  background: white;
  max-width: 540px;
  width: 90%;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
  text-align: center;
  font-family: 'Inter', sans-serif;
  animation: fadeInModal 0.3s ease-out;
  position: relative;
}

.close-button {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
}

/* === Padding-Fix für vertikale Zentrierung aller Hauptsektionen === */
.hero,
.features,
.testimonials,
.cta,
.footer,
.latest-posts {
  padding-top: 60px;
  padding-bottom: 60px;
}

/* Optional: Image-Block ausnehmen, da hier Padding bewusst 0 ist */
.image-block {
  padding-top: 0;
  padding-bottom: 0;
}

.hero h2,
.testimonials h2,
.cta h2,
.footer h2 {
  font-size: 1.25rem;
} 

.latest-posts h2 {
  margin-top: 20px; /* optional, je nach gewünschtem Abstand nach oben */
  margin-bottom: 20px; /* optional, je nach gewünschtem Abstand nach unten */
  font-size: 1.25rem;
}

.features h2 {
  margin-top: 20px;
  margin-bottom: 20; /* optional, je nach gewünschtem Abstand nach unten */
  font-size: 1.25rem;
} 

.post-thumbnail {
  margin: 20px auto;
  text-align: center;
}

.post-thumbnail img {
  max-width: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.post-meta {
  text-align: center;
  font-size: 0.9rem;
  color: #777;
  margin-bottom: 20px;
}

.post-meta .post-date {
  margin-right: 10px;
}

.post-meta .post-category a {
  color: #ff3300;
  text-decoration: none;
}

.post-meta .post-category a:hover {
  text-decoration: underline;
}

.post-share {
  text-align: center;
  margin-top: 40px;
  margin-bottom: 40px;
}

.post-share-label {
  margin-bottom: 10px;
  font-size: 0.9rem;
  font-weight: 500;
}

.social-icon {
  margin: 0 8px;
  font-size: 2rem;
  color: #006427;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

.social-icon:hover {
  color: #2BB2FC;
}

.escape-button {
  display: inline-block;
  width: 160px; /* Breite anpassbar */
  transition: transform 0.2s ease;
}

.escape-button:hover {
  transform: scale(1.05);
}

.escape-button img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.escape-wrapper {
  display: inline-block;
  text-align: center;
}

.escape-label {
  display: block;
  color: #000; /* Schwarz */
  font-size: 0.95rem;
  font-weight: 500;
  margin-bottom: 0.4em;
}

.latest-posts-wrapper {
  padding: 0 1rem; /* rechts & links Abstand */
  box-sizing: border-box;
}

.latest-posts-wrapper .post-tile {
  margin-bottom: 1.5rem; /* Abstand zwischen den Kacheln */
}

/* Optional: auf kleinen Screens nur 1 pro Zeile */
@media (max-width: 768px) {
  .latest-posts-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .latest-posts-wrapper .post-tile {
    width: 100%;
    max-width: 600px;
  }
}

.features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem;
  padding: 0 1rem;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .features-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 0 0.5rem; /* Hier wurde es enger gemacht */
  }

  .feature-item {
    margin: 0 auto;
    max-width: 600px;
  }
}

@media (max-width: 480px) {
  .features-grid {
    padding: 0 0.25rem; /* Optional noch schmaler auf ganz kleinen Screens */
  }
}
@media screen and (max-width: 768px) {
  .latest-posts {
    padding: 10px;
  }
}
@media screen and (max-width: 768px) {
  .features {
    padding: 10px;
  }
}
@media screen and (max-width: 768px) {
  .testimonials {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}
@media screen and (max-width: 768px) {
  .testimonial-item {
    padding-top: 5px;
    padding-bottom: 10px;
  }
}

@media screen and (max-width: 768px) {
  .features,
  .latest-posts,
  .testimonials {
    padding-bottom: 30px; /* vorher 10px */
  }
}

/* ==========================================================================
   Query Loop - Post Shadow Boxes
   Applies globally to all Gutenberg Query Loops
   ========================================================================== */

.wp-block-post {
  background: #fff; /* White background for contrast */
  padding: 20px; /* Inner spacing */
  margin-bottom: 30px; /* Space between posts */
  border-radius: 12px; /* Rounded corners */
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* Soft shadow */
  transition: box-shadow 0.3s ease; /* Smooth hover transition */
}

.wp-block-post:hover {
  box-shadow: 0 6px 18px rgba(0,0,0,0.15); /* Stronger shadow on hover */
}

.wp-block-post .wp-block-post-title {
  margin-top: 0; /* Remove top margin for clean alignment */
}

.wp-block-post .wp-block-post-title a {
  color: inherit; /* Inherit text color from theme */
  text-decoration: none; /* Remove underline */
}

.wp-block-post .wp-block-post-title a:hover {
  text-decoration: underline; /* Add underline on hover */
}

/* ==========================================================================
   Query Loop - Post Boxes
   Subtle on desktop, clear separation on iOS Safari
   ========================================================================== */

.wp-block-post {
  background: #fff;
  padding: 20px;
  margin-bottom: 30px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08); /* subtle shadow for desktop */
  transition: box-shadow 0.3s ease;
}

.wp-block-post:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}

/* Extra visibility on small screens */
@media (max-width: 768px) {
  .wp-block-post {
    background: #fafafa;              /* light grey background */
    box-shadow: none;                 /* remove subtle shadow */
    border: 1px solid rgba(0,0,0,0.08); /* very light border */
  }
}