/* ============================================================
   af-home.css – Antibiotika-Fibel Startseite
   Option A+C + Breiten-Fix
   ============================================================ */

:root {
  --af-bg:      #f0f1f4;
  --af-bg-line: #d4d8e0;
  --af-c-bakt:  #1e4fa8;
  --af-c-reise: #0e6655;
  --af-c-zoo:   #6a2ea0;
  --af-c-diag:  #8a1e1e;
  --af-c-resi:  #1a5c8a;
  --af-c-anw:   #b04a14;
  --af-c-pilz:  #6b5a10;
}

/* ------------------------------------------------------------
   Body
   ------------------------------------------------------------ */
body,
.home body,
#content,
.home #content,
.site-content,
.ast-plain-container {
  background-color: var(--af-bg) !important;
}

.home .entry-content {
  padding-top: 0 !important;
  padding-bottom: 48px !important;
}

/* ------------------------------------------------------------
   Navbar – blau
   ------------------------------------------------------------ */
#ast-fixed-header,
.ast-primary-header-bar,
.main-header-bar,
.main-header-bar-wrap,
.site-header,
#masthead,
.ast-desktop-header {
  background-color: #1e4fa8 !important;
  border-bottom: none !important;
  box-shadow: none !important;
}
.site-header .site-title a,
.main-header-bar .site-title a,
.ast-primary-header-bar .site-title a {
  color: #ffffff !important;
  font-weight: 700 !important;
}
.main-header-bar .main-navigation a,
.ast-primary-header-bar .main-navigation a,
.site-header .main-navigation a {
  color: rgba(255,255,255,0.88) !important;
  font-weight: 500 !important;
}
.main-header-bar .main-navigation a:hover,
.site-header .main-navigation a:hover {
  color: #ffffff !important;
}

/* ------------------------------------------------------------
   Hero-Wrap: alignfull neutralisieren auf Mobile
   ------------------------------------------------------------ */
.home .af-home-hero-wrap {
  margin-bottom: 0 !important;
  padding: 0 !important;
}
@media (max-width: 767px) {
  .home .af-home-hero-wrap.alignfull {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ------------------------------------------------------------
   Hero – Option A+C:
   viel Luft oben/unten, kein Panel, H1 direkt auf Grund
   ------------------------------------------------------------ */
.home .af-home-hero,
.home .af-home-hero.has-background,
.home .af-home-hero.has-ast-global-color-5-background-color {
  background: transparent !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  padding-top: 56px !important;
  padding-bottom: 48px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* H1 – groß, leicht */
.home .af-home-hero h1,
.home .af-home-hero .wp-block-heading {
  font-size: clamp(2.2rem, 4.5vw, 3.2rem) !important;
  font-weight: 400 !important;
  color: #0f172a !important;
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
  margin-bottom: 14px !important;
}
.home .af-home-hero h1 strong,
.home .af-home-hero .wp-block-heading strong {
  font-weight: 800 !important;
  color: #4a90d9 !important;
}

/* Untertitel – Option C: größer, gewichtiger, dunklere Farbe */
.home .af-home-hero p,
.home .af-home-hero .has-medium-font-size,
.home .af-home-hero .wp-block-paragraph {
  font-size: 1.1rem !important;
  font-weight: 500 !important;
  color: #334155 !important;
  line-height: 1.55 !important;
}

.home .af-home-hero .has-small-font-size {
  display: none !important;
}

/* Suchfeld – Option B-Element: größer, mit Schatten */
.home .af-home-hero .wp-block-search__inside-wrapper {
  background: #ffffff !important;
  border-radius: 12px !important;
  border: 2px solid #bfdbfe !important;
  box-shadow: 0 4px 20px rgba(30,79,168,0.12) !important;
  overflow: hidden;
  margin-top: 28px !important;
}
.home .af-home-hero .wp-block-search__input {
  background: transparent !important;
  border: none !important;
  color: #0f172a !important;
  font-size: 1.05rem !important;
  padding: 16px 18px !important;
  box-shadow: none !important;
}
.home .af-home-hero .wp-block-search__inside-wrapper { display: flex !important; align-items: center; padding: 6px !important; gap: 6px; }
.home .af-home-hero .wp-block-search__input { flex: 1 1 auto; min-width: 0; }
.home .af-home-hero .wp-block-search__button {
  display: inline-flex !important;
  align-items: center;
  margin: 0 !important;
  padding: 12px 24px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: #1e4fa8 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  cursor: pointer;
}
.home .af-home-hero .wp-block-search__button:hover { background: #173f88 !important; }
.home .af-home-hero .wp-block-search__button:focus-visible { outline: 3px solid rgba(30,79,168,0.35); outline-offset: 2px; }

/* ------------------------------------------------------------
   Plate – kein Container, direkt auf Grund
   Breiten-Fix: gleiche seitliche Padding wie Hero
   ------------------------------------------------------------ */
.home .af-home-plate,
.home .af-home-plate.has-background,
.home .af-home-plate.has-ast-global-color-5-background-color {
  background: transparent !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-top: 0 !important;
}

/* Gutenberg wp-block-columns hat intern 24px padding – neutralisieren
   damit Karten bündig mit Hero-Text stehen */
.home .af-home-plate .wp-block-columns {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Rubriken – echte H2, größer */
.home .af-home-plate .af-home-h2 {
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  text-transform: none !important;
  color: #0f172a !important;
  margin-bottom: 18px !important;
  margin-top: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
}

/* ------------------------------------------------------------
   Gleiche Tile-Höhe
   ------------------------------------------------------------ */
.home .entry-content .wp-block-columns {
  align-items: stretch;
}
.home .entry-content .wp-block-column {
  display: flex;
  flex-direction: column;
}

/* ------------------------------------------------------------
   Tile – Desktop: farbiger Header oben, weißer Body
   Breiten-Fix: Karten-Container hat padding damit gleich breit
   wie Hero-Inhalt
   ------------------------------------------------------------ */
.home .entry-content .af-home-tile,
.home .entry-content .af-home-tile.has-background {
  position: relative !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  border: none !important;
  background: #ffffff !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.11) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
.home .entry-content .af-home-tile:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.17) !important;
}
.home .entry-content .af-home-tile::before {
  display: none !important;
}

/* Emojis entfernen */
.home .entry-content .af-home-tile h3 .emoji,
.home .entry-content .af-home-tile h3 img.emoji {
  display: none !important;
}

/* Tile-Titel = farbiger Header */
.home .entry-content .af-home-tile h3 {
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: #ffffff !important;
  background: #334155 !important;
  margin: 0 !important;
  padding: 16px 20px !important;
  letter-spacing: -0.01em !important;
}

/* Tile-Body */
.home .entry-content .af-home-tile p {
  margin: 0 !important;
  padding: 14px 20px 18px !important;
  font-size: 0.88rem !important;
  line-height: 1.55 !important;
  color: #475569 !important;
  flex: 1 !important;
}

.home .entry-content .af-home-tile .wp-block-buttons {
  display: none !important;
}
.home .entry-content .af-home-tile .af-card-link {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  text-indent: -9999px;
  overflow: hidden;
}

/* Tile-Farben */
.home .entry-content .af-home-tile:has(a[href*="bakterielle-infektionen"]) h3 { background: var(--af-c-bakt) !important; }
.home .entry-content .af-home-tile:has(a[href*="reisemedizin"]) h3            { background: var(--af-c-reise) !important; }
.home .entry-content .af-home-tile:has(a[href*="zoonosen"]) h3                { background: var(--af-c-zoo) !important; }
.home .entry-content .af-home-tile:has(a[href*="diagnostik"]) h3              { background: var(--af-c-diag) !important; }
.home .entry-content .af-home-tile:has(a[href*="resist"]) h3                  { background: var(--af-c-resi) !important; }
.home .entry-content .af-home-tile:has(a[href*="anwend"]) h3                  { background: var(--af-c-anw) !important; }
.home .entry-content .af-home-tile:has(a[href*="pilz"]) h3                    { background: var(--af-c-pilz) !important; }

/* Hover-Schatten */
.home .entry-content .af-home-tile:has(a[href*="bakterielle-infektionen"]):hover { box-shadow: 0 16px 40px rgba(30,79,168,0.25) !important; }
.home .entry-content .af-home-tile:has(a[href*="reisemedizin"]):hover            { box-shadow: 0 16px 40px rgba(14,102,85,0.25) !important; }
.home .entry-content .af-home-tile:has(a[href*="zoonosen"]):hover                { box-shadow: 0 16px 40px rgba(106,46,160,0.25) !important; }
.home .entry-content .af-home-tile:has(a[href*="diagnostik"]):hover              { box-shadow: 0 16px 40px rgba(138,30,30,0.25) !important; }
.home .entry-content .af-home-tile:has(a[href*="resist"]):hover                  { box-shadow: 0 16px 40px rgba(26,92,138,0.25) !important; }
.home .entry-content .af-home-tile:has(a[href*="anwend"]):hover                  { box-shadow: 0 16px 40px rgba(176,74,20,0.25) !important; }
.home .entry-content .af-home-tile:has(a[href*="pilz"]):hover                    { box-shadow: 0 16px 40px rgba(107,90,16,0.25) !important; }

/* Leere Spalten halten das Kachelraster, auf Mobil ausgeblendet */
.home .entry-content .af-home-leer { visibility: hidden; }
@media (max-width: 781px) { .home .entry-content .af-home-leer { display: none !important; } }

/* ------------------------------------------------------------
   Quick-Links – direkt auf Grund
   ------------------------------------------------------------ */
.home .entry-content .af-home-quick,
.home .entry-content .af-home-quick.has-background {
  background: transparent !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  margin-top: 32px !important;
  padding: 0 !important;
}
.home .entry-content .af-home-quick h2 {
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  text-transform: none !important;
  color: #0f172a !important;
  margin-bottom: 14px !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
}
.home .entry-content .af-home-quick .wp-block-button.is-style-outline .wp-block-button__link {
  border: 1.5px solid #c4ccd8 !important;
  color: #1e293b !important;
  background: #ffffff !important;
  border-radius: 20px !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  padding: 7px 18px !important;
  transition: all 0.14s !important;
}
.home .entry-content .af-home-quick .wp-block-button.is-style-outline .wp-block-button__link:hover {
  border-color: #1e4fa8 !important;
  color: #1e4fa8 !important;
}

/* ------------------------------------------------------------
   Disclaimer
   ------------------------------------------------------------ */
.home .af-home-plate .has-small-font-size,
.home .af-home-disclaimer {
  font-size: 0.875rem !important;
  font-style: italic !important;
  color: #64748b !important;
  line-height: 1.6 !important;
  margin-top: 24px !important;
  padding-top: 20px !important;
  border-top: 1px solid var(--af-bg-line) !important;
  display: block !important;
}

/* ------------------------------------------------------------
   MOBILE – Tiles: Balken links via ::after, volle Höhe,
   runde Ecken, kein farbiger Header
   ------------------------------------------------------------ */
@media (max-width: 767px) {

  .home .entry-content .af-home-tile {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    border-left: none !important;
    box-shadow: 0 3px 12px rgba(0,0,0,0.09) !important;
  }

  /* ::after als voller Farbbalken links */
  .home .entry-content .af-home-tile::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 6px !important;
    z-index: 10 !important;
    background: transparent !important;
  }

  /* H3 weiß auf Mobile, Padding links für Balken */
  .home .entry-content .af-home-tile h3,
  .home .entry-content .af-home-tile:has(a[href*="bakterielle-infektionen"]) h3,
  .home .entry-content .af-home-tile:has(a[href*="reisemedizin"]) h3,
  .home .entry-content .af-home-tile:has(a[href*="zoonosen"]) h3,
  .home .entry-content .af-home-tile:has(a[href*="diagnostik"]) h3,
  .home .entry-content .af-home-tile:has(a[href*="resist"]) h3,
  .home .entry-content .af-home-tile:has(a[href*="anwend"]) h3,
  .home .entry-content .af-home-tile:has(a[href*="pilz"]) h3 {
    background: #ffffff !important;
    color: #0f172a !important;
    padding: 14px 16px 10px 20px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .home .entry-content .af-home-tile p {
    padding-left: 20px !important;
  }

  /* Farben für ::after */
  .home .entry-content .af-home-tile:has(a[href*="bakterielle-infektionen"])::after { background: var(--af-c-bakt) !important; }
  .home .entry-content .af-home-tile:has(a[href*="reisemedizin"])::after            { background: var(--af-c-reise) !important; }
  .home .entry-content .af-home-tile:has(a[href*="zoonosen"])::after                { background: var(--af-c-zoo) !important; }
  .home .entry-content .af-home-tile:has(a[href*="diagnostik"])::after              { background: var(--af-c-diag) !important; }
  .home .entry-content .af-home-tile:has(a[href*="resist"])::after                  { background: var(--af-c-resi) !important; }
  .home .entry-content .af-home-tile:has(a[href*="anwend"])::after                  { background: var(--af-c-anw) !important; }
  .home .entry-content .af-home-tile:has(a[href*="pilz"])::after                    { background: var(--af-c-pilz) !important; }
}